The <select> element
The <select>
element gives a menu of options for a user and is implemented by the DOM HTMLSelectElement
Interface. You can add the <multiple>
attributes to the select
element and add multiple options. The examples in this section use HTML, CSS, and JavasScript to customize <select>
styles.
Try it
The above example shows typical <select>
usage. It is given an id
attribute to enable it to be associated with a <label>
for accessibility purposes, as well as a name
attribute to represent the name of the associated data point submitted to the server. Each menu option is defined by an <option>
element nested inside the <select>
.
Each <option>
element should have a value
attribute containing the data value to submit to the server when that option is selected. If no value
attribute is included, the value defaults to the text contained inside the element. You can include a selected
attribute on an <option>
element to make it selected by default when the page first loads.
The <select>
element has some unique attributes you can use to control it, such as multiple
to specify whether multiple options can be selected, and size
to specify how many options should be shown at once. It also accepts most of the general form input attributes such as required
, disabled
, autofocus
, etc.
You can further nest <option>
elements inside <optgroup>
elements to create separate groups of options inside the dropdown.