| Line 3: | Line 3: | ||
select (dropdown) | select (dropdown) | ||
===Type=== | ===Type=== | ||
| − | + | select | |
===Synopsis=== | ===Synopsis=== | ||
How to use select with option fields to create a dropdown input | How to use select with option fields to create a dropdown input | ||
| Line 13: | Line 13: | ||
The <code>id</code> attribute is needed to associate the drop-down list with a label. | The <code>id</code> attribute is needed to associate the drop-down list with a label. | ||
| − | The <code><nowiki>< | + | The <code><nowiki><input type="option"></input></nowiki></code>tags inside the <code><select></code> element define the available options in the drop-down list. |
===Parameters=== | ===Parameters=== | ||
| Line 23: | Line 23: | ||
<p>Select a car:</p> | <p>Select a car:</p> | ||
<div> | <div> | ||
| − | < | + | <select name="car"> |
| − | < | + | <input type="option" value="volvo">Volvo</input> |
| − | < | + | <input type="option" value="saab">Saab</input> |
| − | + | </select> | |
</div> | </div> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
<div> | <div> | ||
| − | < | + | <select name="car"> |
| − | < | + | <input type="option" value="volvo">Volvo</input> |
| − | < | + | <input type="option" value="saab">Saab</input> |
</_select> | </_select> | ||
</div> | </div> | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
| − | < | + | <label for="dino-select">Choose a dinosaur:</label> |
| − | < | + | <select id="dino-select"> |
<optgroup label="Theropods"> | <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> | ||
<optgroup label="Sauropods"> | <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> | </optgroup> | ||
| − | </ | + | </select> |
</syntaxhighlight> | </syntaxhighlight> | ||
| − | < | + | <label for="dino-select">Choose a dinosaur:</label> |
| − | < | + | <select id="dino-select"> |
<optgroup label="Theropods"> | <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> | ||
<optgroup label="Sauropods"> | <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> | </optgroup> | ||
| − | </ | + | </select> |
Revision as of 11:16, 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>
</syntaxhighlight>
