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>
+
</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>