HTML/Elements/button

From Web Education Community Group
< HTML‎ | Elements
Jump to: navigation, search

<button>

The <button> element represents a button.

Point


HTML Attributes


  • 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>

Button01.png

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>

Button02.png

HTML Reference

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