HTML Tags
HTML <button> Tag
The
<button>tag is used to create a clickable button in an HTML form or web page.
It can contain text, images, or HTML content, unlike<input type="submit">which is limited to plain text.
Syntax
html
<button type="submit" name="btnName" value="buttonValue">Click Me</button>Attributes
| Attribute | Description |
|---|---|
| type | Defines the button type: submit (submit form), reset (reset form), or button (custom action). |
| name | Name of the button used for form submission. |
| value | Value sent to the server when the form is submitted. |
| disabled | Disables the button so it cannot be clicked. |
| autofocus | Automatically focuses the button when page loads. |
| form | Specifies the form the button belongs to (useful if outside a form). |
Example
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Example</title>
</head>
<body>
<h2>Button Examples</h2>
<form action="/samples/form_processor.php" method="post">
<button type="submit" name="submitBtn" value="Submit">Submit Form</button>
<button type="reset">Reset Form</button>
<button type="button" onclick="alert('Hello!')">Click Me</button>
</form>
</body>
</html>Output
Browser Output
html
You will see three buttons:- A Submit Form button that sends the form data.
- A Reset Form button that clears the form fields.
- A Click Me button that triggers a JavaScript alert.
Use our TryIt Editor to see the different button types and their behavior.
Browser Support
Chrome | Edge | Firefox | Safari | Opera | IE9+ |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |
All major browser supports <button> tag
Notes
<button>is more flexible than<input type="button">because it can contain HTML or images.- Always use
type="submit"for form submission andtype="button"for custom actions. - Use
disabledto prevent user clicks when necessary.
Conclusion
The <button> tag is a versatile and interactive element for forms and web interfaces.
It allows developers to create custom buttons with text, images, or icons, enhancing the user experience.