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

Basics Creating a Document Head and Body Elements Formatting Text Creating Lists Embedding Images URLs Explained Linking to Documents Creating Tables Forms Form Basics Input and Textarea Select Lists Frames Framesets The Frame Element Nested Framesets Targetting Frames Inline Frames		Tips and Tricks Meta Tags Transition Effects HTML Generators Create a Document Create a List Create a Table

Basics Implementing CSS CSS Syntax Pseudo Classes/Elements CSS Classes CSS Properties Font Properties Color and Background Text Properties Border Properties Margins and Padding Size and Position		Tips and Tricks Menu Buttons Special Effects

Basics Running a Script Variables Expressions and Operators Objects.Properties.Methods The Date Object Strings Regular Expressions Defining RegExp Patterns Branches and Conditions Loops Arrays Array Basics Array Methods Sorting Arrays User-Defined Functions Cookies Windows Frames		Tips and Tricks Image Replacement Using Includes Form Validation Debugging

Basics Creating a Script Running a Script Variables Expressions and Operators Strings Strings Basics Strings and Substrings Replacing Substrings Regular Expressions Branches and Conditions Loops Arrays Array Basics Array Functions Sorting Arrays User-Defined Functions Include and Require Uploading Files File Functions Session Variables		Tips and Tricks Page Templates Form Reply Scripts Form Validation JavaScript to PHP