HTML5: How to specify one or more forms the button belongs to?

Last update on February 06 2024 11:32:00 (UTC/GMT +8 hours)

Solution :

HTML Code :

<!DOCTYPE html><!-- HTML5 document type declaration -->
<html><!-- Start of HTML document -->
<head><!-- Start of head section -->
<meta charset="utf-8"><!-- Declares document character encoding -->
<title>How to specify one or more forms the button belongs to</title><!-- Sets the title of the webpage -->
</head><!-- End of head section -->
<body><!-- Start of body section -->
<form method="POST" 
action="https://www.w3resource.com/html-css-exercise/basic/solution/button-form-answer-demo.php" id="form1"><!-- Start of form element with method, action, and id attributes -->
  First   name  : <input type="text" name="fname"><br><!-- Input field for entering first name -->
  Last    name : <input type="text" name="lname"><br><!-- Input field for entering last name -->
  Present Address : <input type="text" name="add"><br><!-- Input field for entering present address -->
  E-mail  : <input type="text" name="mail"><br><!-- Input field for entering email -->
</form><!-- End of form element -->
<button type="submit" form="form1" value="Submit">Submit</button><!-- Button element with type "submit" and form attribute specifying the form with id "form1" that the button belongs to -->
</body><!-- End of body section -->
</html><!-- End of HTML document -->

Explanation:

This HTML document starts with a doctype declaration indicating it's an HTML5 document.
Inside the <html> tags, the document structure begins.
The <head> section contains metadata about the document, such as character encoding and the title.
The <body> section is where the visible content of the webpage resides.
Within the body section, there's a <form> element created with the method attribute set to "POST", the action attribute set to the URL where the form data will be submitted, and the id attribute set to "form1".
Inside the form, there are several input fields for entering first name, last name, present address, and email.
The <button> element is used to create a submit button labeled "Submit".
The type attribute of the button is set to "submit", indicating it's a submit button.
The form attribute of the button is set to "form1", specifying that the button belongs to the form with id "form1".
The value attribute of the button is set to "Submit".
The HTML document ends with the closing </html> tag.

Live Demo:

See the Pen button-from-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page