| (2 intermediate revisions by one other user not shown) | |||
| 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><option></option></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. | 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=== | ||
| − | <code><nowiki><select>< | + | <code><nowiki><select><option></option></select></nowiki></code> |
You can also use placeholder to have an extra, non-selectable item with a suggestion. This also allows for not sending any data from a select, when the placeholder is still selected. Making a select field also an optional field in a form. See example 1. | You can also use placeholder to have an extra, non-selectable item with a suggestion. This also allows for not sending any data from a select, when the placeholder is still selected. Making a select field also an optional field in a form. See example 1. | ||
| + | |||
| + | Select values have by default comma separated values when adding to a Template. You can specify a different separator using the argument '''separator'''. e.g. separator=";". | ||
All other valid HTML5 attributes are allowed | All other valid HTML5 attributes are allowed | ||
| Line 28: | Line 30: | ||
<div> | <div> | ||
<select name="car" placeholder="Choose a car"> | <select name="car" placeholder="Choose a car"> | ||
| − | < | + | <option value="volvo">Volvo</option> |
| − | < | + | <option value="saab">Saab</option> |
</select> | </select> | ||
</div> | </div> | ||
| Line 35: | Line 37: | ||
<div> | <div> | ||
<select name="car" placeholder="Choose a car"> | <select name="car" placeholder="Choose a car"> | ||
| − | < | + | <option value="volvo">Volvo</option> |
| − | < | + | <option value="saab">Saab</option> |
</select> | </select> | ||
</div> | </div> | ||
| Line 44: | Line 46: | ||
<select id="dino-select"> | <select id="dino-select"> | ||
<optgroup label="Theropods"> | <optgroup label="Theropods"> | ||
| − | < | + | <option value="Tyrannosaurus">Tyrannosaurus</option> |
| − | < | + | <option value="Velociraptor">Velociraptor</option> |
| − | < | + | <option value="Deinonychus">Deinonychus</option> |
</optgroup> | </optgroup> | ||
<optgroup label="Sauropods"> | <optgroup label="Sauropods"> | ||
| − | < | + | <option value="Diplodocus">Diplodocus</option> |
| − | < | + | <option value="Saltasaurus">Saltasaurus</option> |
| − | < | + | <option value="Apatosaurus">Apatosaurus</option> |
</optgroup> | </optgroup> | ||
</select> | </select> | ||
| Line 58: | Line 60: | ||
<select id="dino-select"> | <select id="dino-select"> | ||
<optgroup label="Theropods"> | <optgroup label="Theropods"> | ||
| − | < | + | <option value="Tyrannosaurus">Tyrannosaurus</option> |
| − | < | + | <option value="Velociraptor">Velociraptor</option> |
| − | < | + | <option value="Deinonychus">Deinonychus</option> |
</optgroup> | </optgroup> | ||
<optgroup label="Sauropods"> | <optgroup label="Sauropods"> | ||
| − | < | + | <option value="Diplodocus">Diplodocus</option> |
| − | < | + | <option value="Saltasaurus">Saltasaurus</option> |
| − | < | + | <option value="Apatosaurus">Apatosaurus</option> |
</optgroup> | </optgroup> | ||
</select> | </select> | ||
| ws-class-props | |||
|---|---|---|---|
| Line 1: | Line 1: | ||
{{Doc properties | {{Doc properties | ||
| − | |Subject version=2.0 | + | |Subject version=2.0,2.1 |
|Doc subject=DevOps:Doc/FlexForm | |Doc subject=DevOps:Doc/FlexForm | ||
|Doc parent=DevOps:Doc/FlexForm/1.0/input | |Doc parent=DevOps:Doc/FlexForm/1.0/input | ||
Latest revision as of 21:23, 27 October 2024
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 <option></option>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><option></option></select>
You can also use placeholder to have an extra, non-selectable item with a suggestion. This also allows for not sending any data from a select, when the placeholder is still selected. Making a select field also an optional field in a form. See example 1.
Select values have by default comma separated values when adding to a Template. You can specify a different separator using the argument separator. e.g. separator=";".
All other valid HTML5 attributes are allowed
Example
<p>Select a car:</p>
<div>
<select name="car" placeholder="Choose a car">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</select>
</div>
<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>
<select name="Test" selected="C" options="A,B,C,D,E" />
