(Admin) |
|||
| Line 1: | Line 1: | ||
| + | ===Name=== | ||
| + | radio | ||
| + | ===Type=== | ||
| + | _input | ||
| + | ===Synopsis=== | ||
| + | How to use select with option fields to create a dropdown input | ||
| + | ===Description=== | ||
| + | The <code><_select></code> element is used to create a drop-down list. | ||
| + | |||
| + | The <code>name</code> attribute is needed to reference the form data after the form is submitted (if you omit the <code>name</code> attribute, no data from the drop-down list will be submitted). | ||
| + | |||
| + | 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. | ||
| + | |||
| + | ===Parameters=== | ||
| + | _input type="radio" | ||
| + | |||
| + | All other valid HTML5 attributes are allowed | ||
| + | ===Example=== | ||
| + | <syntaxhighlight lang="html"> | ||
| + | <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> | ||
| + | </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:18, 23 March 2022
Name
radio
Type
_input
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">tags inside the <select> element define the available options in the drop-down list.
Parameters
_input type="radio"
All other valid HTML5 attributes are allowed
Example
<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>
Select a maintenance drone:
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
