htmlfreecodes.
Menu

Analytics choices

Analytics is optional. If allowed, Google measures public pages, navigation, recognized acquisition sources and engagement, including tool and playground use. The site excludes entered code, search terms and form contents from its Analytics events. You can withdraw here. This choice does not change advertising consent.

Read about Analytics and your information.

<option>

Defines an option in a select list

Definition and Usage

The <option> element establishes an option in a select list (dropdown list).

<option> elements go inside a <select>, <optgroup>, or <datalist> element.

Tip: The <option> tag can be used without any attributes, but you usually need the value attribute, which indicates what is sent to the server on form submission.
Tip: If you have a long list of options, you can group related options with the <optgroup> tag.

Browser support and standards

Browser rendering and modern HTML conformance are different questions. Check the current element reference for the browsers and features your project needs; the older source version table is not a current compatibility guarantee.

Read the MDN element reference

Attributes

Attribute Value Description
value text Specifies the value to be sent to the server when the form is submitted
selected selected Specifies that an option should be pre-selected when the page loads
disabled disabled Specifies that an option should be disabled (cannot be selected)
label text Specifies a shorter label for an option (displayed in the dropdown)

Examples

Basic Select with Options

Create a simple dropdown with options:

Example

<label for="country">Choose a country:</label>
<select id="country" name="country">
  <option value="us">United States</option>
  <option value="uk">United Kingdom</option>
  <option value="ca">Canada</option>
  <option value="au">Australia</option>
</select>

Pre-selected Option

Set a default selected option using the selected attribute:

Example

<label for="color">Choose your favorite color:</label>
<select id="color" name="color">
  <option value="red">Red</option>
  <option value="blue" selected>Blue</option>
  <option value="green">Green</option>
  <option value="yellow">Yellow</option>
</select>

Disabled Options

Disable specific options that cannot be selected:

Example

<label for="product">Select a product:</label>
<select id="product" name="product">
  <option value="">-- Choose a product --</option>
  <option value="laptop">Laptop - $999</option>
  <option value="phone">Phone - $699</option>
  <option value="tablet" disabled>Tablet - Out of Stock</option>
  <option value="watch">Smartwatch - $299</option>
</select>

Options with Optgroup

Group related options together using <optgroup>:

Example

<label for="vehicle">Choose a vehicle:</label>
<select id="vehicle" name="vehicle">
  <optgroup label="Cars">
    <option value="sedan">Sedan</option>
    <option value="suv">SUV</option>
    <option value="coupe">Coupe</option>
  </optgroup>
  <optgroup label="Trucks">
    <option value="pickup">Pickup</option>
    <option value="van">Van</option>
  </optgroup>
</select>

Datalist Options

Use options with a datalist for autocomplete suggestions:

Example

<label for="browser">Choose your browser:</label>
<input list="browsers" id="browser" name="browser" />
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
  <option value="Opera">
</datalist>

Multiple Select

Allow multiple options to be selected:

Example

<label for="languages">Select programming languages (hold Ctrl/Cmd):</label>
<select id="languages" name="languages" multiple size="5">
  <option value="javascript">JavaScript</option>
  <option value="python">Python</option>
  <option value="java">Java</option>
  <option value="csharp">C#</option>
  <option value="ruby">Ruby</option>
  <option value="php">PHP</option>
</select>

Try it Yourself

Interactive Example

Try selecting different options:

Option vs Datalist

  • With <select>: Creates a dropdown list where users must choose from predefined options
  • With <datalist>: Provides autocomplete suggestions while allowing users to type their own value
  • Form submission: Select sends the option's value attribute; datalist sends whatever the user types or selects
When to use: Use <select> when you need strict control over values. Use <datalist> when you want to provide suggestions but allow custom input.

Best Practices

  • Always set the value attribute for proper form submission
  • Use descriptive text between the <option> tags for user-friendly display
  • Include a default "Please select" option with an empty value for required fields
  • Use the label attribute when you need shorter text in the dropdown
  • Group related options with <optgroup> for better organization
  • Mark unavailable options as disabled rather than removing them
  • Always pair select elements with a <label> for accessibility
  • Use selected attribute to set sensible defaults when appropriate

Accessibility Considerations

  • Always provide a <label> with a for attribute matching the select's id
  • Avoid using placeholder-style first options as they're not accessible
  • Screen readers announce option text, not the value attribute
  • Disabled options are announced as unavailable by screen readers
  • Use aria-label or aria-labelledby if a visible label isn't possible

Related Tags