| (8 intermediate revisions by the same user not shown) | |||
| Line 2: | Line 2: | ||
option | option | ||
===Type=== | ===Type=== | ||
| − | + | option | |
===Synopsis=== | ===Synopsis=== | ||
How to render an option input field. Mostly used within the input select fields. | How to render an option input field. Mostly used within the input select fields. | ||
===Description=== | ===Description=== | ||
| − | The <option> HTML element is used to define an item contained in a <select>, an <optgroup>, or a <datalist> element. As such, <option> can represent menu items in popups and other lists of items in an HTML document. | + | The < option > HTML element is used to define an item contained in a < select >, an < optgroup >, or a < datalist > element. As such, < option > can represent menu items in popups and other lists of items in an HTML document. |
===Parameters=== | ===Parameters=== | ||
| − | + | < option >. All valid HTML5 attributes are supported. | |
| − | There is | + | There is a specific FlexForm parameter '''nohtmldecode'''. By default all values of an option input will be html decoded to get rid of special characters. To turn this off just add '''nohtmldecode''' as an argument to the option field. Options have by default comma separated values when adding to a Template. You can specify a different separator using the argument '''separator'''. e.g. separator=";". |
| Line 16: | Line 16: | ||
Using options with select: | Using options with select: | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
| − | < | + | <label for="pet-select">Choose a pet:</label> |
| − | < | + | <select name="pets" id="pet-select"> |
| − | < | + | <option value="">--Please choose an option--</option> |
| − | < | + | <option value="dog">Dog</option> |
| − | < | + | <option value="cat">Cat</option> |
| − | < | + | <option value="hamster">Hamster</option> |
| − | < | + | <option value="parrot">Parrot</option> |
| − | < | + | <option value="spider">Spider</option> |
| − | < | + | <option value="goldfish">Goldfish</option> |
| − | </ | + | </select> |
</syntaxhighlight> | </syntaxhighlight> | ||
| − | < | + | |
| − | < | + | |
| − | < | + | <label for="pet-select">Choose a pet:</label> |
| − | < | + | <select name="pets" id="pet-select"> |
| − | < | + | <option value="">--Please choose an option--</option> |
| − | < | + | <option value="dog">Dog</option> |
| − | < | + | <option value="cat">Cat</option> |
| − | < | + | <option value="hamster">Hamster</option> |
| − | < | + | <option value="parrot">Parrot</option> |
| − | </ | + | <option value="spider">Spider</option> |
| + | <option value="goldfish">Goldfish</option> | ||
| + | </select> | ||
| + | |||
===Note=== | ===Note=== | ||
See also '''input/select''' from the menu on the right | See also '''input/select''' from the menu on the right | ||
===Links=== | ===Links=== | ||
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option for all the details. | See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option for all the details. | ||
| ws-class-props | |||
|---|---|---|---|
| Line 1: | Line 1: | ||
{{Doc properties | {{Doc properties | ||
| − | |Subject version=2.0 | + | |Subject version=2.0,2.1 |
|Doc subject=DevOps:Doc/FlexForm | |Doc subject=DevOps:Doc/FlexForm | ||
|Doc parent=DevOps:Doc/FlexForm/1.0/input | |Doc parent=DevOps:Doc/FlexForm/1.0/input | ||
Latest revision as of 11:21, 3 April 2023
Name
option
Type
option
Synopsis
How to render an option input field. Mostly used within the input select fields.
Description
The < option > HTML element is used to define an item contained in a < select >, an < optgroup >, or a < datalist > element. As such, < option > can represent menu items in popups and other lists of items in an HTML document.
Parameters
< option >. All valid HTML5 attributes are supported. There is a specific FlexForm parameter nohtmldecode. By default all values of an option input will be html decoded to get rid of special characters. To turn this off just add nohtmldecode as an argument to the option field. Options have by default comma separated values when adding to a Template. You can specify a different separator using the argument separator. e.g. separator=";".
Example
Using options with select:
<label for="pet-select">Choose a pet:</label>
<select name="pets" id="pet-select">
<option value="">--Please choose an option--</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
<option value="hamster">Hamster</option>
<option value="parrot">Parrot</option>
<option value="spider">Spider</option>
<option value="goldfish">Goldfish</option>
</select>
Note
See also input/select from the menu on the right
Links
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option for all the details.
