VisualWikitext
Line 3: Line 3:
 
radio
 
radio
 
===Type===
 
===Type===
−
_input
+
_select
 
===Synopsis===
 
===Synopsis===
 
How to use select with option fields to create a dropdown input
 
How to use select with option fields to create a dropdown input
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"></code>tags inside the <code><select></code> element define the available options in the drop-down list.
+
The <code><_input type="option"></_input></code>tags inside the <code><select></code> element define the available options in the drop-down list.
  
 
===Parameters===
 
===Parameters===
−
_input type="radio"
+
<code><_select></_select></code>
 +
 
 +
<code><_input type="option"></_input></code>
  
 
All other valid HTML5 attributes are allowed
 
All other valid HTML5 attributes are allowed
 
===Example===
 
===Example===
 
<syntaxhighlight lang="html">
 
<syntaxhighlight lang="html">
−
<p>Select a maintenance drone:</p>
+
<p>Select a car:</p>
 
<div>
 
<div>
−
   <_input type="radio" id="huey" name="drone" value="huey" />
+
   <_select name="car">
−
   <_label for="huey">Huey</_label>
+
    <_input type="option" value="volvo">Volvo</_input>
 +
    <_input type="option" value="saab">Saab</_input>
 +
   </_select>
 
</div>
 
</div>
 +
  
 
<div>
 
<div>
−
   <_input type="radio" id="dewey" name="drone" value="dewey" checked="checked" />
+
   <_select name="car-2" placeholder="Select car">
−
  <_label for="dewey">Dewey</_label>
+
    <_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>
 
</div>
  
−
<div>
+
</syntaxhighlight><p></p>
−
  <_input type="radio" id="louie" name="drone" value="louie" />
 
−
  <_label for="louie">Louie</_label>
 
−
</div>
 
−
</syntaxhighlight><p>Select a maintenance drone:</p><div>
 
−
  <_input type="radio" id="huey" name="drone" value="huey" />
 
−
  <_label for="huey">Huey</_label>
 
−
</div><div>
 
−
  <_input type="radio" id="dewey" name="drone" value="dewey" checked="checked" />
 
−
  <_label for="dewey">Dewey</_label>
 
−
</div><div>
 
−
  <_input type="radio" id="louie" name="drone" value="louie" />
 
−
  <_label for="louie">Louie</_label>
 
−
</div>
 
−
===Note===
 
−
Radio buttons are similar to checkboxes, but with an important distinction — radio buttons are grouped into a set in which only one radio button can be selected at a time, whereas checkboxes allow you to turn single values on and off. Where multiple controls exist, radio buttons allow one to be selected out of them all, whereas checkboxes allow multiple values to be selected.
 
−
===Links===
 
−
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio
 

Revision as of 21:35, 23 March 2022

Name

radio

Type

_select

Synopsis

How to use select with option fields to create a dropdown input

Description

The

Missing value attribute.

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

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