HTML <select> <option> and <optgroup> Elements
These three elements combine to create a menu list of options for possible selection by a user, most commonly within an online form.
The <select> element contains the list of options, each option within the list is contained by <option>
</option> tags and the <optgroup> element is used to group together related options within the menu list.
Most browsers present the menu list as a drop down box where a user can click on the desired option to select it. It is possible to offer users the chance to select many options with the multiple attribute but this requires the designer to inform the user of this possibility and the use of browser specific multiple keys to select the options. It is more accessible and gives better cross-browser conformance to use check boxes when many items in a list may be selected.
Example <select> element with options and option groups:
<option value="default">Please Select</option>
<optgroup label="2009">
<option value="2009 August">August - 2009</option>
<option value="2009 September">September - 2009</option>
<option value="2009 October">October - 2009</option>
<option value="2009 November">November - 2009</option>
<option value="2009 December">December - 2009</option>
</optgroup>
<optgroup label="2010">
<option value="2010 January">January - 2010</option>
<option value="2010 Febuary">February - 2010</option>
<option value="2010 March">March - 2010</option>
<option value="2010 April">April - 2010</option>
</optgroup>
<optgroup label="2011">
<option value="2011 June">June - 2011</option>
<option value="2011 July">July - 2011</option>
<option value="2011 August">August - 2011</option>
<option value="2011 September">September - 2011</option>
<option value="2011 October">October - 2011</option>
</optgroup>
</select>
Resulting list:
As you can see the value of the first <option> element is initially displayed in the menu box, this
is the default behaviour but can be altered by giving the first <option> element a label attribute which
becomes the contents of the menu box when first loaded.
An option may also be pre-selected using the selected attribute within an option element and this is written:
selected="selected".
When a user clicks on and selects one of the options the value
of that option is coupled with the name attribute given to the <select>
element and sent as the name/value pair of a successful control when the form is submitted.
<select> Attributes
- CORE AND LANGUAGE ATTRIBUTES - class, id, title, style, dir, lang
- EVENT ATTRIBUTES - onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmouseout, onmousemove, onkeydown, onkeyup, onkeypress
- name - sets the name of the
<select>element for use in form submission. - size - sets the number of rows visible when the select options are presented in a scrollable list box.
- multiple - a boolean value which when set allows multiple selections from a select list.
- disabled - the select box is disabled.
- tabindex - sets the position of the
<select>element in the tabbing order. - onfocus - an event occurs when the element gains focus.
- onblur - an event occurs when the element loses focus.
- onchange - an event occurs when the element loses focus and the contents have changed since it gained focus.
<option> Attributes
- CORE AND LANGUAGE ATTRIBUTES - class, id, title, style, dir, lang
- EVENT ATTRIBUTES - onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmouseout, onmousemove, onkeydown, onkeyup, onkeypress
- selected - when set an option is preselected by using 'selected="selected"' - only one option should be pre-selected.
- value - sets the initial value of the
<option>element. - label - gives a label to the
<option>element and this label is displayed in the menu list. - disabled - this option is disabled.
<optgroup> Attributes
- CORE AND LANGUAGE ATTRIBUTES - class, id, title, style, dir, lang
- EVENT ATTRIBUTES - onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmouseout, onmousemove, onkeydown, onkeyup, onkeypress
- label - REQUIRED attribute which gives a name to a group of options - this is usually displayed by browsers as a heading above the group of options.
- disabled - the
<optgroup>element is disabled.