Skip to content
Related Articles

Related Articles

How to create button which belongs to one or more forms in HTML5 ?
  • Difficulty Level : Medium
  • Last Updated : 07 Apr, 2021

In HTML, <button> tag is used to create a clickable button on your webpage. It also has a closing tag written as </button>. You can add a text or image, whatever you want to display a button, within the <button> tag. Type attribute for a <button> tag should always be specified by you. Every browser has its own default type for the button element.

The button can be created inside or outside the form. It can be styled in different ways using CSS.

For example, to create a button having text “Click Here” can be created as :

Syntax:

<button type="button">Click Here</button>

The <button> tag has many attributes, which gives desired features to the button.



The form attribute of <button> tag is used to create a button that belongs to one or more forms in HTML.

Syntax:

<button form="form_id">

To specify one or more forms to which the button belongs, a form attribute is used. The value of the form attribute should be equal to the id attribute of the form element in the same document.

form_id : It specifies the form element to which the <button> element belongs to. The value of this id should be equal to the id attribute of the form element in the same document.

Example 1:

HTML




<!DOCTYPE html>
<html>
  <head>
    <title>HTML form attribute</title>
  </head>
  <body>
    <h1 style="color: green">Welcome to GFG</h1>
    <!-- To create a form -->
    <form action="/action_page.php" 
          method="get" id="nameform">
  
      <label for="fullname">Enter your name:</label>
  
      <!-- To take input from user in the form -->
      <input type="text" id="fullname" 
             name="fullname" />
      <br /><br />
    </form>
    <!-- Same form id : "nameform" is used -->
    <button type="submit" form="nameform" value="Submit">
      Submit Response
    </button>
  </body>
</html>

Output :

Example 2:

HTML




<!DOCTYPE html>
<html>
  
<body>
  
    <form id="formid" method="POST">
        Username:<br>
        <input type="text" name="username">
        <br> Email id:<br>
        <input type="text" name="email_id">
    </form>
    <button type="submit" 
            value="Submit" 
            form="formid">Submit</button>
</body>
  
</html>

Output:
 

My Personal Notes arrow_drop_up
Recommended Articles
Page :