The <label> element assigns a label to multiple form elements.
For screen-reader users, the <label> element enhances accessibility by having the screen-reader announce the label when the user selects the input element.
Additionally, the <label> element aids users who struggle with clicking on tiny areas, like radio buttons or checkboxes, because clicking on the text within the <label> element toggles the associated radio button or checkbox.
To link the <label> and <input> elements, the for attribute of the <label> tag should match the id attribute of the <input> element.
The <select> element creates a dropdown menu:
Example
| <label for=”cars”>Choose a car:</label> <select id=”cars” name=”cars”> <option value=”volvo”>Volvo</option> <option value=”saab”>Saab</option> <option value=”fiat”>Fiat</option> <option value=”audi”>Audi</option> </select> |
The <option> element defines a selectable choice in a dropdown, with the first item selected by default. To set a default selection, use the selected attribute.
Example
| <option value=”fiat” selected>Fiat</option> |