HTML <select> Tag

What You’ll Learn

The <select> tag creates dropdown menus in HTML forms. This guide covers syntax, option elements, attributes, labels, multiple selection, accessibility, and best practices for beginners.

What Is the <select> Tag?

The <select> tag is an HTML form element that allows users to choose one or more options from a predefined list. It is commonly used to create dropdown menus, providing a user-friendly way to select values in forms.

Each option represents one choice. The value attribute is sent when the form is submitted; the text between the tags is what users see.

📝 Syntax

Wrap option elements inside a select element:

<select>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <!-- Add more options as needed -->
</select>

Labeled Dropdown Syntax

<label for="country">Country:</label>
<select id="country" name="country">
  <option value="us">United States</option>
  <option value="uk">United Kingdom</option>
</select>

Syntax Rules

• Always set a meaningful value on each option for form submission.
• Use name on select so the chosen value is included in form data.
• Associate a label with for matching the select’s id.
• Use selected on an option to pre-select the default choice.

⚖️ <select> vs <datalist>

Examples Gallery

Build dropdown lists and multi-select controls with select and option elements.

<label for="fruit">Choose a fruit:</label>
<select id="fruit" name="fruit">
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="orange">Orange</option>
</select>

<label for="colors">Choose colors:</label>
<select id="colors" name="colors" multiple size="4">
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

♿ Accessibility

• Always use a label — Connect label for to the select’s id so screen readers announce the field purpose.
• Meaningful option text — Write clear, concise labels users can understand at a glance.
• Group related options — Use optgroup with a label attribute for long categorized lists.
• Do not rely on color alone — Disabled options should also be marked with disabled, not just styled differently.

💡 Best Practices