Select menu

Use a select menu when you want a user to choose one out of a number of predefined options.

The select field is a container for a number of options.
The name attribute is used by the form processing script to label and identify the selected option.
The value attributes of the options are the text sent by the form processing script, while the text between the open and close option tags is the text the users sees.

<select name="q5">
  <option value="Option one">Option one</option>
  <option value="Option two">Option two</option>
  <option value="Option three">Option three</option>
</select>

To comply with accessibility guidelines, the field must be explicitly and uniquely identified and labeled, and to work with the template style sheets, spans and classes must be added.

<label for="q5">
<span class="question">Select menu:</span>
<span class="answer">
  <select id="q5" name="q5">
	<option value="Option one">Option one</option>
	<option value="Option two">Option two</option>
	<option value="Option three">Option three</option>
  </select>
</span>
</label>

To enable validation for this type of field you need to add the required class to the enclosing label and a span of class required-flag to the question span.

<label for="q5" class="required">
<span class="question">Select menu<span class="required-flag">(required)</span>:</span>
<span class="answer">
  <select id="q5" name="q5">
	<option value="Option one">Option one</option>
	<option value="Option two">Option two</option>
	<option value="Option three">Option three</option>
  </select>
</span>
</label>