HTML - Select Fields

HTML select fields provide essentially the same functionality as HTML Checkbox Fields. They allow the user to select one or more values from a pre-determined series of options.

Incorporating a select field into a web page is done using the <select> tag. List values are then added to the field using the <option> tag, similar to how list items <li> are added to ordered list elements (<ol>).

<select name="selectionField"> 
  <option value="CA" >California -- CA </option>
  <option value="CO" >Colorado -- CO</option>
  <option value="CN" >Connecticut -- CN</option>
</select>

HTML Drop Down List:

By default, select fields, popularly called drop down lists, only allow the user to choose a single value. This behavior and appearance may be changed by adjusting the multiple and size attributes as demonstrated below.

<select size="3" name="selectionField" multiple="yes" > 
  <option value="CA" >California -- CA </option>
  <option value="CO" >Colorado -- CO</option>
  <option value="CN" >Connecticut -- CN</option>
</select>

HTML Selection Element:

With the above settings, the user is now able to select multiple values by pressing and holding the Control (ctrl) key and clicking each value.

HTML - Disabling Selection Fields

Disabling a selection field is achieved by setting the disabled attribute to "yes". But before doing that, you should set at least one of the values to be selected. Doing so renders a read-only selection field on the page that can inform your users of their selections without allowing them to alter the selection.

<select size="3" name="selectionField" multiple="yes" disabled="yes"> 
  <option value="CA" >California -- CA </option>
  <option selected value="CO" >Colorado -- CO</option>
  <option value="CN" >Connecticut -- CN</option>
</select>

HTML Read-Only Selections:

• Go Back
• Continue

Found Something Wrong in this Lesson?

Report a Bug or Comment on This Lesson - Your input is what keeps Tizag improving with time!