The select HTML tag
The select tag allows to select an option from a list. It is supplemented by the HTML 5 menu tag that is more specialized for a context menu or toolbar.
All HTML elements can embed a select but <a> and <button>.
The basic syntax is:
<select> <option></option> ... </select>
We can group options with the optgroup tag:
<select> <optgroup> <option></option> ... </optgroup> ... </select>
The ending tag may be omitted for option and optgroup but it is mandatory to select.
Attributes specific or inherited
ID of the form related to the select tag.
State disabled or not.
Number of lines displayed, one is the default.
Possibility of selecting multiple options together.
Number of options in the list (read only).
For keyboard users, indicates the order in which the tags get the focus. If the select tag has a tabindex="2", when the user will activate the tab key on the page, the select will be available in second.
Name to send form data
Regarding the attributes disabled, you can just write disabled or disabled="disabled" or disabled="". Similarly for the multiple attribute. This for HTML 5.
If multiple options are selected, the multiple attribute should be present.
Example of use
This corresponds to the following code:
<select size="6" >
<optgroup label="groupe1"> <option>Alpha</option> <option>Beta</option> </optgroup> <optgroup label="groupe2"> <option>One</option> <option>Two</option> </optgroup> </select>
The demo gives a value and content to the options. It is the content that is displayed.
This is useful in cases where the values used by the script are different than what is displayed.
When you select an option, a warning message appears which displays the index and the associated value.
<select name="select" onchange="updated(this)">
alert(val + " " + content);
selectedIndex is a read-only attribute that indicates the position of the selected item.
The select element has been kept in HTML 5, but new tags were created to better respond to different situations.
The menu item contains a list of options that are <li> tags but it is not implemented.
More interestingly, the MVC (Model View Controller) is added which separates the presentation from data, with the datalist tag, a list that is associated to different elements such as range, while they are separated in the body of the page.
We can then more easily dynamically generate lists.
- The Option tag.