Option Lists

Option lists allow the user to choose from a selection of values. You define the values of choice in the SELECT statement of the form. Option lists can be drop down list boxes, like this:

<SELECT NAME=platforms> <OPTION>Windows <OPTION>Macintosh <OPTION>UNIX </SELECT>

Simple listboxes, like this:

<SELECT NAME=platforms SIZE=3> <OPTION>Windows <OPTION>Macintosh <OPTION>UNIX </SELECT>

Or scrolling listboxes, like this:

<SELECT NAME=platforms SIZE=3> <OPTION>Windows <OPTION>Macintosh <OPTION SELECTED>UNIX <OPTION>Amiga <OPTION>Next <OPTION>AppleII </SELECT>

Whether or not an option list is displayed as a drop-down listbox, a simple listbox, or a scrolling listbox is determined by the SIZE keyword in the SELECT tag. SIZE refers to the number of rows visible to the user at once. If the SIZE is one (the default), a drop-down listbox will appear. If the SIZE is greater than one, and the number of options is less than or equal to the SIZE, a simple list box is displayed. If the SIZE is greater than one, but the number of options available to the user is greater than the SIZE, a scroll bar will appear to the right of the listbox to allow for scrolling through the options.

Using the SELECTED keyword after OPTION (as for the UNIX option in the above example) causes that option to be highlighted. By default, only one of a list of options is selectable, however this can be overridden by including the MULTI keyword in the SELECT tag.

Images as Submit Buttons

This form uses an image in place of the "submit" tag, providing equivalent functionality. Note that all the common attributes modifying the way the image is displayed are supported, such as ALIGN, WIDTH, HEIGHT, and BORDER. The forms processor also returns the x and y coordinates of where on the button you clicked.

Enter your name:

<INPUT TYPE=image WIDTH=88 HEIGHT=31 BORDER=0 SRC="submit.jpg">

We hope you have found these HTML forms tips helpful, and useful. If you have any questions or suggestions for us, please use the comments page, or the email button to let us know. Thanks for choosing the Internet Brothers as your source for HTML assistance, please come back soon.

         

To print a copy of an Internet Brothers tip or article, simply take a photograph of your computer screen, develop the film and have the photo enlarged to the font size of your choice.

The Internet Brothers have implemented hierarchical menus for navigation. Easier done than said.

The hierarchical menus were created using Peter Belesis' © Dynomat DHTML scripting tool from Webreference. Give them a visit, you'll like what you learn.