Syntax
<select name="choice">
<option value="1">Option One</option>
<option value="2">Option Two</option>
</select>Examples
Basic Dropdown
A simple select with a few options.
<label for="country">Country:</label>
<select id="country" name="country">
<option value="uk">United Kingdom</option>
<option value="us">United States</option>
<option value="ca">Canada</option>
</select>Select with Default and Disabled Option
Showing a placeholder option that cannot be selected as a real value.
<select name="role" required>
<option value="" disabled selected>Choose a role...</option>
<option value="student">Student</option>
<option value="developer">Developer</option>
</select>Grouped Options
Organizing options into labeled groups with optgroup.
<select name="language">
<optgroup label="Frontend">
<option value="js">JavaScript</option>
<option value="ts">TypeScript</option>
</optgroup>
<optgroup label="Backend">
<option value="php">PHP</option>
<option value="python">Python</option>
</optgroup>
</select>Attributes
- name (string): Identifies the field in submitted form data
- multiple (boolean): Allows selecting more than one option
- required (boolean): Requires a non-empty selection before submission
- disabled (boolean): Disables the entire dropdown
Best practices
- Use a disabled, selected placeholder option instead of leaving the first real option selected by default
- Pair with a <label> for accessibility, same as any other form control
- Use optgroup to organize long lists of options into logical categories
- For a handful of mutually exclusive options, consider whether radio buttons might actually be clearer than a dropdown
At a glance
- Purpose
- Structure and meaning for web content
- File extension
- .html · .htm
- Runs in
- Web browsers
- Usually used with
- CSS and JavaScript
Specifications & further reading
Related HTML documentation
<button>
The <button> element creates a clickable button that can trigger actions like submitting a form, resetting a form, or running custom JavaScript. Unlike <input type="button">, <button> can contain other HTML content such as icons or styled text, not just plain text. Its type attribute determines its default behavior within a form.<input>
The <input> element creates interactive form controls for collecting user data. Its behavior changes dramatically based on the type attribute — a single element can become a text field, checkbox, radio button, date picker, file uploader, and more. It is a void (self-closing) element with no closing tag or child content.<label>
The <label> element defines a caption for a form control, improving both usability and accessibility. Clicking a label activates or focuses its associated input — useful for small targets like checkboxes and radio buttons. Labels can be associated with an input either by wrapping it, or by using a for attribute that matches the input's id.<textarea>
The <textarea> element creates a multi-line plain-text input control, ideal for comments, messages, and any content longer than a single line. Unlike <input>, its default value is placed between the opening and closing tags rather than in a value attribute, and users can typically resize it by dragging its corner.
The <button> element creates a clickable button that can trigger actions like submitting a form, resetting a form, or running custom JavaScript. Unlike <input type="button">, <button> can contain other HTML content such as icons or styled text, not just plain text. Its type attribute determines its default behavior within a form.<input>
The <input> element creates interactive form controls for collecting user data. Its behavior changes dramatically based on the type attribute — a single element can become a text field, checkbox, radio button, date picker, file uploader, and more. It is a void (self-closing) element with no closing tag or child content.<label>
The <label> element defines a caption for a form control, improving both usability and accessibility. Clicking a label activates or focuses its associated input — useful for small targets like checkboxes and radio buttons. Labels can be associated with an input either by wrapping it, or by using a for attribute that matches the input's id.<textarea>
The <textarea> element creates a multi-line plain-text input control, ideal for comments, messages, and any content longer than a single line. Unlike <input>, its default value is placed between the opening and closing tags rather than in a value attribute, and users can typically resize it by dragging its corner.