revision:
The <option> tag defines an option in a select list. <option> elements go inside a <select>, <optgroup>, or <datalist> element. 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.
If you have a long list of options, you can group related options within the<optgroup> tag. The <optgroup> tag is used to group related options in a <select> element (drop-down list). The <optgroup> tag organizes a set of <option> tags into an option group with a group heading. The label value for the <optgroup> will appear as a gray heading. All of the grouped items will appear below the heading as an indented list of options.
By default, the first option in the <select> tag will appear as the selected item. The user can select another option in the dropdown list.
disabled ; value: disabled;
specifies that an option should be disabled.
label ; value: text;
specifies a shorter label for an option.
selected ; value: selected;
specifies that an option should be pre-selected when the page loads.
value ; value: text;
specifies the value to be sent to a server.
disabled ; value: disabled;
specifies that an option-group should be disabled.
label ; value: text;
specifies a shorter label for an option-group.
<optgroup>
<option value=" ">. . .</option>
<option value=" ">. . .</option>
<option value=" ">. . .</option>
. . . .
</optgroup>
code:
<div class="spec">
<label class="example" 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>
</div>
coding:
<form action="#" method="get">
<label class="example" 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>
code:
<form class="example" action="#">
<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>
<input type="submit" value="Submit">
</form>
coding:
<select class="example">
<option>Choose an option</option>
<option>Choose an option</option>
<option value="html">HTML</option>
<option value="java">JAVA</option>
<option value="C++">C++</option>
<option value="php">PHP</option>
<option value="perl">PERL</option>
</select>
<style>
select{width: 10vw; height: 3vw; color: black; background-color:lightgreen;}
</style>
code:
<div class="spec">
<label class="example" for="tutorial_choice">Tutorials: </label>
<select class="example" id="tutorial_choice">
<optgroup label="Web">
<option value="html">HTML</option>
<option value="css">CSS</option>
</optgroup>
<optgroup label="Database">
<option value="sql">SQL</option>
<option value="oracle">Oracle</option>
</optgroup>
</select>
</div>