Page 142 - HTML5

Chapter 35: Selection Menu Controls

Syntax

• <select name=""></select>
• <datalist id=""></datalist>
• <optgroup label="Option Group"></optgroup>
• <option value="">Option</option>

Examples

Select Menu

The <select> element generates a drop-down menu from which the user can choose an option.

<select name="">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>

Changing the Size

You can change the size of the selection menu with the size attribute. A size of 0 or 1 displays
the standard drop-down style menu. A size greater than 1 will convert the drop-down into a box
displaying that many lines, with one option per line and a scrollbar in order to scroll through
the available options.

<select name="" size="4"></select>

Multi-option Selection Menus

By default, users can only select a single option. Adding the multiple attribute allows users to
select multiple options at once and submit all selected options with the form. Using the
multiple attribute automatically converts the drop-down menu into a box as if it had a size
defined. The default size when this occurs is determined by the specific browser you are using,
and it is not possible to change it back to a drop-down style menu while allowing multiple
selections.

<select name="" multiple></select>

When using the multiple attribute, there is a difference between using 0 and 1 for the size,
whereas no difference exists when not using the attribute. Using 0 will cause the browser to
behave in whatever default manner it is programmed to do. Using 1 will explicitly set the size
of the resulting box to only one row high.

Option Groups

You can neatly group your options within a selection menu in order to provide a more structured
layout in a long list of options by using the <optgroup> element.
The syntax is very basic, by simply using the element with a label attribute to identify the
title for the group, and containing zero or more options that should be within that group.

<select name="">
<option value="milk">Milk</option>

https://riptutorial.com/ 126