<button>

The <button> element represents a button.

Point

• The behavior of the button when it is activated is controlled by the type attribute. [States of the type attribute]

HTML Attributes

• type = submit/ reset/ button
  The missing value default is the Submit Button state. [States of the type attribute]

• autofocus = boolean
  Allows the author to indicate that a control is to be focused as soon as the page is loaded

• disabled = boolean
  If present, make the control non-interactive and to prevent its value from being submitted.

• form = the ID of a form element in the element's owner
  Associate the button element with its form owner.
  By default, the button element is associated with its nearest ancestor form element.

• name = unique name
  Represents the element's name.

• value = element's value
  Gives the element's value for the purposes of form submission.

See also global attributes.

States of the type attribute

Submit Button state

Represents a button for submitting a form.
If the element has a form owner, the element must submit the form owner from the button element. [Example A]

Reset Button state

Represents a button for resetting a form. [Example A]

Button state

Represents a button with no additional semantics. [Example B]

Examples

Example A

[try it]:

<form action="http://www.example.com/" method="get">
  <label>First Name: <input type="text" name="fn"></label>
  <label>Last Name: <input type="text" name="ln"></label>
  <button type="submit" value="submit">submit</button>
  <button type="reset" value="reset">reset</button>
</form>

Example B

The following button is labeled "Show hint" and pops up a dialog box when activated [try it]:

<button type="button"
        onclick="alert('This 15-20 minute piece was composed by George Gershwin.')">
 Show hint
</button>

HTML Reference

The HTML5 specification defines the <button> element in 4.10.8 The button element.