input/select

Name

select (dropdown)

Type

select

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"></input>tags inside the <select> element define the available options in the drop-down list.

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

Parameters

<select><input type="option"></input></select>

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

<p>Select a car:</p>
<div>
    <select name="car" placeholder="Choose a car">
		<input type="option" value="volvo">Volvo</input>
		<input type="option" value="saab">Saab</input>
    </select>
</div>

Choose a carVolvo Saab

<label for="dino-select">Choose a dinosaur:</label>
<select id="dino-select">
    <optgroup label="Theropods">
        <input type="option" value="Tyrannosaurus">Tyrannosaurus</input>
        <input type="option" value="Velociraptor">Velociraptor</input>
        <input type="option" value="Deinonychus">Deinonychus</input>
    </optgroup>
    <optgroup label="Sauropods">
        <input type="option" value="Diplodocus">Diplodocus</input>
        <input type="option" value="Saltasaurus">Saltasaurus</input>
        <input type="option" value="Apatosaurus">Apatosaurus</input>
    </optgroup>
</select>

Choose a dinosaur: <optgroup label="Theropods"> Tyrannosaurus Velociraptor Deinonychus </optgroup> <optgroup label="Sauropods"> Diplodocus Saltasaurus Apatosaurus </optgroup>

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

ABCDE