HTML <select> Tag
The HTML <select> tag creates a drop-down list of <option> choices. Learn its attributes, labelling, multiple, size, required and placeholder patterns.
The HTML <select> tag creates a drop-down list of options. The user clicks the control, the list expands, and they pick one value (or several, with the multiple attribute). It is one of the core form controls, used for everything from country pickers to sort-order menus.
This page covers the syntax, every attribute, accessibility (labelling), the multiple / size / required behaviors, the disabled-placeholder pattern, and how <select> differs from a <datalist>-backed input.
The <option> tag defines each choice and lives inside the <select>. By default the first option is preselected; add the selected attribute to an option to change which one is preselected. Use <optgroup> to group related options under a bold, non-selectable heading.
To submit the chosen value, give the <select> a name and place it inside a <form> (or associate it with one using the form attribute). The value sent to the server is the value of the selected option.
If you need to send the data to the server or read the list from a script, the <select> should have a name and be associated with a <form>.
Always label your <select>
A <select> on its own gives the user no text describing what they are choosing, and screen readers announce nothing meaningful. Always pair it with a <label>: set an id on the <select> and point the label's for attribute at that id. This also lets the user click the label text to focus the control.
Example of a labelled <select>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<label for="topic">Choose a topic:</label>
<select id="topic" name="topic">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
</select>
</body>
</html>When a visible label is not possible, fall back to aria-label="..." on the <select> so assistive technology still announces its purpose.
Syntax
The <select> tag comes in pairs. The content is written between the opening (<select>) and closing (</select>) tags.
Example of the HTML <select> tag:
Example of HTML <select> tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<select>
<option value="books">Books</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="php">PHP</option>
<option value="js">JavaScript</option>
</select>
</form>
</body>
</html>Example of the HTML <select> tag with the <optgroup> tag:
Example of HTML <select> tag with <optgroup> tag
<!DOCTYPE html>
<html>
<head>
<title>Window title of the page</title>
</head>
<body>
<select aria-label="Books and Snippets">
<optgroup label="Books">
<option value="html">HTML</option>
<option value="css">CSS</option>
</optgroup>
<optgroup label="Snippets">
<option value="git">Git</option>
<option value="java">Java</option>
</optgroup>
</select>
</body>
</html>In this example, the <optgroup> tag is used to collect the options into groups.
Selecting multiple options
Add the boolean multiple attribute to let the user choose more than one option. The control then renders as a scrollable list box instead of a drop-down. Pair it with size to set how many rows are visible. To select several values, the user holds Ctrl (Cmd on Mac) while clicking, or holds Shift to select a range.
Example of multiple and size
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<label for="langs">Languages you know:</label>
<select id="langs" name="langs" multiple size="4">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
<option value="php">PHP</option>
<option value="sql">SQL</option>
</select>
</body>
</html>When a multiple select is submitted, every selected value is sent under the same name (e.g. langs=html&langs=js).
Adding a placeholder
A <select> always has a value, so there is no native placeholder. The common workaround is a first option that is empty, preselected, disabled, and hidden — it shows a prompt, cannot be re-chosen, and stays hidden once the list opens. Combine it with required so an actual choice must be made before the form submits.
Example of a placeholder option
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<label for="size">Choose a size:</label>
<select id="size" name="size" required>
<option value="" disabled selected hidden>Choose one</option>
<option value="s">Small</option>
<option value="m">Medium</option>
<option value="l">Large</option>
</select>
<button type="submit">Submit</button>
</form>
</body>
</html>Because the placeholder's value is empty, the required attribute treats it as "nothing selected": submitting without picking a real option triggers the browser's validation message.
<select> vs. <datalist>
A <select> forces the user to pick from a fixed list. If you instead want a free-text field that suggests values the user can accept or ignore, that is a job for a <datalist> attached to a text <input> via the list attribute — not a <select> feature. It is a separate element with different behavior; use it when typing-with-autocomplete fits better than a strict drop-down.
Attributes
| Attribute | Value | Description |
|---|---|---|
| autofocus | autofocus | Defines that the list should be focused after the page loads. |
| disabled | disabled | Indicates that the list is disabled, the user cannot interact with it. |
| form | form_id | Associates the <select> with a <form> by that form's id, so the control can live outside the <form> element in the markup and still be submitted with it. |
| multiple | multiple | Indicates that more than one option can be chosen. The method of choosing more than one option depends on the operating system. In Windows, you need to keep the CTRL button pressed, in Mac the CMD button. |
| name | name | Defines a name for the drop-down menu. It can be used to access the data of the form after it has been sent or to link to a JavaScript element. |
| required | required | Indicates that a choice of an option is required. |
| size | number | Indicates the number of visible options in the drop-down list. If the value of the "size" attribute is bigger than 1 and smaller than the total number of the options in the list, the browser will automatically add a scroll to indicate that there are more options to view. |
The <select> tag supports Global attributes and the Event Attributes.
How to style an HTML <select> tag
The <select> element is rendered partly by the operating system, so it resists full CSS styling and results vary between browsers. You can reliably set the font, colors, padding, and box model on the control itself. To replace the native drop-down arrow with your own, reset the system look with appearance: none and add a custom arrow (for example a background-image or a wrapper with a pseudo-element). The expanded option list and per-option styling remain only loosely controllable; for pixel-perfect, fully custom drop-downs, developers usually build a widget from non-<select> elements with JavaScript.