DevOps:Doc/FlexForm/2.1/input/optgroup
No edit summary |
|||
| Line 1: | Line 1: | ||
===Name=== | |||
optgroup | |||
===Type=== | |||
select | |||
===Synopsis=== | |||
How to use optroup within a select with option fields to create a grouped dropdown input | |||
===Description=== | |||
The <code>optgroup</code> element is used to create groups of options within a <code>select</code> element. | |||
===Example=== | |||
<syntaxhighlight lang="html"> | |||
<label for="dino-select">Choose a dinosaur:</label> | |||
<select id="dino-select"> | |||
<optgroup label="Theropods"> | |||
<option value="Tyrannosaurus">Tyrannosaurus</option> | |||
<option value="Velociraptor">Velociraptor</option> | |||
<option value="Deinonychus">Deinonychus</option> | |||
</optgroup> | |||
<optgroup label="Sauropods"> | |||
<option value="Diplodocus">Diplodocus</option> | |||
<option value="Saltasaurus">Saltasaurus</option> | |||
<option value="Apatosaurus">Apatosaurus</option> | |||
</optgroup> | |||
</select> | |||
</syntaxhighlight> | |||
<label for="dino-select">Choose a dinosaur:</label> | |||
<select id="dino-select"> | |||
<optgroup label="Theropods"> | |||
<option value="Tyrannosaurus">Tyrannosaurus</option> | |||
<option value="Velociraptor">Velociraptor</option> | |||
<option value="Deinonychus">Deinonychus</option> | |||
</optgroup> | |||
<optgroup label="Sauropods"> | |||
<option value="Diplodocus">Diplodocus</option> | |||
<option value="Saltasaurus">Saltasaurus</option> | |||
<option value="Apatosaurus">Apatosaurus</option> | |||
</optgroup> | |||
</select> | |||
Revision as of 19:39, 16 February 2025
Name
optgroup
Type
select
Synopsis
How to use optroup within a select with option fields to create a grouped dropdown input
Description
The optgroup element is used to create groups of options within a select element.
Example
<label for="dino-select">Choose a dinosaur:</label>
<select id="dino-select">
<optgroup label="Theropods">
<option value="Tyrannosaurus">Tyrannosaurus</option>
<option value="Velociraptor">Velociraptor</option>
<option value="Deinonychus">Deinonychus</option>
</optgroup>
<optgroup label="Sauropods">
<option value="Diplodocus">Diplodocus</option>
<option value="Saltasaurus">Saltasaurus</option>
<option value="Apatosaurus">Apatosaurus</option>
</optgroup>
</select>
