How to create a button which belongs to one or more forms in HTML5?

HTML5 Front End Technology Web Development

The form attribute of the HTML <button> tag allows us to create buttons of this type that are applicable to multiple forms. The button's id can be specified using this attribute, which is helpful for initiating form submission or carrying out other form-related operations.

Using a single button that is part of multiple forms prevents us from having to repeat the same button in each form. We can handle the data from each form's associated button at once by associating a button with multiple forms. Processing the data is made simpler as a result. The user experience can be enhanced by a button that is a part of several forms because it offers a centralised location for the submission of forms that are related.

Approach - 1

In this example, we will create a submit button that belongs to a single form.

Algorithm

Create an HTML5 form using the <form> tag.
Add some CSS styling for the submit button.
Create a form using the <form> tag with the attributes "action" and "method".
Add an ID attribute to the form element with a value of "newnameform".
Create a label element with a "for" attribute and set its value to "newusername".
Inside the label, add text prompting the user to enter their new username.
Create an input element with a "type" attribute set to "text", an "id" attribute set to "newusername", and a "name" attribute set to "newusername".
Create a button element with a "type" attribute set to "submit", a "form" attribute set to the ID of the form ("newnameform"), and a "value" attribute set to "Submit".
Inside the button, add text prompting the user to submit their data.

Example

<!DOCTYPE html>
<html>
<head>
   <title>HTML5-form attribute</title>
   <style>
      /* Style the submit button */
      button[type="submit"] {
         font-size: 24px;
         padding: 16px 32px;
         background-color: #4CAF50;
         color: white;
         border: none;
         border-radius: 8px;
       }
   </style>
</head>
<body>
   <h1 style="color: red; font-size: 40px">Welcome back to tutorials Point</h1>
   <!-- To create a form -->
   <form action="/process_page.php" method="get" id="newnameform">
      <h3 label for="newusername">Enter your new username:</h3>
  
      <!-- get input from user in the form -->
      <input type="text" id="newusername" name="newusername" />
      <br /><br />
   </form>
   <!-- Same form id : "newnameform" is used -->
   <button type="submit" form="newnameform" value="Submit">
      Submit data
   </button>
</body>
</html>

Approach - 2

The following example demonstrates creating a single button that submits more than a single form

Algorithm

Set a title.
Add three different forms, each with a unique ID attribute within the body section.
Every form should include a label with a "for" attribute and an input field with a unique "id" attribute and a "name" attribute.
For the first form, the input field should have a "type" attribute with the value "text". Then for the next form, the input field should have a "type" attribute with the value "email". Thirdly the input field should have a "type" attribute with the value "tel".
With an "id" attribute of "btn1" and a text value of "Submit" Create a button element
Add a "form" attribute to the button element with a value that lists all three form IDs ("form1 form2 form3") so that clicking the button submits all three forms simultaneously.

Example

<!DOCTYPE html>
<html>
<head>
   <title>Button Belonging to Forms</title>
</head>
<body>
   <!-- Form for submitting name -->
   <form id="form1">
      <label for="name">Name:</label>
      <input type="text" id="name" name="name"><br><br>
   </form>
   <!-- Form for submitting email -->
   <form id="form2">
      <label for="email">Email:</label>
      <input type="email" id="email" name="email"><br><br>
   </form>
   <!-- Form for submitting phone number -->
   <form id="form3">
      <label for="phone">Phone:</label>
      <input type="tel" id="phone" name="phone"><br><br>
   </form>
   <!-- Button for submitting all the forms -->
   <button id="btn1" form="form1 form2 form3">Submit</button>
</body>
</html>

Conclusion

We can use these types of buttons in contact forms in websites. This allows visitors to easily send a message or request information from the website's owner. In e-commerce websites, we will use forms which include fields for the user's billing and shipping information, as well as their payment method, and a single "submit" button to complete the purchase. Login forms, Search forms and registration forms found on many websites often uses a single button to collect multiple forms.