How to add List boxes to the HTML Forms

You can have a list box of items on your forms, either in a drop down format or as a fixed list. Here's what the two look like on a web page:



The HTML code for a dropdown list, the default, is this:

<SELECT>

<OPTION Value="Under 16">Under 16</OPTION>
<OPTION Value="16 to 25">16 to 25</OPTION>
<OPTION Value="26 to 40">26 to 40</OPTION>
<OPTION Value="40 to 60">40 to 60</OPTION>
<OPTION Value="Over 60">Over 60</OPTION>

</SELECT>

List boxes are called Select boxes in HTML and use the <SELECT> tag to set them up.

Each item in your list needs an OPTION tag.

<OPTION Value="Under 16">Under 16</OPTION>

You don't need the closing OPTION tag, if you don't want it, but it is here for the sake of neatness. The text you want to appear in the list, the text that people see and click on, goes after the first right pointy bracket (>). The Value is not strictly needed, either. When the form is submitted, the option the user selected will be returned to you. If the Value attribute is missing, the text itself will be returned.

If you want one of the items in your list selected by default, just choose the item and add SELECTED as an attribute. Like this:

<OPTION Value="Under 16" SELECTED>Under 16

The only difference between the drop down list and the Fixed list is one attribute in the <SELECT> tag: SIZE.

<SELECT SIZE="5">

The SIZE is the number of item in your list. If you add this attribute, you'll get a Fixed list instead of a drop down list.

If you want your users to be able to choose more than one item from the list, the attribute to add to the SELECT tag is MULTIPLE

<SELECT SIZE="5" MULTIPLE>

A user can then hold down the CTRL key and click to select more than one item.

You can add CSS styles to your list boxes, of course. Here's a style that sets font properties using the HTML selector:

SELECT {

font-family: Arial, Helvetica, sans-serif;
font-size: 18px;

}

Now everything with the HTML SELECT tag will have its font and font size changed.