Skip to content
Related Articles

Related Articles

Improve Article

How to specify multiple forms the select field belongs to in HTML ?

  • Last Updated : 22 Apr, 2021
Geek Week

The task is to specify multiple forms the select field belongs to. In simple wording, we have to find out which form the specific select belongs to. You can achieve this task by using the form attribute.

  • select element – It is used to create a drop-down list in HTML.
  • form element – It is used to create a form for user input.
  • form attribute – This attribute will tell the user which forms select element it belongs to.

Approach – 

  • First, create the HTML page with the select element inside the form element.
  • Create a select element outside the form and specify which form it belongs to with the help of the form attribute.

Example 1 –

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
        body {
            text-align: center;
            font-size: 20px;
            background-color: lightgreen;
        }
  
        button {
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 5px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
        }
    </style>
</head>
  
<body>
    <h1 style="color:green">
        GeeksForGeeks
    </h1>
  
    <p>
        The form attribute specifies which 
        form the drop-down list belongs to:
    </p>
  
    <form id="carform">
        <label for="fname">First Name:</label>
        <input type="text" id="fname" name="fname">
        <button>Submit</button>
    </form>
    <br>
  
    <label for="cars">Choose a car:</label>
    <select id="cars" name="carlist" form="carform">
        <option value="volvo">Volvo</option>
        <option value="maruti">Maruti</option>
        <option value="Rolls-Royce">Rolls-Royce</option>
        <option value="audi">Audi</option>
    </select>
</body>
  
</html>

Output –



Explanation – In the above example we have created the form without the dropdown menu but after creating the drop-down menu with select element and then we have assigned this to the part of the form with the help of the form attribute.

Example 2 –

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
        body {
            text-align: center;
            font-size: 20px;
        }
  
        button {
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 5px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
        }
    </style>
</head>
  
<body>
    <h1 style="color:green">
        GeeksForGeeks
    </h1>
  
    <p>
        The form attribute specifies which
        form the drop-down list belongs to:
    </p>
  
    <form id="countryName">
        <label for="fname">First Name:</label>
        <input type="text" id="fname" name="fname">
        <button>Submit</button>
    </form>
    <br>
  
    <label for="country">Choose a country:</label>
    <select id="country" name="carlist" form="countryName">
        <option value="India">India</option>
        <option value="US">US</option>
        <option value="Germany">Germany</option>
        <option value="Australia">Australia</option>
    </select>
</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 :