HTML <Button> Tag

Definition

The <button> element creates a clickable button and is often used to submit forms and other button functionality. To add functionality when the button is clicked, you will need to associate it with an activation behavior, such as submit, reset, or button.

Example

<button type="button">Log Out</button>

Usage

• You must tell browsers the type of button by specifying a type attribute when using a <button> element.
• You can add text, and phrasing content tags, such as <b>, <em>, <img>, <q>, <svg>, and <strong> to <button> elements.
• If you fail to include a Button element, the web page will fail HTML validation.

Attributes

The Button element supports the Global Attributes, along with the following:

• autofocus

  The autofocus attribute specifies that the <button> should be auto-focused when the page document loads. You can only use this on one element per page.

• autocomplete

  The autocomplete attribute is used to disable a feature unique to Firefox where Firefox remembers the state of input elements when you refresh the page. To disable this feature, set the autocomplete value to "off".

  autocomplete="off"

• disabled

  The disabled attribute prevents the user from interacting with the button. It turns it off. Because Firefox persists the disabled state of a button across page loads, you will need to turn autocomplete off, as specified above.

• form

  The form attribute must be identical to the id attribute value of a <form> element that you wish to associate this button to. The <button> element can be anywhere in the document, not just in the <form> element.

• formaction

  The formaction attribute specifies the URL that processes the information submitted by the form. This overrides the action attribute of the <form> element.

• formenctype

  The formenctype attribute specifies the method of encoding of information sent to a server for forms with type=submit. Possible values include:

  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain

  If specified, it overrides the enctype attribute of the <form> element.

• formmethod

  The formmethod attribute specifies the HTTP method used to submit a form where the type attribute value is not button.

  Possible values include:

  • get - This is where the submitted data is included in the HTTP request body.
  • post - This is where the submitted data is appended to a forms action URL with a ?. This is often used for search forms.

  If specified, it overrides the method attribute of the <form> element.

• formnovalidate

  The formnovalidate attribute is a Boolean attribute. It specifies whether to validate the form when submitted.

  If specified, it overrides the novalidate attribute of the <form> element.

• formtarget

  The formtarget attribute specifies where to display the response after submitting the form where the type="submit".

  Values can include:

  • _self
  • _blank
  • _parent
  • _self
  • _top
  • Frame, tab, or window name.

  If specified, it overrides the target attribute of the <form> element.

• name

  The name attribute specifies the name of the button. It is submitted to the server along with the value as part of the form data.

• type

  The type attribute specifies the behavior of the <button> when activated.

  Values can include:

  • submit - The button submits the form data to the server. This is the default value if the attribute is not specified, empty, or invalid.
  • reset - This resets all controls to the default values.
  • button - This has no default behavior. It is usually used with JavaScript.

• value

  The value attribute specifies a value for the button’s name attribute, and is passed to the server when the form is submitted.

Best Practices

• Do not solely use an icon to represent a button. You should include descriptive text that describes the button’s functionality to ensure the button is accessible for assistive technology, such as screen readers.
• If you must have not descriptive text on the button, you should still include it, but hide it using CSS. However, the preferred way is to keep the descriptive text on the button, such as “Sign up”, or “Log out”.
• Buttons should be large enough to be easy to active them, whether with a mouse cursor, stylus, or fingers. A minimum size of 44x44 CSS pixels is recommended.
• Buttons should be sufficiently spaced from each other. This is especially important for users with motor control issues who may inadvertently tap the screen when trying to scroll.

Specification

• HTML Living Standard Specification
• HTML5 Specification

Browser Support

Desktop

Mobile