HTML select tag
Example
Create a drop-down list with four options:
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
Definition and Usage
The <select>
element is used to create a drop-down list.
The <select>
element is most often used in a form, to collect user input.
It has predefined values, which can be selected by the user. The user can also select multiple options, when multiple attribute is set.
The name
attribute is needed to reference the form data after the form is submitted (if you omit the name
attribute, no data from the drop-down list will be submitted).
The id
attribute is needed to associate the drop-down list with a label.
The <option> tags inside the <select>
element define the available options in the drop-down list.
Tip: Always add the <label> tag for best accessibility practices!
Browser Support
Element | |||||
---|---|---|---|---|---|
<select> | Yes | Yes | Yes | Yes | Yes |
Attributes
Attribute | Value | Description |
---|---|---|
autofocus | autofocus | Specifies that the drop-down list should automatically get focus when the page loads |
disabled | disabled | Specifies that a drop-down list should be disabled |
form | form_id | Defines which form the drop-down list belongs to |
multiple | multiple | Specifies that multiple options can be selected at once |
name | name | Defines a name for the drop-down list |
required | required | Specifies that the user is required to select a value before submitting the form |
size | number | Defines the number of visible options in a drop-down list |
Global Attributes
The <select>
tag also supports the Global Attributes in HTML.
Event Attributes
The <select>
tag also supports the Event Attributes in HTML.
More Examples
Example
Use <select> with <optgroup> tags, The <optgroup> tags is used for grouping similar options in <select>:
<select name="cars" id="cars">
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
Default CSS Settings
None.
Comments
Post a Comment