option

Understand how the <option> element controls both what users see in a dropdown and what data is sent to the server.

What it is

The <option> element defines an item within a <select>, <datalist>, or <optgroup>. It represents a single choice in a form. The critical concept is the separation between the displayed text (what the user reads) and the submitted value (what the browser sends).

If no value attribute is present, the submitted value defaults to the displayed text. If a value attribute is present, that specific string is submitted instead of the visible text.

Why it matters

• Data Integrity: Allows you to send clean IDs (e.g., "101") while showing friendly names (e.g., "New York").
• Localization: You can display translated text to users while submitting standard English codes or database keys.
• Backend Logic: Servers often expect specific enum values or foreign keys rather than arbitrary user-facing strings.
• Accessibility: Clear labels help screen readers announce options correctly, distinct from the underlying data.

Syntax or steps

An option requires opening and closing tags. Inside, you place the visible text. To control submission, add the value attribute.

1. Create a <select> container with a name attribute.
2. Add <option> elements inside.
3. Set the value attribute for each option if it differs from the text.
4. Use the selected boolean attribute to pre-select an option.

Example

<form action="/submit" method="post">
  <label for="city">Choose your city:</label>
  <select id="city" name="city_id">
    <option value="">-- Select --</option>
    <option value="NYC">New York City</option>
    <option value="LA" selected>Los Angeles</option>
    <option value="CHI">Chicago</option>
  </select>
  <button type="submit">Send</button>
</form>

Part-by-part explanation:

• <select name="city_id">: The form field name is city_id.
• <option value="NYC">New York City</option>: The user sees "New York City", but if selected, the browser submits city_id=NYC.
• <option value="LA" selected>...</option>: Los Angeles is chosen by default when the page loads.
• <option value="">-- Select --</option>: A placeholder option with an empty value, useful for validation.

Common mistakes

• Forgetting the value attribute: If you omit value, the entire text content becomes the submitted data. This breaks backend logic expecting short codes.
• Mismatched name attributes: Ensure the <select> has a name. Options do not have their own name; they inherit the parent's name.
• Using checked instead of selected: Radio buttons use checked; options use selected.
• Empty values without intent: An option with value="" submits nothing. Use this deliberately for placeholders, not accidentally.

When to use it

Compare <option> with radio buttons (<input type="radio">) for small sets of choices.

Practice

Guided Exercise: Create a select menu for "T-Shirt Size". Display "Small", "Medium", "Large". Submit values "S", "M", "L". Pre-select "Medium".

Challenge: Add a disabled option at the top saying "Please choose a size" with no value.

Hint: Use <option disabled> for the challenge part.

Quick check

Q: If an option is written as <option>Red</option>, what value is submitted?

A: The string "Red". Without a value attribute, the text content is used.

Summary

The <option> element decouples user experience from data processing. Always define explicit value attributes to ensure your backend receives predictable, machine-readable data regardless of how the label appears to the human user.