<select> elementThe <select> element provides a control for choosing from a set of <option> elements. By default, it allows one selection and is usually displayed as a dropdown showing the current choice. The user chooses from the supplied options; an <input> linked to a <datalist> instead allows a value to be entered as well as suggested.
The multiple attribute permits more than one option to be selected. Browsers commonly present this as a list box, although the appearance and selection gestures depend on the device. The size attribute specifies the number of visible rows. A single-choice select can also be displayed as a list box by giving size a value greater than 1.
The name attribute identifies the control's data in a form submission. Each selected, enabled option contributes its value, or a value derived from its text if that attribute is omitted. With multiple selections, the same field name is repeated for each value, such as colour=red&colour=blue in URL-encoded form data. A select with no name contributes no data.
An option's selected attribute specifies the default choice. For a single-choice dropdown with no explicit selection, the browser normally selects the first enabled option. To start with a prompt, place an option with value="" first, directly inside the select. When the select displays one row and has required, this prompt does not satisfy validation, so the user must choose an actual option.
Related options can be placed in <optgroup> elements, each with a group heading. A group's heading is not a choice and contributes no value to submission. The disabled attribute can make a whole select, a group, or an individual option unavailable. Disabled controls and options contribute no data to the form submission.
A select should have an associated <label>, either enclosing it or linked by matching the label's for attribute to the select's id. The form attribute can associate the control with a form elsewhere in the document. This is separate from the label association and uses the form's id.
The second example displays a multiple-choice list with two initial selections. In a form submission, these contribute topic=html&topic=css. The user can change the selections using the gestures supported by their browser or device.
Attributes: name, multiple, required, disabled, size, form, autocomplete, GLOBALS. The value and selected attributes belong to the options.
Typical layout: <p><label for="pf-demo-plan">Plan</label><br> <select id="pf-demo-plan" name="plan" required> <option value="">Choose a plan...</option> <option value="free">Free</option> <option value="pro">Pro</option> </select></p> <p><label for="pf-demo-topics">Topics</label><br> <select id="pf-demo-topics" name="topic" multiple size="3"> <option value="html" selected>HTML</option> <option value="css" selected>CSS</option> <option value="svg">SVG</option> </select></p>
Visual representation: