Home > HTML > Forms - Select Listsprinter version

HTML - Forms - Select Lists

HTML provides the means within forms for users to select one or more options from a drop down select list

The <select> Element

The <select> element produces a drop down select list from which one or more selections can be made. Select has a closing tag and between the start and closing tags is where the options are listed.

<select> Attributes

Select allows a number of attributes some of which are shown below.

Name specifies the name of the select list where name="name" and is passed to the server as part of a name/value pair. The name should be unique.
Size specifies the height of the list control where size="n" and "n" is the number of options visible. If size="1" then only one option is visible and a control is clicked at the right end of the control to display the list of options. If size is set to greater than 1 then that number of options is visible with a scrollable list control.
Multiple allows multiple options to be selected. If omitted then the default is 1 option. To select more than 1 option a command key (depends on the operating system) is held down.
Class tells the browser to render the select element in a named style and takes the form class="my_select_style" where "my_select_style" is a previously defined style.

The <option> Element

Option is used in conjunction with select to specify the options available and appears between the select opening and closing tags.

The Basic Structure of a Select List with Options

<select name="colours">
    <option value="red">Red</option>
    <option value="blue">Blue</option>
    <option value="green">Green</option>
</select>

<option> Attributes

Option allows a number of attributes some of which are shown below.

Value specifies the value that is forwarded to the server, if the option is selected, as part of a name/value pair. The name comes from the enclosing select element and the value from the option element. If the select element is set to multiple then the name/value pairs are sent as a comma delimited list.
Selected specifies which option will show as selected when the form downloads.
Class tells the browser to render the option element in a named style and takes the form class="my_option_style" where "my_option_style" is a previously defined style.

Previous - Forms - Input and Textarea Next - Frames - Framesets