Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Create a selectable list in HTML
The <select> tag is used to create a drop-down list in HTML. A selectable list allows users to choose one or more options from a predefined set of values. By adding the multiple attribute to the <select> element, users can select multiple options by holding the Ctrl key (Windows) or Cmd key (Mac) while clicking.
Syntax
Following is the basic syntax for creating a selectable list −
<select name="listName"> <option value="value1">Option Text 1</option> <option value="value2">Option Text 2</option> </select>
To create a multiple selection list, add the multiple attribute −
<select name="listName" multiple> <option value="value1">Option Text 1</option> <option value="value2">Option Text 2</option> </select>
Select and Option Attributes
The HTML <select> and <option> elements support the following attributes −
| Attribute | Value | Description |
|---|---|---|
| disabled | disabled | Disables the option or entire select element. Disabled options cannot be selected. |
| label | text | Defines a shorter label for the option when using <optgroup>. |
| selected | selected | Specifies that an option should be pre-selected when the page loads. |
| value | text | Specifies the value sent to the server when the option is selected. |
| multiple | multiple | Allows multiple options to be selected simultaneously. |
| name | name | Defines the name of the select element for form submission. |
| required | required | Requires the user to select a value before submitting the form. |
| size | number | Defines the number of visible options in the list (creates a scrollable list box). |
| autofocus | autofocus | Automatically focuses on the select element when the page loads. |
Basic Select List
A basic select list creates a dropdown menu where users can choose one option −
Example
<!DOCTYPE html>
<html>
<head>
<title>Basic Select List</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Choose a Programming Course</h2>
<form action="/submit" method="post">
<label for="course">Select Course:</label>
<select name="course" id="course">
<option value="html">HTML5</option>
<option value="css">CSS3</option>
<option value="js" selected>JavaScript</option>
<option value="python">Python</option>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
The output shows a dropdown list with "JavaScript" pre-selected −
Choose a Programming Course Select Course: [JavaScript ?] [Submit]
Multiple Selection List
Using the multiple attribute creates a list box where users can select multiple options −
Example
<!DOCTYPE html>
<html>
<head>
<title>Multiple Selection List</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Select Your Skills</h2>
<form action="/submit" method="post">
<label for="skills">Choose multiple skills (Hold Ctrl/Cmd to select):</label><br>
<select name="skills" id="skills" multiple size="5">
<option value="html">HTML5</option>
<option value="css" selected>CSS3</option>
<option value="js" selected>JavaScript</option>
<option value="react">React</option>
<option value="node">Node.js</option>
</select>
<br><br>
<input type="submit" value="Submit Skills">
</form>
</body>
</html>
The output displays a list box with multiple visible options where users can select more than one item −
Select Your Skills Choose multiple skills (Hold Ctrl/Cmd to select): ??????????????? ? HTML5 ? ? CSS3 ? ? selected ? JavaScript ? ? selected ? React ? ? Node.js ? ??????????????? [Submit Skills]
Grouped Options with Optgroup
The <optgroup> tag groups related options under category headings −
Example
<!DOCTYPE html>
<html>
<head>
<title>Grouped Select Options</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Choose Your Grade and Section</h2>
<form action="/submit" method="post">
<label for="class">Select Class:</label>
<select name="class" id="class">
<optgroup label="Grade 9">
<option value="9A">Section A</option>
<option value="9B">Section B</option>
<option value="9C">Section C</option>
</optgroup>
<optgroup label="Grade 10">
<option value="10A">Section A</option>
<option value="10B">Section B</option>
<option value="10C">Section C</option>
</optgroup>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
The grouped options appear with category headers, making the list more organized −
Choose Your Grade and Section
Select Class: [Grade 9 ?]
Grade 9
Section A
Section B
Section C
Grade 10
Section A
Section B
Section C
[Submit]
Advanced Select Features
The following example demonstrates additional select attributes like required, autofocus, and disabled options −
Example
<!DOCTYPE html>
<html>
<head>
<title>Advanced Select Features</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Advanced Select Example</h2>
<form action="/submit" method="post">
<label for="cities">Choose Your City (Required):</label>
<select name="cities" id="cities" required autofocus>
<option value="">-- Please select a city --</option>
<option value="nyc">New York</option>
<option value="la">Los Angeles</option>
<option value="chicago">Chicago</option>
<option value="houston" disabled>Houston (Not Available)</option>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
This example shows a required field with autofocus and a disabled option. The form will not submit unless a city is selected −
Advanced Select Example Choose Your City (Required): [-- Please select a city -- ?] ? focused [Submit]
3K+ Views
