<option></option> tag HTML

Example

A simple <option> tag that open PNLdev.com link:

<option value="JS">JS</option>

Laboratory

description & Usage

For anthology of an option in the relevant list, they use <option> tag.

The tags in which option can be used are:

<optgroup> tag.
<datalist> tag.
<select> tag.

Notes

Note: The <option> tag does not need any attribute, but to send the form data to the server, you need to use the value attribute.

Note: If you have trouble grouping the list options, you can easily get help from the <optgroup> tag.

Browser compatibility and Support

#	Chrome	Edge	Firefox	Safari	Opera
<option>

Attributes

Attributes	Values	Description
disabled	disabled	en
label	text	en
selected	selected	en
value	text	en

Global Attributes

The option tag supports the HTML Global Attributes.

Event Attributes

The option tag supports the HTML Event Attributes.

More Examples

Example

HTML An example for the <option> tag using the <datalist> tag - Example #1

<form action="/action_page.php" method="get">
  <label for="fruts">Search for your favorite fruit :</label>
  <input list="fruts" name="fruts" id="fruts">
  
  <datalist id="fruts">
    <option value="Pomegranate">
    <option value="Orange">
    <option value="cantaloupe">
    <option value="apple">
    <option value="Grapefruit">
  </datalist>
  <input type="submit">
</form>

Laboratory

Example

HTML An example for the <option> tag using the <optgroup> tag - Example #2

<form action="/action_page.php" >
    <label for="cars">Search for your favorite car :</label>
    <select name="cars" id="cars">
        <optgroup label="Japanese cars:">
            <option value="Toyota">Toyota</option>
            <option value="Honda ">Honda</option>
            <option value="Mitsubishi ">Mitsubishi</option>
            <option value="Lexus ">Lexus</option>
        </optgroup>  
        <optgroup label="German cars:">
            <option value="Ford">Ford</option>
            <option value="Porsche ">Porsche</option>
            <option value="Folks ">Folks</option>
            <option value="Maybach ">Maybach</option>
        </optgroup>
    </select>
    <input type="submit" value="submit">
</form>

Laboratory