Select Menus (continued)

A Shortcut

If you leave out the value= attribute in your <option> elements, the browser will use the text after the <option> as the value for that entry. Thus, the example on the previous page could just as easily be written like this: 

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

If the value you're sending to the server is the same as the value you're displaying to user, there's no reason not to use this shortcut. If you want to show the user a product name, but send a product number to the server, you'll have to put the value= inside the option, as in this example. You'll note that we've added the selected attribute (highlighted in red) to the choice we want to show up as pre-selected. 

<form action="showInfo.cgi" method="post">
  What would you like to purchase? <br>
  <select name="accessory">
  <option value="DB-149"> Duffel Bag</option>
  <option value="CC-217" selected="selected"> Computer Carry-all</option>
  <option value="BP-865"> Backpack
  </select>
  <br />
  <input type="submit" value="Send Data" />
</form>
What would you like to purchase?

 backSelect Menus Index Select Size/Multiplenext