HTML button Tag form Attribute Tutorial

In this section, we will learn what form attribute is and how it works.

What is form Attribute in HTML <button> Tag?

The form attribute is used to link a <form> element to the target <button> element.

Basically, in order to link an HTML <button> element to a form in order to use that button to submit the data of that form to the server, we have two choices:

  1. We can wrap the target <button> element in the body of the target <form> element.
  2. Or we can use the form attribute to link the target <button> element to the related form.

For the second method, the target <form> element needs to have an id attribute and the value of this attribute becomes the value of the form attribute of the <button> element. Using this method, there’s no need for the <button> element to be in the body of the <form> element anymore.

Note: make sure you set the `type` attribute of the target <button> element to “submit” as well. Otherwise, the button might not run as expected.

HTML form Attribute in <button> Tag Syntax:

<button form="form-id" type= "submit"> </button>

<button> Tag form Attribute Values

The value we set for the form attribute is the id value of the target <form> element.

Example: using form attribute in HTML <button> tag

See the Pen using form attribute in HTML <button> tag by Omid Dehghan (@odchan1) on CodePen.

Leave a Reply