Skip to content
Related Articles

Related Articles

Improve Article

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

  • Last Updated : 23 Apr, 2021
Geek Week

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:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :