button (type=button) element

If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.

Description

The button element, having the "button" value in its type attribute, instructs the browser to provide a regular button which has no associated action. The label of a button is represented by the content of the element.

When the button element is declared with the value "button" in its type attribute, the action it performs when it's clicked, is usually provided by a script. If the button isn't associated to a program, it will carry no action when pressed.

In contrast with the input (type=button) element, this type of button can contain other non-interactive elements.

Examples

In the next example we'll see how the button element is rendered by the browser. For this first example, we'll just add some plain text inside of its tags.

<form action="../../form-result.php">
  <p>
    Username: <input type="text" name="username">
    <button type="button">I'm on strike...</button>
  </p>
</form>

Username:

As predicted, the "button" type button didn't do anything when pressed, which is exactly what's expected of this type of button. Now, we'll be associating an action to the button through a script that will change the background of the paragraph containing it when it's pressed. For this purpose, we'll be using the onclick event.

<p><button type="button" onclick="changeColor(this.parentNode)">Press me, and I'll paint my container...</button></p>

Our last example will show the special feature of the button element, which lets it hold other non-interactive elements. This is one of the main differences it has with the intput (type=button) element.

<button type="button">In the <i>examples</i> we can see<br>the <b>button</b> element in action...</button>

Attributes

Specific attributes

autofocus

A boolean value instructing the browser to set the focus to this control when the document has finished loading or when the dialog where the control finds itself is shown. If the attribute has the value "autofocus" or the empty string (""), or if it's just present, the control should get the focus as soon as possible, after the page or dialog has been loaded.

Example

<button type="button" onclick="checkDatabase()" autofocus>Check database</button>

disabled

A boolean value indicating wether the control is disabled or not. If the attribute takes the value "disabled" or the empty string (""), or if it's just present, the control will be disabled.

Disabled controls are rendered greyed out (if visible), are blocked from user interaction and, more importantly, their values (if any) aren't sent when the form is submitted.

Example

<button type="button" disabled>Press me... if you can!</button>

form

The value of the id attribute of the form with which this control is associated to.

This attribute is new in HTML5 and helps defining the pertenence of controls in nested or distant forms.

Example

<form id="form1" action="../../form-result.php">
  <p>Surname: <input type="text" name="surname"></p>
</form>
<button type="button" form="form1">Send!</button>

Surname:

name

A name for the control. This name will be sent by the browser to the processing agent, paired with the content of the value attribute. Both attributes together will conform a name-value pair that will be used to process the form data.

Currently, the value isindex, formerly used in a special way by some browsers and included in the HTML standard, isn't permitted in this attribute.

The name-value pair of a button is submitted, with the other form data, only if the button has been used to submit the form.

Example

<form action="../../form-result.php">
  <p>
    Username: <input type="text" name="username">
    <button type="button" name="coolsubmitbutton" value="pressed" onclick="submitForm()">Submit</button>
  </p>
</form>

type

A value indicating the expected behavior of the button. There are four possible values (case-insensitive) that will decide the default action carried out by the button when it's pressed:

  • button: there's no default action associated to the control. The behavior of this type of buttons is usually provided by a script.
  • reset: the controls of the associated form are reset to their initial values.
  • submit: the associated form is submitted. This is the deafult value.
  • menu: the context menu associated to this button is deployed.

When this attribute isn't present, the button behaves as a "submit" button.

Example

<button type="button">Press me</button>

value

A value for the control. This value will be sent by the browser to the processing agent, paired with the content of the name attribute. Both attributes together will conform a name-value pair that will be used to process the form data.

The name-value pair of a button is submitted, with the other form data, only if the button has been used to submit the form.

Example

<form action="../../form-result.php">
  <p>
    Postal code: <input type="text" name="postcode">
    <button type="button" name="coolsubmitbutton" value="pressed" onclick="submitForm()">Submit</button>
  </p>
</form>

Postal code:

Global attributes

For information about global attributes refer to this list of global attributes in HTML5.

Events

Global events

For information about global events refer to this list of global events in HTML5.