Line 33: | Line 33: | ||
<input type="option" value="volvo">Volvo</input> | <input type="option" value="volvo">Volvo</input> | ||
<input type="option" value="saab">Saab</input> | <input type="option" value="saab">Saab</input> | ||
− | </ | + | </select> |
</div> | </div> | ||
Revision as of 10:17, 3 January 2023
Name
select (dropdown)
Type
select
Synopsis
How to use select with option fields to create a dropdown input
Description
The select
element is used to create a drop-down list.
The name
attribute is needed to reference the form data after the form is submitted (if you omit the name
attribute, no data from the drop-down list will be submitted).
The id
attribute is needed to associate the drop-down list with a label.
The <input type="option"></input>
tags inside the
</syntaxhighlight>
<label for="dino-select">Choose a dinosaur:</label>
<select id="dino-select">
<optgroup label="Theropods">
<input type="option" value="Tyrannosaurus">Tyrannosaurus</input>
<input type="option" value="Velociraptor">Velociraptor</input>
<input type="option" value="Deinonychus">Deinonychus</input>
</optgroup>
<optgroup label="Sauropods">
<input type="option" value="Diplodocus">Diplodocus</input>
<input type="option" value="Saltasaurus">Saltasaurus</input>
<input type="option" value="Apatosaurus">Apatosaurus</input>
</optgroup>
</select>