HTML DROPDOWN LISTS


  • An HTML Dropdown List is a control that provides a menu of options.
  • It is a form and an inline element.
  • The <select> element defines an HTML Dropdown List.
  • It should enclose multiple <option> elements with the value attribute for each.

HTML Dropdown Attribute

multiple specifies whether multiple options can be selected from a dropdown list; this attribute does not require a value, it only needs to be present at the start tag

Syntax:

<! DOCTYPE html> 

<html> 

        <head>

            <title> Drop down </title>

        </head>

        <body>

            <select id="sample">

                    <option value="Apples"> Apples </option>

                    <option value="Oranges"> Oranges </option> 

                    <option value="Grapes"> Grapes </option>

                    <option value="Bananas"> Bananas </option>

                    <option value="Strawberries"> Strawberries </option>

            </select> 

        <body>

<html>

HTML Group Dropdown Attribute

Syntax:

<! DOCTYPE html> 

<html> 

        <head>

            <title> Drop down </title>

        </head>

        <body>

            <select id="sample">

                 <optgroup label="Fruits">

                    <option value="Apples"> Apples </option>

                    <option value="Oranges"> Oranges </option> 

                    <option value="Grapes"> Grapes </option>

                    <option value="Bananas"> Bananas </option>

                    <option value="Strawberries"> Strawberries </option>

                </optgroup>

               <optgroup label="Bikes">

                    <option value="1"> Yamaha </option>

                    <option value="2"> Bajaj </option> 

                    <option value="3"> Hero </option>

                    <option value="4"> Honda </option>

                    <option value="5"> TVS </option>

                </optgroup>

            </select> 

        <body>

<html>

HTML Multi-select Dropdown Attribute

Syntax:

<! DOCTYPE html> 

<html> 

        <head>

            <title> Drop down </title>

        </head>

        <body>

            <select id="sample" Multiple>

                    <option value="Apples"> Apples </option>

                    <option value="Oranges"> Oranges </option> 

                    <option value="Grapes"> Grapes </option>

                    <option value="Bananas"> Bananas </option>

                    <option value="Strawberries"> Strawberries </option>

            </select> 

        <body>

<html>