HTML <select> autofocus Attribute
A drop-down list with autofocus:
<select autofocus>
<option value=”volvo”>Volvo</option>
<option value=”saab”>Saab</option>
<option value=”opel”>Opel</option>
<option value=”audi”>Audi</option>
</select>
Definition and Usage
The autofocus attribute is a boolean attribute.
When present, it specifies that the drop-down list should automatically get focus when the page loads.
HTML <select> disabled Attribute
A disabled drop-down list:
<select disabled>
<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 disabled attribute is a boolean attribute.
When present, it specifies that the drop-down list should be disabled.
A disabled drop-down list is unusable and un-clickable.
The disabled attribute can be set to keep a user from using the drop-down list until some other condition has been met (like selecting a checkbox, etc.). Then, a JavaScript can remove the disabled value, and make the drop-down list usable.
HTML <select> form Attribute
A drop-down list located outside a form (but still a part of the form):
<form action=”/action_page.php” id=”carform”>
Firstname:<input type=”text” name=”fname”>
<input type=”submit”>
</form><select name=”carlist” form=”carform”>
<option value=”volvo”>Volvo</option>
<option value=”saab”>Saab</option>
<option value=”opel”>Opel</option>
<option value=”audi”>Audi</option>
</select>
Definition and Usage
The form attribute specifies one or more forms the drop-down list belongs to
HTML <select> multiple Attribute
A drop-down list that allows multiple selections:
<select multiple>
<option value=”volvo”>Volvo</option>
<option value=”saab”>Saab</option>
<option value=”opel”>Opel</option>
<option value=”audi”>Audi</option>
</select>
Definition and Usage
The multiple attribute is a boolean attribute.
When present, it specifies that multiple options can be selected at once.
Selecting multiple options vary in different operating systems and browsers:
- For windows: Hold down the control (ctrl) button to select multiple options
- For Mac: Hold down the command button to select multiple options
Because of the different ways of doing this, and because you have to inform the user that multiple selection is available, it is more user-friendly to use checkboxes instead.
HTML <select> name Attribute
A drop-down list with a name attribute:
<select name=”cars”>
<option value=”volvo”>Volvo</option>
<option value=”saab”>Saab</option>
<option value=”opel”>Opel</option>
<option value=”audi”>Audi</option>
</select>
Definition and Usage
The name attribute specifies the name for a drop-down list.
The name attribute is used to reference elements in a JavaScript, or to reference form data after a form is submitted.
HTML <select> required Attribute
An HTML form with a required drop-down list:
<select required>
<option value=””>None</option>
<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 required attribute is a boolean attribute.
When present, it specifies the user is required to select a value before submitting the form.
HTML <select> size Attribute
A drop-down list with three visible options:
<select size=”3″>
<option value=”volvo”>Volvo</option>
<option value=”saab”>Saab</option>
<option value=”opel”>Opel</option>
<option value=”audi”>Audi</option>
</select>
Definition and Usage
The size attribute specifies the number of visible options in a drop-down list.
If the value of the size attribute is greater than 1, but lower than the total number of options in the list, the browser will add a scroll bar to indicate that there are more options to view.