Free computer Tutorials
HOME Stay at Home and Learn

Web Design Tutorials
 
Computer Tutorials List

Beginners Computing
Microsoft Word
Microsoft Excel
Web Design
Cascading Style Sheets
Javascript
Visual Basic .NET
Beginners PHP

Excel 2007
Which Qualifications?

 

 

 
 

How to Add a HTML List to your 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 Two HTML List Boxes

To add a List to your form or web page using your HTML Editor, do this:

  • From the menu bar, click on Add
  • From the drop down list, click on Add a Form Element
  • From the sub menu, click Dropdown/Fixed List
  • The following dialogue box appears:

The List Dialogue Box

  • Click either of the option buttons at the top: Drop down list or Fixed list
  • Delete the default text "You List Items Here" from the text box
  • Type in an item for your list
  • Then click the button "Add Item To Your List
  • The item appears in the box below. The text in text box will disappear, ready for another entry
  • If you want to delete an item from your list, click on the item you want to remove, then click the button "Remove an Item"
  • When you're done, click OK

The image below shows what your dialogue box might look like before you click OK:

A completed Dialogue Box

When you click OK, the code will look like this:

<SELECT NAME = List1 STYLE = "Width: 100">
<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. The NAME and STYLE are not needed, and you could just have this:

<SELECT>
<OPTION Value = Under 16>Under 16</OPTION>
<OPTION Value = 16 to 25>16 to 25</OPTION>
</SELECT>

Change the NAME and Width values to anything you like.

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's here for neatness sake. 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, which is the default.

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>

 

In the final part of this section, we'll take a look at other HTML form elements.

 

<-- Back One Page Move on to the Next Part -->

<--Back to the Web Design Contents Page

View all our Home Study Computer Courses