Web Standards Programmer's Reference: HTML, CSS, JavaScript®, Perl, Python®, and PHP

9.11. List Boxes

List boxes are used to allow a user to pick one or more textual items from a list. The list can be presented in its entirety, with each element visible, or as a drop-down list where users must scroll to their choices.

List boxes are delimited using select (<select>) tags, with their options delimited using option (<option>) tags. Optionally, you can use the option group (<optgroup>) tag to group related options within the list.

The <select> tag provides the container for the list and has the following format:

<select name="name_of_field" id="id_of_field" size="number_of_items_to_show"
  [multiple="multiple"]>

The size attribute determines how many items will initially be displayed by the control. If the number of items in the list exceeds the number of lines to display, the user agent will provide scroll bars so that the user can navigate to the additional items in the list. If the size attribute is set to 1, the list will become a drop-down list; clicking the list will expand it to show multiple items with a scroll bar.

The select tag does not include an attribute to control the width of the control. The select box is automatically sized according to the longest element (<option>) it contains. If you wish a select list to be wider, a common practice is to include a placeholder option of the appropriate length, similar to the following:

<option value="null">-------- Please make a selection --------</option>

However, including such an option places an additional ...