Open In App

How to specify one or more forms the label belongs to ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn how to specify one or more forms that a label belongs to. This can be used in situations when the label is defined outside the form element and needs to be linked back to the form.

Approach: We will use the form attribute of the label to specify one or more forms that the label belongs. This attribute accepts the id of the form that the label will belong. The below examples demonstrate this approach.

Example 1: In this example, we have created input and label elements outside the form element and used the form attribute to define how the label belongs to the form.

HTML




<html>
  <body>
    <style>
      body {
        text-align: center;
        background-color: lightgreen;
        font-size: 20px;
      }
  
      .btn {
        background-color: #4caf50;
        color: white;
        padding: 15px 32px;
      }
    </style>
  
    <h1 style="color: green">GeeksForGeeks</h1>
    <h2>
      How to specify one or more forms 
      the label belongs to?
    </h2>
  
    <form id="form1">
      <label for="fname">First Name:</label>
      <input type="text" id="fname" name="fname" />
      <br /><br />
      <button class="btn" type="submit">
        Submit
      </button>
    </form>
    <br />
    <p>
      The "Last Name" label is not in the 
      <form> element but it is defined
      as a part of form element.
    </p>
  
    <!-- Specify the name of the above form 
         that is label will belong -->
    <label for="lname" form="form1"
      Last Name: 
    </label>
    <input type="text" id="lname" 
           name="lname" form="form1" />
  </body>
</html>


Output:

Example 2: In this example, we have two forms. The Last Name is a part of the first element and the City is a part of the second form. We use the form attribute to define where both the labels belong.

HTML




<html>
  <body>
    <style>
      body {
        text-align: center;
        background-color: lightgreen;
        font-size: 16px;
      }
  
      .btn {
        background-color: #4caf50;
        color: white;
        padding: 12px 24px;
      }
    </style>
  
    <h1 style="color: green">GeeksForGeeks</h1>
    <h2>
       How to specify one or more forms
       the label belongs to?
    </h2>
  
    <h3>First Form</h3>
    <form id="form1">
      <label for="fname"> First Name: </label>
      <input type="text" id="fname" name="fname" />
      <br /><br />
      <button class="btn" type="submit">Submit</button>
    </form>
    <h3>Second Form</h3>
    <form id="form2">
      <label for="state">State:</label>
      <input type="text" id="state" name="state" />
      <br /><br />
      <button class="btn" type="submit">Submit</button>
    </form>
    <p>
      The "Last Name" label is not in the <form>
      element but it is defined
      as a part of first form.
    </p>
  
    <!-- Specify the name of the above form 
         that is label will belong -->
    <label for="lname" form="form1"> Last Name: </label>
    <input type="text" id="lname" name="lname" form="form1" />
  
    <p>
      The "City" label is not in the <form
      element but it is defined as a
      part of second form.
    </p>
  
    <!-- Specify the name of the above form 
         that is label will belong -->
    <label for="city" form="form2">City:</label>
    <input type="text" id="city" name="city" form="form2" />
  </body>
</html>


Output:



Last Updated : 23 Apr, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads