(Slot migration) |
|||
Line 37: | Line 37: | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
− | < | + | <_label for="dino-select">Choose a dinosaur:</_label> |
− | + | <_select id="dino-select"> | |
− | + | <optgroup label="Theropods"> | |
− | + | <_input type="option">Tyrannosaurus</_input> | |
− | + | <_input type="option">Velociraptor</_input> | |
− | + | <_input type="option">Deinonychus</_input> | |
− | + | </optgroup> | |
− | + | <optgroup label="Sauropods"> | |
− | + | <_input type="option">Diplodocus</_input> | |
− | + | <_input type="option">>Saltasaurus</_input> | |
− | + | <_input type="option">Apatosaurus</_input> | |
− | + | </optgroup> | |
+ | </_select> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
− | < | + | <_label for="dino-select">Choose a dinosaur:</_label> |
− | <_select | + | <_select id="dino-select"> |
− | <optgroup label=" | + | <optgroup label="Theropods"> |
− | <_input type="option" | + | <_input type="option">Tyrannosaurus</_input> |
− | <_input type="option | + | <_input type="option">Velociraptor</_input> |
− | </optgroup> | + | <_input type="option">Deinonychus</_input> |
− | <optgroup label=" | + | </optgroup> |
− | <_input type="option" | + | <optgroup label="Sauropods"> |
− | <_input type="option | + | <_input type="option">Diplodocus</_input> |
− | </optgroup> | + | <_input type="option">>Saltasaurus</_input> |
+ | <_input type="option">Apatosaurus</_input> | ||
+ | </optgroup> | ||
</_select> | </_select> | ||
− |
Revision as of 07:55, 26 August 2022
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 <select>
element define the available options in the drop-down list.
Parameters
<_select><_input type="option"></_input></_select>
All other valid HTML5 attributes are allowed
Example
<p>Select a car:</p>
<div>
<_select name="car">
<_input type="option" value="volvo">Volvo</_input>
<_input type="option" value="saab">Saab</_input>
</_select>
</div>
<_label for="dino-select">Choose a dinosaur:</_label>
<_select id="dino-select">
<optgroup label="Theropods">
<_input type="option">Tyrannosaurus</_input>
<_input type="option">Velociraptor</_input>
<_input type="option">Deinonychus</_input>
</optgroup>
<optgroup label="Sauropods">
<_input type="option">Diplodocus</_input>
<_input type="option">>Saltasaurus</_input>
<_input type="option">Apatosaurus</_input>
</optgroup>
</_select>