<button>

Published Jul 1, 2022Updated Apr 4, 2023

The <button> element represents a button meant to be clicked by the user.

While buttons are often associated with form submission, they can be used for any part of the page which needs an interface for user interaction.

Syntax

<button>
  <!-- Button content lives here -->
</button>

Opening and closing <button> tags wrap around a block of content. By default, it appears inline, like a <span> element, and is styled to appear consistent with buttons on the device it is viewed on.

It is possible for the content to be plain text or other HTML elements. This can include lists, paragraphs, or even images.

Attributes

There are a large number of available attributes that provide extra meaning to the browser. A few of the common ones are shown below:

Attribute	Data Type	Description
`autofocus`	Boolean	Automatically makes the button focused on the page.
`disabled`	Boolean	Makes the button unusable.
`type`	String	Sets the intended behavior of the button, including: `submit`: This button should submit the form it is a part of. `reset`: This button should reset the values in the form it is a part of. `button`: This button should neither submit nor reset the form it is a part of.

Example

Suppose there is a form that needs both a submit and reset button, and that the submit button should have an image rather than text. It might be coded in the following way:

<html>
  <head> </head>
  <body>
    <form>
      <label>Your Name</label>
      <input type="text" name="user_name" />
      <!-- More form elements -->
      <button type="reset">Reset Form</button>
      <button type="submit"><img src="submit.png" alt="Submit Form" /></button>
    </form>
  </body>
</html>