<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.
<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.
There are a large number of available attributes that provide extra meaning to the browser. A few of the common ones are shown below:
||Boolean||Automatically makes the button focused on the page.|
||Boolean||Makes the button unusable.|
||String||Sets the intended behavior of the button, including:
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>
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.