REFERENCEhtml

html Documentation

📖 INDEX

# helloworld

LOADING ENGINE...

<option>

AI & DATA SCIENCE // option-tag

The <option> element represents a single choice within a <select> dropdown or a <datalist> of suggestions.

Syntax

<select name="size">
  <option value="s">Small</option>
  <option value="m" selected>Medium</option>
</select>

Deep Dive Course

**`<option>`** must be nested inside a `<select>` (or `<datalist>`). Its **`value`** attribute is what actually gets submitted with the form — if omitted, the option's visible text content is used as the value instead. The **`selected`** attribute pre-selects that option when the page loads, and **`disabled`** makes a specific choice visible but unpickable (useful for a 'currently unavailable' option).

1Understanding <option>

`<option>` must be nested inside a <select> (or <datalist>). Its `value` attribute is what actually gets submitted with the form — if omitted, the option's visible text content is used as the value instead. The `selected` attribute pre-selects that option when the page loads, and `disabled` makes a specific choice visible but unpickable (useful for a 'currently unavailable' option).

💡

If value is omitted, the browser submits the option's TEXT content as the value — this can silently cause bugs if your visible label text isn't a clean machine-readable value (e.g. 'United States (US)' submitted literally instead of a code like 'us').

editor.html

<select name="plan">
  <option value="free" selected>Free</option>
  <option value="pro">Pro</option>
  <option value="enterprise" disabled>Enterprise (contact sales)</option>
</select>

localhost:3000

2Practical Example

Here is a real-world application of <option> showing how it is used in production HTML.

editor.html

<!-- Options as suggestions inside a datalist instead of a select -->
<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Chrome"></option>
  <option value="Firefox"></option>
</datalist>

localhost:3000

3Best Practices

Follow these guidelines when working with <option>:

1. Always set an explicit value, rather than relying on the visible text being submitted

2. Use selected to set a sensible default choice

3. Use disabled for a valid-but-currently-unavailable option, keeping it visible for context

⚠️

Tip: If value is omitted, the browser submits the option's TEXT content as the value — this can silently cause bugs if your visible label text isn't a clean machine-readable value (e.g. 'United States (US)' submitted literally instead of a code like 'us').

editor.html

<select name="plan">
  <option value="free" selected>Free</option>
  <option value="pro">Pro</option>
  <option value="enterprise" disabled>Enterprise (contact sales)</option>
</select>

localhost:3000

Examples

Example 01Basic Usage

<select name="plan">
  <option value="free" selected>Free</option>
  <option value="pro">Pro</option>
  <option value="enterprise" disabled>Enterprise (contact sales)</option>
</select>

Example 02Advanced Example

<!-- Options as suggestions inside a datalist instead of a select -->
<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Chrome"></option>
  <option value="Firefox"></option>
</datalist>

Best Practices

Always set an explicit value, rather than relying on the visible text being submitted
Use selected to set a sensible default choice
Use disabled for a valid-but-currently-unavailable option, keeping it visible for context

Interview Question

What value gets submitted if an <option> has no explicit value attribute?▼

Hint: Think about what the browser falls back to when value is missing.

When an <option> has no value attribute, the browser falls back to submitting its visible text content as the value instead. This can create subtle bugs if the display text isn't a clean, stable identifier — for example, if you later change the display label for translation or clarity, the submitted value silently changes too, which wouldn't happen if you'd set an explicit, stable value attribute from the start.

Exercises

EasyPractice using <option> in a real scenario.

View Solution

<select name="plan">
  <option value="free" selected>Free</option>
  <option value="pro">Pro</option>
  <option value="enterprise" disabled>Enterprise (contact sales)</option>
</select>

Frequently Asked Questions

What value gets submitted if an <option> has no explicit value attribute?▼

When an

Related Functions

select-tagdatalist-tagoptgroup-tag