Python JavaScript HTML CSS C Java C# / .NET C++ TypeScript Dart

How to create drop down list in HTML

In this tutorial, we will explore the process of generating a dropdown menu in HTML. Let's begin by familiarizing ourselves with the dropdown concept.

What is a dropdown element?

A dropdown menu is a user interface element that allows users to choose a single option from a list of available choices.

Dropdown List in HTML

An HTML dropdown menu is designed to present a range of choices for users to pick one or more selections. Typically, dropdown menus are utilized in forms to enable users to choose options like courses, gender, and so on.

Creating a dropdown list in HTML is achieved by using specific HTML tags. The <select> tag is employed in conjunction with the <option> tag.

Syntax of dropdown list used for selecting only one option:

Example

<select>
    <option value="1">Option1</option>
    <option value="2">Option2</option>
    <option value="3">Option3</option>
    <option value="4">Option4</option>
    <option value="5">Option5</option>
    <option value="6">Option6</option>
</select>

The above-given syntax is utilized for making the list from which users can select only one option. The <select> is the opening tag and the </select> is the closing tag. The <option> is the opening tag and the </option> is the closing tag.

Syntax of dropdown list used for selecting multiple options:

Example

<select multiple>
    <option value="1">Option1</option>
    <option value="2">Option2</option>
    <option value="3">Option3</option>
    <option value="4">Option4</option>
    <option value="5">Option5</option>
    <option value="6">Option6</option>
</select>

The above-given syntax is utilized for making the list from which users can select multiple options. The <select> is the opening tag and the </select> is the closing tag. The <option> is the opening tag and the </option> is the closing tag. A boolean attribute called "multiple" is utilized to create a multi-select dropdown list.

Illustrations of the dropdown list in HTML

Let's explore the dropdown menu with the assistance of visual aids.

Illustration-1

In the upcoming example, we will construct a dropdown menu that allows users to choose a single option.

Code:

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dropdown list in HTML</title>
</head>
<body>
    <h2>Illustration of dropdown list in HTML</h2>
    <div>
        <h3>Select your favourite icecream:</h3>
        <select name="icecream" id="ice-cream">
            <option value="icecream1">Milk Chocolate Icecream</option>
            <option value="icecream2">Mango Icecream</option>
            <option value="icecream3">Strawberry Icecream</option>
            <option value="icecream4">Dark Chocolate Icecream</option>
            <option value="icecream5">Oreo Icecream</option>
            <option value="icecream6">Kitkat Icecream</option>
        </select>
    </div>
</body>
</html>

Output:

In the following result displayed, we can distinctly observe the dropdown menu that allows a user to select a singular choice.

Illustration-2

In the illustration below, we will create a dropdown menu that allows users to select multiple options. This will involve implementing a JavaScript function to enable the selection of multiple options.

Code:

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dropdown list in HTML from which a user can opt for multiple options</title>
</head>
<body>
    <h2>Demo of the multi-select dropdown list in HTML</h2>
    <div>
        <h3>Select the books you have read:</h3>
        <select name="books" id="books" multiple>
            <option value="book1">Mahabharata</option>
            <option value="book2">Bhagavad Gita</option>
            <option value="book3">The Diary of a Young Girl</option>
            <option value="book4">War and Peace</option>
            <option value="book5">Train your Brain</option>
            <option value="book6">Rich Dad Poor Dad</option>
            <option value="book7">The Hunger Games</option>
            <option value="book8">Sapiens</option>
            <option value="book9">Cosmos</option>
            <option value="book10">The Power of Habit</option>
        </select>
        <input type="button" onclick="multipleFunc()" value="Select multiple options">
    </div>
<script>
    function multipleFunc() {
        document.getElementById("books").multiple = true;
    }
</script>
</body>
</html>

Output:

Below, you will find a dropdown list that allows users to select multiple options simultaneously.

Illustration-3

In this demonstration, we will create a dropdown menu and utilize CSS to style it.

Code:

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Creating dropdown list utilizing CSS</title>
    <style>
        h3 {
            color: blueviolet;
        }
        select {
            border: 2px dashed blueviolet;
            background-color: rgb(236, 219, 252);
            padding: 2px;
            width: 300px;
            box-shadow: 2px 5px 6px blueviolet;
        }
    </style>
</head>
<body>
    <h2>Demo of the dropdown list and decorating it utilizing CSS</h2>
    <div>
        <h3>Select a movie that you want to watch:</h3>
        <select name="movie" id="movie">
            <option value="movie1">12th Fail</option>
            <option value="movie2">Teri Baaton Mein Aisa Uljha Jiya</option>
            <option value="movie3">Fighter</option>
            <option value="movie4">Merry Christmas</option>
            <option value="movie5">Kho Gaye Hum Kahan</option>
            <option value="movie6">Mast Mein Rehne Ka</option>
            <option value="movie7">The Archies</option>
            <option value="movie8">Animal</option>
            <option value="movie9">Farrey</option>
            <option value="movie10">Dunki</option>
        </select>
    </div>
</body>
</html>

Output:

Displayed below is an embellished dropdown menu, allowing users to choose a single option.

Illustration-4

In this demonstration, we will create a dropdown menu within the Registration Form.

Code:

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Constructing a dropdown list in the registration form</title>
    <style>
        h3 {
            color: maroon;
            font-size: 24px;
            text-align: center;
        }
        form {
            border: 2px solid maroon;
            padding: 15px;
            text-align: center;
        }
        input, select {
            border: 2px solid maroon;
            padding: 5px;
            width: 200px;
            font-size: 15px;
            margin-left: 20px;
        }
        label {
            font-weight: bold;
            color: maroon;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <h1>Demo of a dropdown list in the Registration Form</h1>
    <div>
        <h3>Registration Form</h3>
        <form>
            <label for="first-name">First name:</label>
            <input type="text" value="Type your first name"> <br> <br>
            <label for="second-name">Second name:</label>
            <input type="text" value="Type your second name"> <br> <br>
            <label for="email">Email:</label>
            <input type="email" value="Type your email"> <br> <br>
            <label for="dob">Date of Birth:</label>
            <input type="date"> <br> <br>
            <label for="course">Select your course:</label>
            <select name="course" id="course">
                <option value="btech">B. Tech</option>
                <option value="bca">BCA</option>
                <option value="bba">BBA</option>
                <option value="mtech">M. Tech</option>
                <option value="mca">MCA</option>
                <option value="bca">BCA</option>
            </select>
        </form>
    </div>
</body>
</html>

Output:

In the following result section, you will find a drop-down menu labeled "Choose your course:" within the Registration Form.

Illustration-5

In this example, we will be creating a dropdown menu in the sidebar.

Code:

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        body {
            font-family: 'Times New Roman', Times, serif;
        }

        .sidebar {
            top: 0;
            left: 0;
            width: 250px;
            height: 100%;
            position: fixed;
            background-color: peru;
            padding-top: 18px;
            overflow-x: hidden;
            z-index: 1;
        }

        .sidebar a, .dropdown-button {
            margin-left: 10px;
            padding: 10px;
            font-size: 24px;
            width: 100%;
            color: brown;
            display: block;
            text-decoration: none;
            border: none;
            cursor: pointer;
            background: none;
            text-align: left;
            outline: none;
        }

        .sidebar a:hover, .dropdown-button:hover {
            color: white;
        }

        .dropdown {
            margin-left: 300px;
            font-size: 24px;
        }

        .dropdown-box {
            padding-left: 6px;
            display: none;
            background-color: peru;
        }

        .fa-caret-down {
            float: right;
            padding-right: 6px;
        }

        @media screen and (max-height: 500px) {
        .sidebar {padding-top: 18px;}
        .sidebar a {font-size: 20px;}
        }
</style>
</head>
<body>

<div class="sidebar">
  <a href="#about">About</a>
  <a href="#services">Services</a>
  <a href="#contact">Contact</a>
  <button class="dropdown-button"> More 
    <i class="fa fa-caret-down"></i>
  </button>
  <div class="dropdown-box">
    <a href="#">Page 1</a>
    <a href="#">Page 2</a>
    <a href="#">Page 3</a>
  </div>
</div>

<div class="dropdown">
  <h2>Main Content. . .</h2>
</div>

<script>
var dropdown = document.getElementsByClassName("dropdown-button");
var i;

for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var dropdownContent = this.nextElementSibling;
    if (dropdownContent.style.display === "block") {
      dropdownContent.style.display = "none";
    } else {
      dropdownContent.style.display = "block";
    }
  });
}
</script>

</body>
</html>

Output:

The sidebar features a dropdown list that becomes visible upon clicking.

Illustration-6

In this tutorial, we will create a dropdown menu within the navigation bar.

Code:

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
    body {
        font-family:'Courier New', Courier, monospace;
    }

    .navbar {
        background-color: darkgoldenrod;
        overflow: hidden;
    }

    .navbar a {
        padding: 16px 18px;
        float: left;
        color: snow;
        font-size: 15px;
        text-decoration: none;
        text-align: center;
    }

    .dropdown {
        float: left;
        overflow: hidden;
    }

    .dropdown .dropdown-button {
        border: none;
        outline: none;
        color: white;
        font-size: 15px;
        padding: 16px 18px;
        background-color: darkgoldenrod;
        font-family: 'Courier New', Courier, monospace;
        margin: 0;
    }

    .navbar a:hover, .dropdown:hover .dropbutton {
        background-color: brown;
    }

    .dropdown-box {
        display: none;
        position: absolute;
        background-color: darkgoldenrod;
        min-width: 160px;
        box-shadow: 10px rgba(64, 61, 61, 0.2);
        z-index: 1;
    }

    .dropdown-box a {
        float: none;
        text-decoration: none;
        text-align: left;
        color: snow;
        padding: 12px 16px;
        display: block;
    }

    .dropdown-box a:hover {
        background-color: brown;
    }

    .dropdown:hover .dropdown-box {
        display: block;
    }
</style>
</head>
<body style="background-color:white;">

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="dropdown">
    <button class="dropdown-button"> More 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-box">
      <a href="#">Page 1</a>
      <a href="#">Page 2</a>
      <a href="#">Page 3</a>
    </div>
  </div> 
</div> <br> <br> <br> <br> <br> <br> <br>

<h3>Dropdown List in the Navigation Bar</h3>
<p>Click on the "More" BUTTON to see the dropdown options in the list.</p>
</body>
</html>

Output:

Below is the generated outcome featuring the dropdown menu within the navigation bar that expands upon clicking.

Browsers Support

Following are the browsers that support the <select> tag and <option> tag:

  • ✅ Microsoft Edge
  • ✅ Safari
  • ✅ Google Chrome
  • ✅ Opera
  • ✅ Firefox

    • Conclusion:

The process of generating a dropdown menu in HTML has been explained. A dropdown menu is employed to pick either one or multiple choices from a list. There are two methods to create dropdown menus: one allows selecting only a single option, while the other enables choosing multiple values. This guide covers the creation of both types of dropdown menus using visual aids.

Input Required

This code uses input(). Please provide values below: