Coding and programming reference site

Tag option

The <option> tag is used to define individual items in a dropdown list or combo box, typically placed inside a <select> element. It is essential for building form controls that allow users to pick from predefined values.

📌 What Is the `<option>` Tag?

The <option> element represents a single choice within a <select> dropdown or an <optgroup>. It defines the value the user can select and optionally display text.

✅ Basic Syntax

<select>
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
</select>

🟢 This will render a dropdown with:

HTML
CSS
JavaScript

When a user selects “HTML”, the form submits the value "html".

🧩 Diagram

<select>
 ├── <option value="html">HTML</option>
 ├── <option value="css">CSS</option>
 └── <option value="js">JavaScript</option>
</select>

🔧 Attributes of `<option>`

Attribute	Description
`value`	The actual value sent on form submission
`selected`	Makes the option pre-selected
`disabled`	Disables this choice from being selected
`label`	Gives an alternative label (rare; more useful in `<datalist>`)

🧪 Example 1: Pre-selected Option

<select>
  <option value="html" selected>HTML</option>
  <option value="css">CSS</option>
</select>

The dropdown will display “HTML” as the default selected option.

🧪 Example 2: Disabled Option

<select>
  <option value="choose" disabled selected>Choose a language</option>
  <option value="python">Python</option>
  <option value="ruby">Ruby</option>
</select>

The first item is not selectable — it’s used as a prompt.

🧪 Example 3: Grouped with `<optgroup>`

<select>
  <optgroup label="Frontend">
    <option>HTML</option>
    <option>CSS</option>
  </optgroup>
  <optgroup label="Backend">
    <option>PHP</option>
    <option>Python</option>
  </optgroup>
</select>

The dropdown will display “Frontend” and “Backend” as categories.

📜 Form Submission Behavior

If the user selects:

<option value="php">PHP</option>

And the <select> is named language, the browser will submit:

language=php

If value is not provided, the browser submits the text inside the option.

♿ Accessibility Best Practices

Always set a meaningful value for machine-readable data.
Use a disabled, selected placeholder like Choose an option to prompt users.
Screen readers will read each option’s content — keep them short and clear.

🔁 `<option>` in `<datalist>`

<option> can also be used inside a <datalist> to create an autocomplete dropdown:

<input list="browsers" name="browser" />
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
</datalist>

Users can type or choose from the options.

⚠️ Limitations

Not intended for multi-column or multi-line displays
Cannot contain HTML inside (plain text only)
Styling <option> is limited across browsers

🏁 Conclusion

The <option> tag is a core building block for dropdown inputs in HTML. Combined with <select> and <optgroup>, it lets you build structured, accessible, and user-friendly form interfaces.

🎯 Use <option> for every individual choice in dropdowns — define values clearly, and use attributes like selected or disabled for improved control.

Design by ThemesDNA.com

📌 What Is the <option> Tag?