DevOps:Doc/FlexForm/2.0/input/select - Revision history

Fd4138e7-8b46-4c8f-99bf-d4b738ebc295: Text replacement - "|Subject version=2.0,2.1" to "|Subject version=2.0,2.1,2.5"

2025-08-21T09:08:05Z

Text replacement - "|Subject version=2.0,2.1" to "|Subject version=2.0,2.1,2.5"

ws-class-props
← Older revision		Revision as of 11:08, 21 August 2025
Line 1:		Line 1:
	{{Csp class properties		{{Csp class properties
	\|Subject version=2.0,2.1		\|Subject version=2.0,2.1,2.5
	\|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

Maintenance script: Imported by PageSync

2025-07-15T08:34:23Z

Imported by PageSync

ws-class-props
← Older revision		Revision as of 10:34, 15 July 2025
Line 1:		Line 1:
	{{~~Doc~~ properties		{{Csp class properties
	\|Subject version=2.0,2.1		\|Subject version=2.0,2.1
	\|Doc subject=DevOps:Doc/FlexForm		\|Doc subject=DevOps:Doc/FlexForm

944f869b-8467-464e-95c7-903362952755: /* Example */ demonstrate use of 'selected'

2025-07-12T07:56:22Z

Example: demonstrate use of 'selected'

← Older revision		Revision as of 09:56, 12 July 2025
Line 31:		Line 31:
	<select name="car" placeholder="Choose a car">		<select name="car" placeholder="Choose a car">
	<option value="volvo">Volvo</option>		<option value="volvo">Volvo</option>
	<option value="saab">Saab</option>		<option value="saab" selected="selected">Saab</option>
	</select>		</select>
	</div>		</div>
Line 38:		Line 38:
	<select name="car" placeholder="Choose a car">		<select name="car" placeholder="Choose a car">
	<option value="volvo">Volvo</option>		<option value="volvo">Volvo</option>
	<option value="saab">Saab</option>		<option value="saab" selected="selected">Saab</option>
	</select>		</select>
	</div>		</div>

Admin at 20:23, 27 October 2024

2024-10-27T20:23:18Z

← Older revision		Revision as of 22:23, 27 October 2024
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><nowiki><~~input type="~~option"></~~input~~></nowiki></code>tags inside the <code><nowiki><select></nowiki></code> element define the available options in the drop-down list.		The <code><nowiki><option></option></nowiki></code>tags inside the <code><nowiki><select></nowiki></code> element define the available options in the drop-down list.

	Instead of option inputs, it's also possible to use <code>selected</code> and <code>options</code> as attributes of the select element. In this case <code>options</code> should contain a comma-separated list of options and <code>selected</code> can be used to specify which option should be selected.		Instead of option inputs, it's also possible to use <code>selected</code> and <code>options</code> as attributes of the select element. In this case <code>options</code> should contain a comma-separated list of options and <code>selected</code> can be used to specify which option should be selected.

	===Parameters===		===Parameters===
	<code><nowiki><select><~~input type="~~option"></~~input~~></select></nowiki></code>		<code><nowiki><select><option></option></select></nowiki></code>

	You can also use placeholder to have an extra, non-selectable item with a suggestion. This also allows for not sending any data from a select, when the placeholder is still selected. Making a select field also an optional field in a form. See example 1.		You can also use placeholder to have an extra, non-selectable item with a suggestion. This also allows for not sending any data from a select, when the placeholder is still selected. Making a select field also an optional field in a form. See example 1.
Line 30:		Line 30:
	<div>		<div>
	<select name="car" placeholder="Choose a car">		<select name="car" placeholder="Choose a car">
	<~~input type="~~option" value="volvo">Volvo</~~input~~>		<option value="volvo">Volvo</option>
	<~~input type="~~option" value="saab">Saab</~~input~~>		<option value="saab">Saab</option>
	</select>		</select>
	</div>		</div>
Line 37:		Line 37:
	<div>		<div>
	<select name="car" placeholder="Choose a car">		<select name="car" placeholder="Choose a car">
	<~~input type="~~option" value="volvo">Volvo</~~input~~>		<option value="volvo">Volvo</option>
	<~~input type="~~option" value="saab">Saab</~~input~~>		<option value="saab">Saab</option>
	</select>		</select>
	</div>		</div>
Line 46:		Line 46:
	<select id="dino-select">		<select id="dino-select">
	<optgroup label="Theropods">		<optgroup label="Theropods">
	<~~input type="~~option" value="Tyrannosaurus">Tyrannosaurus</~~input~~>		<option value="Tyrannosaurus">Tyrannosaurus</option>
	<~~input type="~~option" value="Velociraptor">Velociraptor</~~input~~>		<option value="Velociraptor">Velociraptor</option>
	<~~input type="~~option" value="Deinonychus">Deinonychus</~~input~~>		<option value="Deinonychus">Deinonychus</option>
	</optgroup>		</optgroup>
	<optgroup label="Sauropods">		<optgroup label="Sauropods">
	<~~input type="~~option" value="Diplodocus">Diplodocus</~~input~~>		<option value="Diplodocus">Diplodocus</option>
	<~~input type="~~option" value="Saltasaurus">Saltasaurus</~~input~~>		<option value="Saltasaurus">Saltasaurus</option>
	<~~input type="~~option" value="Apatosaurus">Apatosaurus</~~input~~>		<option value="Apatosaurus">Apatosaurus</option>
	</optgroup>		</optgroup>
	</select>		</select>
Line 60:		Line 60:
	<select id="dino-select">		<select id="dino-select">
	<optgroup label="Theropods">		<optgroup label="Theropods">
	<~~input type="~~option" value="Tyrannosaurus">Tyrannosaurus</~~input~~>		<option value="Tyrannosaurus">Tyrannosaurus</option>
	<~~input type="~~option" value="Velociraptor">Velociraptor</~~input~~>		<option value="Velociraptor">Velociraptor</option>
	<~~input type="~~option" value="Deinonychus">Deinonychus</~~input~~>		<option value="Deinonychus">Deinonychus</option>
	</optgroup>		</optgroup>
	<optgroup label="Sauropods">		<optgroup label="Sauropods">
	<~~input type="~~option" value="Diplodocus">Diplodocus</~~input~~>		<option value="Diplodocus">Diplodocus</option>
	<~~input type="~~option" value="Saltasaurus">Saltasaurus</~~input~~>		<option value="Saltasaurus">Saltasaurus</option>
	<~~input type="~~option" value="Apatosaurus">Apatosaurus</~~input~~>		<option value="Apatosaurus">Apatosaurus</option>
	</optgroup>		</optgroup>
	</select>		</select>

Charlot at 09:22, 3 April 2023

2023-04-03T09:22:37Z

← Older revision		Revision as of 11:22, 3 April 2023
Line 21:		Line 21:

	You can also use placeholder to have an extra, non-selectable item with a suggestion. This also allows for not sending any data from a select, when the placeholder is still selected. Making a select field also an optional field in a form. See example 1.		You can also use placeholder to have an extra, non-selectable item with a suggestion. This also allows for not sending any data from a select, when the placeholder is still selected. Making a select field also an optional field in a form. See example 1.

			Select values have by default comma separated values when adding to a Template. You can specify a different separator using the argument '''separator'''. e.g. separator=";".

	All other valid HTML5 attributes are allowed		All other valid HTML5 attributes are allowed

Charlot: User:Charlot

2023-03-31T20:16:59Z

User:Charlot

ws-class-props
← Older revision		Revision as of 22:16, 31 March 2023
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

Charlot at 07:55, 17 February 2023

2023-02-17T07:55:02Z

← Older revision		Revision as of 09:55, 17 February 2023
Line 20:		Line 20:
	<code><nowiki><select><input type="option"></input></select></nowiki></code>		<code><nowiki><select><input type="option"></input></select></nowiki></code>

	You can also use placeholder to have an extra, non-selectable item with a suggestion. See example 1.		You can also use placeholder to have an extra, non-selectable item with a suggestion. This also allows for not sending any data from a select, when the placeholder is still selected. Making a select field also an optional field in a form. See example 1.

	All other valid HTML5 attributes are allowed		All other valid HTML5 attributes are allowed

Charlot at 07:53, 17 February 2023

2023-02-17T07:53:29Z

← Older revision		Revision as of 09:53, 17 February 2023
Line 19:		Line 19:
	===Parameters===		===Parameters===
	<code><nowiki><select><input type="option"></input></select></nowiki></code>		<code><nowiki><select><input type="option"></input></select></nowiki></code>

			You can also use placeholder to have an extra, non-selectable item with a suggestion. See example 1.

	All other valid HTML5 attributes are allowed		All other valid HTML5 attributes are allowed
Line 25:		Line 27:
	<p>Select a car:</p>		<p>Select a car:</p>
	<div>		<div>
	<select name="car">		<select name="car" placeholder="Choose a car">
	<input type="option" value="volvo">Volvo</input>		<input type="option" value="volvo">Volvo</input>
	<input type="option" value="saab">Saab</input>		<input type="option" value="saab">Saab</input>
Line 32:		Line 34:
	</syntaxhighlight>		</syntaxhighlight>
	<div>		<div>
	<select name="car">		<select name="car" placeholder="Choose a car">
	<input type="option" value="volvo">Volvo</input>		<input type="option" value="volvo">Volvo</input>
	<input type="option" value="saab">Saab</input>		<input type="option" value="saab">Saab</input>

Ebc16062-dd09-4928-8cf3-821f492b0c44 at 08:52, 10 February 2023

2023-02-10T08:52:31Z

← Older revision		Revision as of 10:52, 10 February 2023
Line 14:		Line 14:

	The <code><nowiki><input type="option"></input></nowiki></code>tags inside the <code><nowiki><select></nowiki></code> element define the available options in the drop-down list.		The <code><nowiki><input type="option"></input></nowiki></code>tags inside the <code><nowiki><select></nowiki></code> element define the available options in the drop-down list.

			Instead of option inputs, it's also possible to use <code>selected</code> and <code>options</code> as attributes of the select element. In this case <code>options</code> should contain a comma-separated list of options and <code>selected</code> can be used to specify which option should be selected.

	===Parameters===		===Parameters===
Line 64:		Line 66:
	</optgroup>		</optgroup>
	</select>		</select>

			<syntaxhighlight lang="html">
			<select name="Test" selected="C" options="A,B,C,D,E" />
			</syntaxhighlight>

			<select name="Test" selected="C" options="A,B,C,D,E" />

Charlot at 09:20, 3 January 2023

2023-01-03T09:20:36Z

← Older revision		Revision as of 11:20, 3 January 2023
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><nowiki><input type="option"></input></nowiki></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><nowiki><select></nowiki></code> element define the available options in the drop-down list.

	===Parameters===		===Parameters===