In this section, we will learn what HTML <button> element is and how it works.

What is <button> Tag in HTML?

HTML <button> element is used to represent a button in a document. This button could be used for different purposes.

For example, the button could be linked in a form and be used for sending the form data to a server! Or within that form, the button could be used to reset the form data altogether.

But a button is not limited to just a form, and it could be used independently as well. For example, a button can be used to hide or unhide a list or part of a document, etc.

HTML <button> Tag Syntax:

<button> </button>

HTML <button> Tag Values

The value we set within the body of HTML <button> element will appear on top of button element as its content (the text content that you see on top of buttons is basically the value we set within the opening and closing tag of the HTML <button> element).

You have the freedom to set any type of content as the value for the <button> element. For example, you can set an image or even a table as the content of the <button> element. At the end, these contents will be rendered on top of button element in the document.

Example: HTML code for a button

See the Pen HTML code for a button by Omid Dehghan (@odchan1) on CodePen.

Here we’ve created a button that does nothing! But notice how we could use another HTML element <br> as part of the content of this button.

Example: button creation in HTML

See the Pen button creation in HTML by Omid Dehghan (@odchan1) on CodePen.

As you can see, we’ve set a list to be the content of the button in this example. So basically there’s no limit to what we can set for the content of a <button> element in HTML.

Example: linking buttons in HTML

See the Pen linking buttons in HTML by Omid Dehghan (@odchan1) on CodePen.

In order to link a button to a form in HTML, you have two choices!

The first way of linking is to wrap the target button in the form that we want it to be used for (just like the way we did in the example above).

The second way of linking is to set an id for the target <form> element and then use this id value and set it as the value of the form attribute of the target button as the example below shows this.

Example: linking buttons to forms in HTML

See the Pen linking buttons to forms in HTML by Omid Dehghan (@odchan1) on CodePen.

Here, if we click the button, it will send the form data to the target address set for the form (Which is the relative address /signin). Also, notice that we don’t need to wrap the <button> element in the target form anymore.

HTML <button> Element Note:

When using a <button> element as the submit button for a form, you should make sure to set the type of that button to “submit”. Otherwise, the button may not work correctly.

HTML <button> Tag Attributes

Name	Description
autofocus	This attribute specifies that the target button should automatically get the focus when the page is loaded
disabled	This attribute is used to disable the target button.
form	This attribute specifies which form the target button belongs to.
formaction	If the type of target button is “submit”, this attribute specifies where the form data should be sent to. Basically, the value of this attribute is a URL to which the data should be sent.
formenctype	This attribute specifies how form-data should be encoded before being sent to the server. Set this attribute only when the type of the button is “submit”
formmethod	This attribute specifies which HTTP method should be used when sending form-data to a server. (The possible values are GET and POST). Use this attribute only when the type of the button is “submit”.
formnovalidate	This attribute is used to declare that form data should not be validated on submission to a server. Use this attribute only when the type of the button is set to “submit”
formtarget	Usually, after submitting a form to a server, the server response with a result to mention the operation was successful, etc. With this attribute we can declare where this response from the server should be displayed?! (Like in a new browser window or tab or maybe the current document’s window etc.)
name	With this attribute, we can set a name for the target button.
type	With this attribute, we can set the type of button. For example, if the button is used to send a form data to a server, then the type would be “submit”. Or if the purpose of the button is to reset the form data, then the type would be “reset”.
value	This attribute specifies an initial value for the button.