Using the <button> Element

Input elements of type button are rendered as simple push buttons, which can then be programmed to control functions on a webpage. The element is implemented using the DOM HTMLButtonElement interface. A button can be used for many things, such as sending or receiving data. They make the web page much more functional for the user.

Attributes

This element's attributes include the global attributes.

autofocus

This Boolean attribute specifies that the button should have input focus when the page loads. Only one element in a document can have this attribute.

autocomplete Non-standard

This attribute on a <button> is nonstandard and Firefox-specific. Unlike other browsers, Firefox persists the dynamic disabled state of a <button> across page loads. Setting autocomplete="off" on the button disables this feature; see Firefox bug 654072.

disabled

This Boolean attribute prevents the user from interacting with the button: it cannot be pressed or focused.

Firefox, unlike other browsers, persists the dynamic disabled state of a <button> across page loads. To control this feature, use the autocomplete attribute.

form

The <form> element to associate the button with (its form owner). The value of this attribute must be the id of a <form> in the same document. (If this attribute is not set, the <button> is associated with its ancestor <form> element, if any.)

This attribute lets you associate <button> elements to <form>s anywhere in the document, not just inside a <form>. It can also override an ancestor <form> element.

formaction

The URL that processes the information submitted by the button. Overrides the action attribute of the button's form owner. Does nothing if there is no form owner.

formenctype

If the button is a submit button (it's inside/associated with a <form> and doesn't have type="button"), specifies how to encode the form data that is submitted. Possible values:

  • application/x-www-form-urlencoded: The default if the attribute is not used.
  • multipart/form-data: Used to submit <input> elements with their type attributes set to file.
  • text/plain: Specified as a debugging aid; shouldn't be used for real form submission.

If this attribute is specified, it overrides the enctype attribute of the button's form owner.

formmethod

If the button is a submit button (it's inside/associated with a <form> and doesn't have type="button"), this attribute specifies the HTTP method used to submit the form. Possible values:

  • post: The data from the form are included in the body of the HTTP request when sent to the server. Use when the form contains information that shouldn't be public, like login credentials.
  • get: The form data are appended to the form's action URL, with a ? as a separator, and the resulting URL is sent to the server. Use this method when the form has no side effects, like search forms.

If specified, this attribute overrides the method attribute of the button's form owner.

formnovalidate

If the button is a submit button, this Boolean attribute specifies that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the novalidate attribute of the button's form owner.

This attribute is also available on <input type="image"> and <input type="submit"> elements.

formtarget

If the button is a submit button, this attribute is an author-defined name or standardized, underscore-prefixed keyword indicating where to display the response from submitting the form. This is the name of, or keyword for, a browsing context (a tab, window, or <iframe>). If this attribute is specified, it overrides the target attribute of the button's form owner. The following keywords have special meanings:

  • _self: Load the response into the same browsing context as the current one. This is the default if the attribute is not specified.
  • _blank: Load the response into a new unnamed browsing context - usually a new tab or window, depending on the user's browser settings.
  • _parent: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as _self.
  • _top: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as _self.
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.

popovertarget

Turns a <button> element into a popover control button; takes the ID of the popover element to control as its value. See the Popover API landing page for more details.

popovertargetaction

Specifies the action to be performed on a popover element being controlled by a control <button>. Possible values are:

"hide"

The button will hide a shown popover. If you try to hide an already hidden popover, no action will be taken.

"show"

The button will show a hidden popover. If you try to show an already showing popover, no action will be taken.

"toggle"

The button will toggle a popover between showing and hidden. If the popover is hidden, it will be shown; if the popover is showing, it will be hidden. If popovertargetaction is omitted, "toggle" is the default action that will be performed by the control 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">. (This behavior tends to annoy users.)
  • button: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.
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.