In HTML, the <select> element is used for creating drop-down lists in an HTML form. The dropdown list will consist of pre-determined entry options whose values the user sends by submitting the data. The select element is one of the oldest form elements; therefore, every mainstream browser supports it.
HTML Select Elements
- label— The label is a description of what the dropdown contains. A label is not compulsory when using the select element; however, it’s good practice to put one in front in most instances. If you would use a label, it should have a for attribute that’s the same as the id of the select element. You should place the label outside the select element.
- select— This is the main body of the select element; you are supposed to place all options within the select tag; the opening <select> and closing </select> tags are compulsory. The select tag must have id and name attributes; the id element links it to the label, while the name attribute is needed to reference the form data after submitting it. Omitting the name attribute will make the select tag invalid as the user won’t be able to submit any data.
- option— The option tags indicate the options on the dropdown list. The option tag should be within the select tag; there can be as many options as possible. Option tags must have a value attribute; submitting the form sends this value to the server; the user only sees the text typed between the opening <option> and closing <option>.
- optgroup— optgroup is a means of grouping various options within a select dropdown. The optgroup must have a label attribute that describes the grouping; this label will show in the dropdown but cannot be selected.
Here’s an example of a select element:
<!DOCTYPE html>
<html>
<body>
<h1>How to use the Select Element in HTML:</h1>
<form>
<label for="colors">Choose a color:</label>
<select name="colors" id="colors">
<optgroup label="Primary Colors">
<option value="red">Red</option>
<option value="blue">Blue</option>
</optgroup>
<optgroup label="Secondary Colors">
<option value="green">Green</option>
<option value="orange">Orange</option>
</optgroup>
</select>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Select Element Attributes
You can add other attributes to the select element to modify its functionality:
- autofocus— Tells the browser to automatically focus on the element once the page loads; only one element can have this attribute on a page.
The autofocus attribute should be put in the select opening tag; like this<select autofocus>. - disabled— Specifies that a dropdown list should be disabled; the color of the dropdown by default will be a light shade of grey. You can also use the disabled attribute on specific options in the dropdown.
The disabled attribute should be put in the opening tag of an option; like this<option disabled>. - form_id— This attribute defines the form to which the select element is connected. Mozilla Firefox does not support the form_id attribute.
The form_id attribute should be placed in the select opening tag and should be the same as the id of the form; like this<form id="new-form"><select form_id="new-form"> - multiple— Allows users to select multiple options at once. Users can select multiple options simultaneously with a keyboard by holding down the Ctrl key + left-click any desired options.
You can also press the Shift + up or down keys to select multiple consecutive items. If the items don’t follow each other, you can select them by pressing the Ctrl key + up or down keys; when you get to the option you want to select, you will press the space key.
The multiple attribute should be placed in the select opening tag; like this<select multiple>. - required— Specifies to the user that the form won’t be submitted unless an option is selected.
The required attribute should be placed in the select opening tag; like this<select required>. - size— It lets you define how many lines of options the user can see at once; they will need to scroll down to see the remaining options.
The multiple attribute should be placed in the select opening tag and given a numeric value; like this<select size="3">. - selected— You can add this attribute to any of the options in the select tag; using it makes that option selected by default.
The selected attribute should be placed in the option opening tag; like this<option selected>.
You can also combine various attributes in a single tag like this:<select autofocus size="3" required>
Read More: How To Underline in HTML