The HTML button element is a crucial component of any web page. It creates clickable buttons that can trigger various actions, such as form submission, link navigation, or JavaScript functions.
Here’s an example of how to use the <button> tag:
<code><button type="submit">Submit Form</button></code>
This code snippet creates the button element with the “type” attribute set to “submit.” This tells the browser that the button should submit the form it is inside of when clicked. Other possible values for the “type” attribute include “reset”, which resets the form’s fields to their default values, and “button”, which does not have any predefined behavior.
Here’s a table summarizing all the attributes applicable to the <button> tag:
| Attribute | Description |
|---|---|
| accesskey | Specifies a shortcut key to access the button |
| autofocus | Specifies that the button should automatically receive focus when the page loads |
| disabled | Disables the button |
| form | Associates the button with a form |
| name | Specifies a name for the button (used in form submission) |
| type | Specifies the type of button (e.g., submit, reset, or button) |
| value | Specifies the value to be submitted with the form (if the button is a submit button) |
Attributes Breakdown:
The “accesskey” attribute specifies a shortcut key that can be used to access the button. For example:
<button accesskey="s">Submit Form</button>In this code snippet, the “s” key can be used as a shortcut to access the button.
The “autofocus” attribute specifies that the button should automatically receive focus when the page loads. This is useful for creating buttons that are intended to be the primary action on the page (e.g., a login button).
The “disabled” attribute disables the button, making it unclickable. This can be used to disable a button while some condition is met temporarily.
The “form” attribute associates the button with a specific form on the page. This allows the button to submit that form when clicked, even if it is not inside of the form element.
The “name” attribute specifies a name for the button, which can be used in server-side processing (e.g., to identify which button was clicked on a form submission).
The “type” attribute specifies the button type, as mentioned earlier.
The “value” attribute specifies the value to be submitted with the form when the button is a submit button. This can be used to pass additional data along with the form submission.
