HTML5 <button> Tag

The HTML <button> tag is used to represent a clickable button.

The only content permitted inside this element is Phrasing content. Both the starting and ending tag are mandatory for this element. The parent of the <button> tag can be any element that accepts phrasing content.

Here is an example of using this tag:

<button type="button"> Basic Button </button>

Attributes

autofocus (HTML5)

This Boolean attribute is used to specify that the button should have input focus when the page loads. You can use this attribute only on one form-associated element in a document.

autocomplete

Using this attribute on a <button> is nonstandard and Firefox-specific. By default, unlike other browsers, Firefox persists the dynamic disabled state of a <button> across page loads. Setting the value of this attribute to off (i.e. autocomplete="off") disables this feature.

disabled

This Boolean attribute is used to indicate whether the user can or cannot interact with the button. If this attribute is not specified, the button will inherit its setting from the containing element, for example <fieldset>. If there is no containing element with the disabled attribute set, then the button is enabled.

form (HTML5)

This attribute is used to determine the form element that the given button is associated with. In other words, this attribute determines the button's form owner). The value of this attribute must be the id of a <form> element on the same webpage. If this attribute is not specified, the <button> element will be associated to an ancestor <form> element, if any such form exists. This attribute enables you to associate a <button> element to <form> elements anywhere within a document. The buttons no longer need to be the descendants of a <form> element.

formaction (HTML5)

This attribute specifies the URI of a program which will processes the information submitted by the button. When specified, it will override the action attribute of the button’s form owner.

formenctype (HTML5)

When the button is a submit button, this attribute can be used to specify the type of content that is used to submit the form to the server. Possible values for this attribute are:

  • application/x-www-form-urlencoded: The default value if the attribute is not specified.
  • multipart/form-data: Use this value if you are using an element with the type attribute set to file.
  • text/plain: If this attribute is specified, it overrides the enctype attribute of the button’s form owner.

formmethod HTML5

If the button is a submit button, this attribute can be used to specify the HTTP method that the browser should use to submit the form. Possible values for this attribute are:

  • post: This value specifies that the data from the form is included in the body of the form and is sent to the server.
  • get: This value specifies that the data from the form is appended to the form attribute URI, with a ‘?’ as a separator, and the resulting URI is sent to the server. This method should only be used when the form has no side-effects and contains only ASCII characters. When specified, this attribute will override the method attribute of the button’s form owner.

formnovalidate HTML5

If the button is a submit button, this Boolean attribute can be used specify that the form is not to be validated when it is submitted. Just like all other such attributes, when specified, this one will also override the novalidate attribute of the button’s form owner.

formtarget HTML5

If the button is a submit button, this attribute is a name or keyword indicating where to display the response that is received after submitting the form. If this attribute is specified, it overrides the target attribute of the button’s form owner. The can have following values:

  • _self: This value will load the response of the form into the same browsing context as the current one. This value is the default if the attribute is not specified.
  • _blank: This value will load the response of the form into a new unnamed browsing context.
  • _parent: This value will load the response of the form into the parent browsing context of the current one. If there is no parent, this option behaves the same way as _self.
  • _top: This value will load the response of the form into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). When there is no parent present, this option behaves the same way as _self.

name

This attribute is used to set the name of the button. This name is submitted with the form data.

type

This attribute is used to specify the type of the button. Possible values for this attribute are:

  • submit: In this case, the button will submit the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.
  • reset: In this case, the button will reset all the controls to their initial values.
  • button: In this case, the button has no default behavior. It can have client-side scripts associated with the element’s events, which are triggered when the events occur.
  • menu: In this case, the button will open a popup menu defined via its designated <menu> element.

value

This attribute is used to set the initial value of the button. It defines the value associated with the button which is submitted with the form data. This value is passed to the server in params when the form is submitted.

Examples

See the Pen HTML button Tag by Tutorialio (@tutorialio) on CodePen.

Further Reading

  1. Read more about the HTML <button> element on MDN.
  2. You can also read the HTML <button> tag reference on W3C.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top