Line 23: | 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> | ||
+ | <div> | ||
+ | <_select name="car-2" placeholder="Select car"> | ||
+ | <_optgroup label="German"> | ||
+ | <_input type="option" value="bmw">BMW</_input> | ||
+ | <_input type="option" value="mercedes" disabled="disabled">Mercedes</_input> | ||
+ | </_optgroup> | ||
+ | <_optgroup label="French"> | ||
+ | <_input type="option" value="renault">Renault</_input> | ||
+ | <_input type="option" value="peugot">Peugot</_input> | ||
+ | </_optgroup> | ||
+ | </_select> | ||
+ | </div> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</syntaxhighlight><p></p> | </syntaxhighlight><p></p> |
Revision as of 21:49, 23 March 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>
<div>
<_select name="car-2" placeholder="Select car">
<_optgroup label="German">
<_input type="option" value="bmw">BMW</_input>
<_input type="option" value="mercedes" disabled="disabled">Mercedes</_input>
</_optgroup>
<_optgroup label="French">
<_input type="option" value="renault">Renault</_input>
<_input type="option" value="peugot">Peugot</_input>
</_optgroup>
</_select>
</div>