No edit summary |
m (Text replacement - "{{Doc properties" to "{{Csp class properties") |
||
| (11 intermediate revisions by 4 users not shown) | |||
| Line 23: | Line 23: | ||
<p>Select a car:</p> | <p>Select a car:</p> | ||
<div> | <div> | ||
<_select name="car"> | <_select name="car"> | ||
<_input type="option" value="volvo">Volvo</_input> | <_input type="option" value="volvo">Volvo</_input> | ||
<_input type="option" value="saab">Saab</_input> | <_input type="option" value="saab">Saab</_input> | ||
</_select> | </_select> | ||
</div> | </div> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
<div> | |||
<_select name="car"> | |||
<_input type="option" value="volvo">Volvo</_input> | <_input type="option" value="volvo">Volvo</_input> | ||
<_input type="option" value="saab">Saab</_input> | <_input type="option" value="saab">Saab</_input> | ||
| Line 38: | Line 37: | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
< | <_label for="dino-select">Choose a dinosaur:</_label> | ||
<_select | <_select id="dino-select"> | ||
< | <optgroup label="Theropods"> | ||
<_input type="option" value=" | <_input type="option" value="Tyrannosaurus">Tyrannosaurus</_input> | ||
<_input type="option" value=" | <_input type="option" value="Velociraptor">Velociraptor</_input> | ||
</ | <_input type="option" value="Deinonychus">Deinonychus</_input> | ||
< | </optgroup> | ||
<_input type="option" value=" | <optgroup label="Sauropods"> | ||
<_input type="option" value=" | <_input type="option" value="Diplodocus">Diplodocus</_input> | ||
</ | <_input type="option" value="Saltasaurus">Saltasaurus</_input> | ||
<_input type="option" value="Apatosaurus">Apatosaurus</_input> | |||
</optgroup> | |||
</_select> | </_select> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
< | <_label for="dino-select">Choose a dinosaur:</_label> | ||
<_select | <_select id="dino-select"> | ||
< | <optgroup label="Theropods"> | ||
<_input type="option" value=" | <_input type="option" value="Tyrannosaurus">Tyrannosaurus</_input> | ||
<_input type="option" value=" | <_input type="option" value="Velociraptor">Velociraptor</_input> | ||
</ | <_input type="option" value="Deinonychus">Deinonychus</_input> | ||
< | </optgroup> | ||
<_input type="option" value=" | <optgroup label="Sauropods"> | ||
<_input type="option" value=" | <_input type="option" value="Diplodocus">Diplodocus</_input> | ||
</ | <_input type="option" value="Saltasaurus">Saltasaurus</_input> | ||
<_input type="option" value="Apatosaurus">Apatosaurus</_input> | |||
</optgroup> | |||
</_select> | </_select> | ||
| ws-class-props | |||
|---|---|---|---|
| Line 1: | Line 1: | ||
{{Csp class properties | |||
|Doc subject=DevOps:Doc/FlexForm | |||
|Subject version=1.0,1.1 | |||
|Doc parent=DevOps:Doc/FlexForm/1.0/input | |||
|Doc sort order=110 | |||
|Doc target group=User | |||
|Doc synopsis=How to use select with option fields to create a dropdown input | |||
}} | |||
| ws-page-props | |||
| Line 1: | Line 1: | ||
Latest revision as of 09:59, 15 July 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 <_input type="option"></_input>tags inside the <select> element define the available options in the drop-down list.
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>