| 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 20: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>
