Select Menus

We could get along with just the form elements that we've learned so far, but it could get messy. For example, let's say we want to ask someone's title. We could do it with radio buttons, as you see at the right.

Title:
Mr. Mrs. Miss
Ms. Dr.

Ugly, isn't it? And imagine if an employee database application had a choice of one of twenty departments. You'd have a half page of radio buttons. Luckily, the <select> menu lets you compress a large number of choices into a small area.

Unlike <input>, which doesn't need a </input> tag, <select> needs a closing </select> tag. Between them will be the <option> elements, which provide the values for the menu items. Notice that the field name for the menu goes in the opening <select> tag. 

<form action="showInfo.cgi" method="post">
  Title: 
  <select name="title">
  <option value="Mr."> Mr.</option>
  <option value="Mrs."> Mrs.</option>
  <option value="Miss"> Miss</option>
  <option value="Ms."> Ms.</option>
  <option value="Dr."> Dr.</option>
  </select>
  <br />
  <input type="submit" value="Send Data">
</form>
Title:

 backTry Check Boxes Index Select Menus (cont.)next