HTML <button> Tag
To create a clickable button, the <button> tag is used. It is usually required within an HTML form. Contents like text or images can be placed within the <button> tag. The “type” attribute needs to be specified for a <button> tag because, for the <button> tag, different browsers can have different default types. When the HTML <button> tag is used inside the form, it works as a submit button or as a reset button. However, when the HTML <button> tag is used outside the form, it is used to call a JavaScript function on it.
Example: To display button.
<!DOCTYPE html>
<html>
<body>
<h2>Click the button below:</h2>
<button type="button" onclick="alert('Thank you!')">Click Me</button>
</body>
</html>
Explanation:
In the above example, an alert message is displayed on clicking the button.
Example: Calling JavaScript Function.
<!DOCTYPE html>
<html>
<body>
<h2>Click the button below:</h2>
<button type="button" onclick="thanks()">Click Me</button>
<script>
function thanks(){
alert("Thank you!");
}
</script>
</body>
</html>
Explanation:
In the above example, we are calling a Javascript function by clicking the button.
Example: Submit Form.
<!DOCTYPE html> <html> <body> <h4>Fill the form below.</h4> <form> UserName: <input type="text" name="name"><br><br> <button>Submit</button> </form> </body> </html>
Explanation:
In the above example, we are submitting a form by clicking the button.
Example: Reset Form.
<!DOCTYPE html> <html> <body> <h4>Fill the form below.</h4> <form> UserName: <input type="text" name="name"><br><br> <button type="reset">Reset</button> </form> </body> </html>
Explanation:
In the above example, we are resetting the entered value by clicking the button.
Tag specific Attributes:
| Attribute | Uses |
| autofocus | Used to specify that a button should automatically get focus while page loading. |
| disabled | Used to specify that a button should be disabled. |
| form | Used to specify a form. |
| formaction | Used for the submit type to specify where to send the data of the form when the form is submitted. |
| formmethod | Used to specify the way to send the data of the form. |
| formenctype | Used to specify the way in which form data should be encoded before submitting to the server. |
| formnovalidate | Used to specify that the data of the form should not be validated on submission. |
| formtarget | Used to specify where to display the response after submitting the form. |
| name | Used to specify the name of the button. |
| type | Used to specify the type of the button. |
| value | Used to specify the value of the button. |
Global Attributes:
All the Global attributes are supported by the HTML <button> tag.
Event Attributes:
All the Event attributes are supported by the HTML <button> tag.
Supporting Browsers:
Chrome, IE, Firefox, Opera, and Safari.
