button: The Button element

The <button> HTML element is an interactive element activated by a user with a mouse, keyboard, finger, voice command, or other assistive technology. Once activated, it then performs a programmable action, such as submitting a form or opening a dialog.

By default, HTML buttons are presented in a style resembling the platform the user agent runs on, but you can change buttons' appearance with CSS.

Attributes

Specific attributes

Recommended attributes

name="[name]" the name of the button, submitted as a pair with the button’s value as part of the form data, when that button is used to submit the form.

type="[button type]" the default behavior of the button. Possible values are:

• submit: The button submits the form data to the server. This is the default if the attribute is not specified for buttons associated with a <form>, or if the attribute is an empty or invalid value.
• reset: The button resets all the controls to their initial values, like <input type="reset">.
• button: The button has no default behavior, and does nothing when pressed by default.

Allowed attributes

disabled prevents the user from interacting with the button: it cannot be pressed or focused.

form="[form id]" the <form> element to associate the button with (its form owner). The value of this attribute must be the id attribute of a <form> element in the same document.

value="[value]" defines the value associated with the button’s name when it’s submitted with the form data. This value is passed to the server in params when the form is submitted using this button.

Global attributes

accesskey Specifies a keyboard shortcut to activate or focus an element.

aria-* Defines accessibility properties and states for assistive technologies.

class Specifies one or more CSS class names for styling the element.

data-* Stores custom data private to the page or application.

dir Sets the text direction (left-to-right, right-to-left, or auto).

hidden Hides the element from display and assistive technologies.

id Defines a unique identifier for the element within the document.

inputmode Hints which virtual keyboard type to display on mobile devices.

itemid Provides a global identifier for microdata items.

itemprop Defines a property name-value pair for microdata.

itemref Associates properties with an item via element IDs for microdata.

itemscope Creates a new microdata item container.

itemtype Specifies the vocabulary URL for microdata items (like Schema.org).

lang Specifies the primary language of the element’s content.

nonce Provides a cryptographic nonce for Content Security Policy.

role Defines the element’s semantic role for accessibility.

tabindex Controls keyboard navigation order and focusability.

title Provides advisory information displayed as a tooltip.

Example

<button type="submit" name="submit" value="submit-value">Submit Form</button>
<button type="button">Click Me</button>