input/select


===Name===
select (dropdown)
===Type===
select
===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><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.

===Parameters===
<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.

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
===Example===
<syntaxhighlight lang="html">
<p>Select a car:</p>
<div>
    <select name="car" placeholder="Choose a car">
		<option value="volvo">Volvo</option>
		<option value="saab">Saab</option>
    </select>
</div>
</syntaxhighlight>
<div>
<select name="car" placeholder="Choose a car">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</select>
</div>

<syntaxhighlight lang="html">
<label for="dino-select">Choose a dinosaur:</label>
<select id="dino-select">
    <optgroup label="Theropods">
        <option value="Tyrannosaurus">Tyrannosaurus</option>
        <option value="Velociraptor">Velociraptor</option>
        <option value="Deinonychus">Deinonychus</option>
    </optgroup>
    <optgroup label="Sauropods">
        <option value="Diplodocus">Diplodocus</option>
        <option value="Saltasaurus">Saltasaurus</option>
        <option value="Apatosaurus">Apatosaurus</option>
    </optgroup>
</select>
</syntaxhighlight>
<label for="dino-select">Choose a dinosaur:</label>
<select id="dino-select">
    <optgroup label="Theropods">
        <option value="Tyrannosaurus">Tyrannosaurus</option>
        <option value="Velociraptor">Velociraptor</option>
        <option value="Deinonychus">Deinonychus</option>
    </optgroup>
    <optgroup label="Sauropods">
        <option value="Diplodocus">Diplodocus</option>
        <option value="Saltasaurus">Saltasaurus</option>
        <option value="Apatosaurus">Apatosaurus</option>
    </optgroup>
</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" />