Home Logo
Show Full Menu
Hide Full Menu

Continuing forms [List menu]

Created: 17/09/10 Views: 883 myFave Image

In this tutorial we will include list menus in our web page's form.
Now that we have learnt all of the input types and textareas from the previous tutorials we can now learn another major way for the end user to choose data in the form, and that is using the <select></select>, <optgroup></optgroup> and <option></option> tags. A list menu allows the user to select one item from a list of items.

Here is an example of a list menu
  • <select name="theList" size="1">
  • <optgroup label="Hot">
  • <option>Coffee</option>
  • <option>Tea</option>
  • <option>Hot Chocolate</option>
  • </optgroup>
  • <optgroup label="Cold">
  • <option>Cola</option>
  • <option>Water</option>
  • <option>Lemonade</option>
  • </optgroup>
  • </select>

The optgroup tag is optional. However looking at the drop down box you can see that the grouping and options are listed and you are able to select only one. If you used the multiple attribute you would be able to select a number of options by holding ctrl whilst selecting.

next tutorial: Creating our first form

There are no comments