HTML Button Tag
The <button> tag is used to create a clickable button on a webpage. This button can be used for various purposes — like submitting a form, resetting a form, or even running JavaScript code.
Unlike input-based buttons (<input type="submit">), the <button> tag can hold HTML content inside it — like text, icons, images, or even styling. This makes it much more flexible and customizable.
Syntax -
<button attributes>Click Me</button>
| Attribute | Description | Values |
|---|---|---|
| autofocus | Specifies the button should have focus on page load. HTML5 attribute | None. |
| disabled | Disables the button control. | None. |
| form | Specifies the button belonging formid. HTML5 attribute | Form_id text. |
| formaction | Specifies where to send the data.Used when type is "submit". Override form element’s action attribute. HTML5 attribute | URL. |
| formenctype | Specifies how to encode the form data.Used when type is "submit". Override a form element’s enctype attribute. HTML5 attribute | Default. text/plain: Basic text. |
| formmethod | Specifies how to send the data.Used when type is submit. Override a form element’s method attribute. HTML5 attribute | get: Used for simple data sending. post: Used for more detailed or secure data sending. |
| formnovalidate | Specifies form not to be validated on submit.Used when type is submit. Override a form element’s novalidate attribute. HTML5 attribute | None. |
| formtarget | Specifies where to display the data on submit.Used when type is submit. Override a form element’s target attribute. HTML5 attribute | _self: Opens in current window / tab.
_blank: Opens a new window / tab. _parent _top framename |
| name | Specifies the button name | Text (no spaces). |
| type | Specifies the name of the button | submit (default): Submits the form. reset: Resets all the controls in a form to their initial default values. button: Does nothing |
| value | Specifies the button initial value.Used when type is submit. | Text. |
Example -
Scenario - Example Using <button> Tag
<!DOCTYPE html>
<html>
<head>
<title> Button element example.. </title>
</head>
<body>
<button type="button" alert('Welcome to our site!')">
Click Me</button>
</body>
</html>
Output -
Explaining Example -
When you click the button, a small popup appears that says "Welcome to our site!". The onclick attribute is used to define what happens when the button is clicked.