Create a selectable list in HTML

HTML Web Development Front End Technology

The <select> tag is used to create a drop-down list in HTML document. We just need to add the “multiple” attribute to the <select> element. Now, in order to select multiple options, we use following syntax −

<select name=” “>	
   <option value=” “ > text </option>
</select>

The HTML <option> tag also supports the following additional attributes −

Attribute	Value	Description
Disabled	disabled	Disables the input control. The button won't accept changes from the user. It also cannot receive focus and will be skipped when tabbing.
Label	text	Defines a label to use when using <optgroup>.
Selected	selected	Defines the default option to be selected when page loads.
Value	text	Specifies the value of the option to be sent to the server
Multiple	multiple	By using multiple attribute options can be selected at once.
Name	name	It is used to define names in drop-down list
Required	required	By using this attribute , user select a value before submitting the form
Size	number	This attribute is used to define , number of visible options in drop-down list
Autofocus	Autofocus	It is used to get focus of drop-down list automatically when page loads.

Example

Following is a sample example of using <select> tag in HTML -

<!DOCTYPE html>
<html>
<head>
   <title>HTML select Tag</title>
</head>
<body>
   <h1>TutorialsPoint</h1>
   <h2>selectable list in HTML</h2>
   <form action="/cgi-bin/dropdown.cgi" method="post">
      <select name="dropdown">
         <option value="Data Structures" selected>Data Structures</option>
         <option value="Data Mining">Data Mining</option>
      </select>
      <br>
      <br>
      <input type="submit" value="Submit" />
   </form>
</body>
</html>

Example

In the following example we are trying to create a selectable list in HTML using the <optgroup> tag –

<!DOCTYPE html>
<html>
<body>
   <h1>Inserting optgroup in select element</h1>
   <p>It is used to group related options in a drop-down list:</p>
   <form action="/action_page.php">
      <label for="class">Choose Grade:</label>
      <select name="class" id="class">
         <optgroup label="Grade 1">
            <option value="A">A Section</option>
            <option value="B">B Section</option>
            <option value="C">C Section</option>
         </optgroup>
         <optgroup label="Grade 2">
            <option value="A">A Section</option>
            <option value="B">B Section</option>
            <option value="C">C Section</option>
         </optgroup>
      </select>
      <br>
      <br>
      <input type="submit" value="Submit">
   </form>
</body>
</html>

Example

Consider another example −

<!DOCTYPE html>
<html>
<body>
   <h1>Drop-Down List using Select Command</h1>
   <p>The select element is used to create a drop-down list.</p>
   <form method="get" action="#">
      <label for="cities"> Choose City:</label>
      <select name="cities" id="cities">
         <option value="hyd">Hyderabad</option>
         <option value="Chennai">Chennai</option>
         <option value="bang">Banglore</option>
         <option value="Mumbai">Mumbai</option>
      </select>
      <br>
      <br>
      <input type="submit" value="Choose city">
   </form>
</body>
</html>

Bhanu Priya

Updated on: 10-Oct-2023

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started