Line 2: | Line 2: | ||
option | option | ||
===Type=== | ===Type=== | ||
− | + | input | |
===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. | ||
Line 9: | Line 9: | ||
===Parameters=== | ===Parameters=== | ||
− | + | input type="option". All valid HTML5 attributes are supported. | |
There is one 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. | There is one 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. | ||
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"> |
− | < | + | <input type="option" value="">--Please choose an option--</input> |
− | < | + | <input type="option" value="dog">Dog</input> |
− | < | + | <input type="option" value="cat">Cat</input> |
− | < | + | <input type="option" value="hamster">Hamster</input> |
− | < | + | <input type="option" value="parrot">Parrot</input> |
− | < | + | <input type="option" value="spider">Spider</input> |
− | < | + | <input type="option" value="goldfish">Goldfish</input> |
− | </ | + | </select> |
</syntaxhighlight> | </syntaxhighlight> | ||
− | < | + | <label for="pet-select">Choose a pet:</label> |
− | < | + | <select name="pets" id="pet-select"> |
− | < | + | <input type="option" value="">--Please choose an option--</input> |
− | < | + | <input type="option" value="dog">Dog</input> |
− | < | + | <input type="option" value="cat">Cat</input> |
− | < | + | <input type="option" value="hamster">Hamster</input> |
− | < | + | <input type="option" value="parrot">Parrot</input> |
− | < | + | <input type="option" value="spider">Spider</input> |
− | < | + | <input type="option" value="goldfish">Goldfish</input> |
− | </ | + | </select> |
+ | |||
+ | or use the compliant HTML version : | ||
+ | |||
+ | <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> | ||
+ | <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. |
Revision as of 23:10, 13 December 2022
Name
option
Type
input
Synopsis
How to render an option input field. Mostly used within the input select fields.
Description
The Missing value attribute.
</select> </syntaxhighlight>
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.