1. Computing

Discuss in my forum

Using the Select and Option Tags

HTML Forms Tutorial

By

The <select> and <option> tags create drop-down menus for your forms.

<select></select>

The select tag, like the checkbox and radio button input tags allows your readers to choose from multiple options. However, because the options are all stored in a drop-down box, they do not take up as much screen real estate as the radio buttons and checkboxes.

The select tag has several attributes, and the closing </select> tag is required.

  • name - names the input information
  • size - how many items in the list are showing on the screen at once
  • multiple - the reader can choose multiple items

The tricky part of the <select> tag is that it needs a second tag to include the elements in the list: the <option> tag.

<option></option>

The option tag has two important attributes:

  • value - if this is not included, the form will send the server whatever text is in the <option> tag as the value
  • selected - if this is not included, the form will display the first element listed as the default choice.

Here are three types of select lists:

Basic Select List

<select name="1" size="1">
  <option>one</option>
  <option>two</option>
  <option>three</option>
</select>

Basic Multiple Select List

<select name="2" multiple size="1">
  <option>one</option>
  <option>two</option>
  <option>three</option>
</select>

Multiple Select with Multiple Showing

<select name="3" multiple size="2">
  <option value="1">one</option>
  <option value="2">two</option>
  <option value="3">three</option>
</select>

This article is part of the HTML Forms Tutorial

  1. About.com
  2. Computing
  3. Web Design / HTML
  4. HTML and XHTML
  5. XHTML
  6. Forms
  7. HTML Form Tags
  8. Select Tags and Option Tags - HTML Forms Tutorial - Using Select Tags and Option Tags

©2014 About.com. All rights reserved.