| (16 intermediate revisions by 4 users not shown) | |||
| Line 1: | Line 1: | ||
===Name=== | ===Name=== | ||
| − | + | select (dropdown) | |
===Type=== | ===Type=== | ||
_select | _select | ||
| Line 7: | Line 7: | ||
How to use select with option fields to create a dropdown input | How to use select with option fields to create a dropdown input | ||
===Description=== | ===Description=== | ||
| − | The <code> | + | The <code>select</code> element is used to create a drop-down list. |
The <code>name</code> attribute is needed to reference the form data after the form is submitted (if you omit the <code>name</code> attribute, no data from the drop-down list will be submitted). | The <code>name</code> attribute is needed to reference the form data after the form is submitted (if you omit the <code>name</code> attribute, no data from the drop-down list will be submitted). | ||
| 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><_input type="option"></_input></code>tags inside the <code><select></code> element define the available options in the drop-down list. | + | 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=== | ||
| − | <code>< | + | <code><nowiki><_select><_input type="option"></_input></_select></nowiki></code> |
| − | |||
| − | |||
All other valid HTML5 attributes are allowed | All other valid HTML5 attributes are allowed | ||
| Line 25: | 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> | |
| − | |||
<div> | <div> | ||
| − | + | <_select name="car"> | |
| − | + | <_input type="option" value="volvo">Volvo</_input> | |
| − | + | <_input type="option" value="saab">Saab</_input> | |
| − | + | </_select> | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
</div> | </div> | ||
| − | </syntaxhighlight>< | + | <syntaxhighlight lang="html"> |
| + | <_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> | ||
| + | </syntaxhighlight> | ||
| + | <_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> | ||
| ws-class-props | |||
|---|---|---|---|
| Line 1: | Line 1: | ||
| − | + | {{Doc 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 15:00, 22 September 2022
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>
