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

22 Apr, 2021
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.
HTML-Attributes
HTML-Questions
HTML-Tags
Picked
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?