<button>

Definition

The HTML button element is used to create a clickable button on a web page. It can be used to submit forms, trigger events, or perform other actions.

Examples

<form>
	<label for="submit-button">Submit Button:</label>
	<button id="submit-button" type="submit">Submit</button>

	<label for="reset-button">Reset Button:</label>
	<button id="reset-button" type="reset">Reset</button>

	<label for="custom-button">Custom Button:</label>
	<button id="custom-button" type="button">Click me!</button>
</form>

In the above example, three button elements are used within a form element. The first button has a type attribute set to submit, which will submit the form when clicked. The second button has a type attribute set to reset, which will reset the form to its default values when clicked. The third button has a type attribute set to button, which means it will not perform any default action when clicked. Instead, it can be used to trigger a custom JavaScript function. Each button element also has a label element associated with it to provide a descriptive label for the button.

Attributes

AttributeDescriptionDeprecated
autofocusSpecifies that the button should automatically be focusedNo
disabledSpecifies that the button should be disabledNo
nameSpecifies a name for the button, which can be used to identify the button and its associated data when the form is submittedNo
typeSpecifies the type of button, such as submit or resetNo
valueSpecifies a value for the button, which can be used to identify the button and its associated data when the form is submittedNo
formSpecifies the form the button belongs toNo
formactionSpecifies the URL to be used for the form submissionNo
formenctypeSpecifies the encoding type for the form dataNo
formmethodSpecifies the HTTP method to use for the form submissionNo
formnovalidateSpecifies that the form should not be validatedNo
formtargetSpecifies where to display the response after form submissionNo

Best Practices

Best practices for using the HTML button element include the following:

  • Use the button element only for clickable buttons that trigger an action, such as submitting a form or performing a JavaScript function.
  • Use the input element with the type="button" attribute for buttons that do not perform an action, such as a reset button that resets a form to its default values.
  • Use the button element's type attribute to specify the type of button, such as submit for a button that submits a form or reset for a button that resets a form.
  • Use the button element's name and value attributes to specify a name and value for the button, which can be used to identify the button and its associated data when the form is submitted.
  • Use the button element's disabled attribute to disable the button, preventing it from being clicked, if necessary.

Accessibility Considerations

Accessibility considerations for the HTML button element may include:

  • Use the label element to provide a descriptive label for the button, which can be read by screen readers and other assistive technologies.
  • Use the button element's aria-label attribute to provide a label for the button if the button's text is not descriptive or if the button has no text at all.
  • Avoid using images as the only content of a button element, as they may not be easily understood by assistive technologies.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes