Paso 1
The <select> tag creates a dropdown list. It contains <option> elements; each option has a value (submitted with the form) and visible text. Use the name attribute on select for form submission.
<select>
Paso 2
Each <option> has a value attribute (what gets submitted) and text content (what the user sees). Use <optgroup> to group options under a label. Pair <select> with <label> using for and id for accessibility.
<select name="color">
<option value="red">Red</option>
<option value="blue">Blue</option>
</select>
Paso 3
Attributes: multiple allows multiple selections; size sets visible rows. required makes the field mandatory. Place select inside a <form> and give it a name so the selected value is submitted. Use <label for="id"> with id on select.
<label for="fav">Favorite:</label>
<select id="fav" name="fav">
<option value="a">A</option>
</select>
Paso 4
In the browser, select appears as a dropdown. The submitted value is the value of the selected option. Use optgroup for grouped choices. Always pair with a label for accessibility.
<select name="color">
<option value="red">Red</option>
<option value="blue">Blue</option>
</select>
Paso 5
Checkpoint: Which element creates a dropdown list of choices?
<select></select>
Paso 6
Correct! The <select> tag creates a dropdown. Use <option> inside for each choice. Use <input> for text, checkboxes, radio, etc.
<select></select>
Paso 7
Now it's your turn. Use <select> with <option> (and <optgroup>) for dropdowns in forms. Complete the challenges below to master the <select> tag!
