<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

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