• Home
• Web Tutorial
• Full Course
• English Tutorial
• HTML
• HTML Tag
• What is HTML <option> Tag

How to add HTML <option> Tag

A drop-down list with four options.

index.html

<label for="cars">Choose a car:</label>

<select id="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

Output should be:

How to Use of <option> in a <datalist> element:

Note: The datalist tag is not supported in Safari 12.0 (or earlier).

index.html

<form action="/action_page.php" method="get">
  <label for="browser">Choose your browser from the list:</label>
  <input list="browsers" name="browser" id="browser">
  <datalist id="browsers">
    <option value="Edge">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
  <input type="submit">
</form>

Output should be:

How to Use of <option> in <optgroup> elements

The optgroup tag is used to group related options in a drop-down list.

index.html

<form action="/action_page.php">
  <label for="cars">Choose a car:</label>
  <select name="cars" id="cars">
    <optgroup label="Swedish Cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
    </optgroup>
    <optgroup label="German Cars">
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </optgroup>
  </select>
  <br><br>
  <input type="submit" value="Submit">
</form>

Output should be:

What is HTML <option> disabled Attribute

Definition and Usage

The disabled attribute is a boolean attribute.

When present, it specifies that an option should be disabled.

A disabled option is unusable and un-clickable.

The disabled attribute can be set to keep a user from selecting the option until some other condition has been met (like selecting a checkbox, etc.). Then, a JavaScript is required to remove the disabled value, and make the option selectable.

Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

How to add HTML <option> disabled Attribute

A drop-down list with one disabled option.

The option disabled attribute.

index.html

<select id="cars">
  <option value="volvo" disabled>Volvo</option>
  <option value="saab">Saab</option>
  <option value="vw">VW</option>
  <option value="audi">Audi</option>
</select>

Output should be:

What is HTML <option> label Attribute

Definition and Usage

The label attribute specifies a shorter version of an option.

The shorter version will be displayed in the drop-down list.

Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

Attribute Values

What is HTML <option> label Attribute

Use of the label attribute in <option> elements.

Note: The option's label attribute is not supported in Firefox.

index.html

<select id="cars">
  <option label="Volvo">Volvo (Latin for "I roll")</option>
  <option label="Saab">Saab (Swedish Aeroplane AB)</option>
  <option label="Mercedes">Mercedes (Mercedes-Benz)</option>
  <option label="Audi">Audi (Auto Union Deutschland Ingolstadt)</option>
</select>

Output should be:

What is HTML <option> selected Attribute

Definition and Usage

The selected attribute is a boolean attribute.

When present, it specifies that an option should be pre-selected when the page loads.

The pre-selected option will be displayed first in the drop-down list.

Tip: The selected attribute can also be set after the page loads, with a JavaScript.

Browser Support

Syntax

How to add HTML <option> selected Attribute

A drop-down list with a pre-selected option.

index.html

<select id="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="vw">VW</option>
  <option value="audi" selected>Audi</option>
</select>

Output should be:

What is HTML <option> value Attribute

Definition and Usage

The value attribute specifies the value to be sent to a server when a form is submitted.

The content between the opening <option> and closing </option> tags is what the browsers will display in a drop-down list. However, the value of the value attribute is what will be sent to the server when a form is submitted.

Note: If the value attribute is not specified, the content will be passed as a value instead.

Browser Support

Syntax

Attribute Values

How to add HTML <option> value Attribute

A drop-down list inside an HTML form.

index.html

<form action="/action_page.php">
<label for="cars">Choose a car:</label>

<select id="cars" name="cars">
  <option value="volvo">Volvo XC90</option>
  <option value="saab">Saab 95</option>
  <option value="mercedes">Mercedes SLK</option>
  <option value="audi">Audi TT</option>
</select>
<input type="submit" value="Submit">
</form>

Output should be:

Reffered: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option