m (Text replacement - "|Subject version=2.0,2.1" to "|Subject version=2.0,2.1,2.5") |
|||
| (13 intermediate revisions by 5 users not shown) | |||
| 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><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. | |||
===Parameters=== | ===Parameters=== | ||
<code><nowiki>< | <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. | |||
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 23: | Line 29: | ||
<p>Select a car:</p> | <p>Select a car:</p> | ||
<div> | <div> | ||
< | <select name="car" placeholder="Choose a car"> | ||
< | <option value="volvo">Volvo</option> | ||
< | <option value="saab" selected="selected">Saab</option> | ||
</select> | |||
</div> | </div> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
<div> | <div> | ||
< | <select name="car" placeholder="Choose a car"> | ||
< | <option value="volvo">Volvo</option> | ||
< | <option value="saab" selected="selected">Saab</option> | ||
</ | </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"> | ||
< | <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> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
< | <label for="dino-select">Choose a dinosaur:</label> | ||
< | <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> | ||
<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" /> | |||
| ws-class-props | |||
|---|---|---|---|
| Line 1: | Line 1: | ||
{{ | {{Csp class properties | ||
|Subject version=2.0 | |Subject version=2.0,2.1,2.5 | ||
|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 | ||
|Doc sort order=110 | |Doc sort order=110 | ||
|Doc target group=User | |Doc target group=User | ||
|Doc synopsis=How to use select with option fields to create a dropdown input | |||
}} | }} | ||
Latest revision as of 10:08, 21 August 2025
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" selected="selected">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" />
