Multiple Select panel

Use a multiple select panel when you want a user to choose one or more 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 size attribute determines how many options will be visible to the user at one time.
The multiple attribute sets the select field to the multiple state as opposed to the default menu state.
The value attributes for 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="q6" size="5" multiple="multiple">
  <option value="option 1">Option 1</option>
  <option value="option 2">Option 2</option>
  <option value="option 3">Option 3</option>
  <option value="option 4">Option 4</option>
  <option value="option 5">Option 5</option>
  <option value="option 6">Option 6</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="q6">
<span class="question">Multiple select panel:</span>
<span class="answer">
<select id="q6" name="q6" size="5" multiple="multiple">
  <option value="option 1">Option 1</option>
  <option value="option 2">Option 2</option>
  <option value="option 3">Option 3</option>
  <option value="option 4">Option 4</option>
  <option value="option 5">Option 5</option>
  <option value="option 6">Option 6</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="q6" class="required">
<span class="question">Multiple select panel <span class="required-flag">(required)</span>:</span>
<span class="answer">
<select id="q6" name="q6" size="5" multiple="multiple">
  <option value="option 1">Option 1</option>
  <option value="option 2">Option 2</option>
  <option value="option 3">Option 3</option>
  <option value="option 4">Option 4</option>
  <option value="option 5">Option 5</option>
  <option value="option 6">Option 6</option>
</select>
</span>
</label>