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 form 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: In this example, we will use the above approach.
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 a select element and then we have assigned this to the part of the form with the help of the form attribute.
Example 2: In this example, we have used a form that specifies the type of dropdown menu.
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: