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

Last Updated : 05 Jun, 2023

In HTML, the <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. The 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 the text “Click Here” can be created as :

Syntax:

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

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

The form attribute of the <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: In this example, we will see the use of form_id.

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: In this example, we will create a form and use its id in submit button.

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>