Open In App
Related Articles

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

Improve Article
Improve
Save Article
Save
Like Article
Like

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:


Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 15 May, 2023
Like Article
Save Article
Similar Reads
Related Tutorials