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>&lt;nowiki&gt;<_input type="option"></_input>&lt;/nowiki&gt;</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>&lt;nowiki&gt;<_select><_input type="option"></_input></_select>&lt;/nowiki&gt;</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

Revision as of 22:42, 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>

ws-page-props