(One intermediate revision by the same user not shown)
Line 40: Line 40:
 
<_select id="dino-select">
 
<_select id="dino-select">
 
     <optgroup label="Theropods">
 
     <optgroup label="Theropods">
         <_input type="option">Tyrannosaurus</_input>
+
         <_input type="option" value="Tyrannosaurus">Tyrannosaurus</_input>
         <_input type="option">Velociraptor</_input>
+
         <_input type="option" value="Velociraptor">Velociraptor</_input>
         <_input type="option">Deinonychus</_input>
+
         <_input type="option" value="Deinonychus">Deinonychus</_input>
 
     </optgroup>
 
     </optgroup>
 
     <optgroup label="Sauropods">
 
     <optgroup label="Sauropods">
         <_input type="option">Diplodocus</_input>
+
         <_input type="option" value="Diplodocus">Diplodocus</_input>
         <_input type="option">>Saltasaurus</_input>
+
         <_input type="option" value="Saltasaurus">Saltasaurus</_input>
         <_input type="option">Apatosaurus</_input>
+
         <_input type="option" value="Apatosaurus">Apatosaurus</_input>
 
     </optgroup>
 
     </optgroup>
 
</_select>
 
</_select>
Line 54: Line 54:
 
<_select id="dino-select">
 
<_select id="dino-select">
 
     <optgroup label="Theropods">
 
     <optgroup label="Theropods">
         <_input type="option">Tyrannosaurus</_input>
+
         <_input type="option" value="Tyrannosaurus">Tyrannosaurus</_input>
         <_input type="option">Velociraptor</_input>
+
         <_input type="option" value="Velociraptor">Velociraptor</_input>
         <_input type="option">Deinonychus</_input>
+
         <_input type="option" value="Deinonychus">Deinonychus</_input>
 
     </optgroup>
 
     </optgroup>
 
     <optgroup label="Sauropods">
 
     <optgroup label="Sauropods">
         <_input type="option">Diplodocus</_input>
+
         <_input type="option" value="Diplodocus">Diplodocus</_input>
         <_input type="option">>Saltasaurus</_input>
+
         <_input type="option" value="Saltasaurus">Saltasaurus</_input>
         <_input type="option">Apatosaurus</_input>
+
         <_input type="option" value="Apatosaurus">Apatosaurus</_input>
 
     </optgroup>
 
     </optgroup>
 
</_select>
 
</_select>
ws-class-props
Line 5: Line 5:
 
|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 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>