VisualWikitext
No edit summary
m (Text replacement - "{{Doc properties" to "{{Csp class properties")
 
(17 intermediate revisions by 4 users not shown)
Line 1: Line 1:


===Name===
===Name===
radio
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><_select></code> element is used to create a drop-down list.
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><_select></_select></code>
<code><nowiki><_select><_input type="option"></_input></_select></nowiki></code>
 
<code><_input type="option"></_input></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">
    <_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>
 
<div>
<div>
  <_select name="car-2" placeholder="Select car">
<_select name="car">
    <_optgroup label="German">
<_input type="option" value="volvo">Volvo</_input>
      <_input type="option" value="bmw">BMW</_input>
<_input type="option" value="saab">Saab</_input>
      <_input type="option" value="mercedes" disabled="disabled">Mercedes</_input>
</_select>
    <_optgroup>
    <_optgroup label="French">
      <_input type="option" value="renault">Renault</_input>
      <_input type="option" value="peugot">Peugot</_input>
    <_optgroup>
  </_select>
</div>
</div>


</syntaxhighlight><p></p>
<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:
 
{{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:
{{Doc properties
 
|Subject version=1.0.0
|Doc subject=DevOps:Doc/FlexForm
}}

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>

Retrieved from "https://open-csp.org/index.php?title=DevOps:Doc/FlexForm/1.0/input/select&oldid=3597"