Line 29: Line 29:
 
</div>
 
</div>
 
<div>
 
<div>
 
+
  </syntaxhighlight>
 +
  <div>
 +
  <_select name="car">
 +
<_input type="option" value="volvo">Volvo</_input>
 +
<_input type="option" value="saab">Saab</_input>
 +
</_select>
 +
</div>
 +
<syntaxhighlight lang="html">
 +
<div>
 
<_select name="car-2" placeholder="Select car">
 
<_select name="car-2" placeholder="Select car">
 
<_optgroup label="German">
 
<_optgroup label="German">
Line 43: Line 51:
  
  
</syntaxhighlight><p></p>
+
</syntaxhighlight>
 +
  <div>
 +
  <_select name="car">
 +
<_input type="option" value="volvo">Volvo</_input>
 +
<_input type="option" value="saab">Saab</_input>
 +
</_select>
 +
</div>
 +
<syntaxhighlight lang="html">
 +
<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>

Revision as of 21:51, 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>
 
<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 lang="html">

ws-page-props