| Line 14: | Line 14: | ||
The <code><nowiki><input type="option"></input></nowiki></code>tags inside the <code><nowiki><select></nowiki></code> element define the available options in the drop-down list. | The <code><nowiki><input type="option"></input></nowiki></code>tags inside the <code><nowiki><select></nowiki></code> element define the available options in the drop-down list. | ||
| + | |||
| + | Instead of option inputs, it's also possible to use <code>selected</code> and <code>options</code> as attributes of the select element. In this case <code>options</code> should contain a comma-separated list of options and <code>selected</code> can be used to specify which option should be selected. | ||
===Parameters=== | ===Parameters=== | ||
| Line 64: | Line 66: | ||
</optgroup> | </optgroup> | ||
</select> | </select> | ||
| + | |||
| + | <syntaxhighlight lang="html"> | ||
| + | <select name="Test" selected="C" options="A,B,C,D,E" /> | ||
| + | </syntaxhighlight> | ||
| + | |||
| + | <select name="Test" selected="C" options="A,B,C,D,E" /> | ||
Revision as of 10:52, 10 February 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 <select> element define the available options in the drop-down list.
Instead of option inputs, it's also possible to use selected and options as attributes of the select element. In this case options should contain a comma-separated list of options and selected can be used to specify which option should be selected.
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" 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>
<select name="Test" selected="C" options="A,B,C,D,E" />
