Information Technology Services Header

HTML Tags for Working with Forms

The following is a basic list of the various types of HTML tags available for online forms.  Each example is set so that you may complete the form, enter your email address, and receive the output.

TEXT BOX:
<INPUT TYPE="text" NAME="text1" SIZE="30" MAXLENGTH="30">

This is the tag used in every example in the FormServlet documentation.  Creates a single blank with a set length.  You can set both the size of the text box and the maximum length of the input.  These do not have to be the same value.

 

Your Name

 

Email Address

 

 

CHECKBOX:
<INPUT TYPE="checkbox" NAME="check1" VALUE="Apples">Apples
< INPUT TYPE="checkbox" NAME="check2" VALUE="Bananas">Bananas
< INPUT TYPE="checkbox" NAME="check3" VALUE="Oranges">Oranges

This tag should be used if more than one multiple-choice selection is possible.  FormServlet will pass along the VALUE of each checkbox the user checks.  Note that the NAME is different for each.  This allows for multiple selection.

  Apples
 

  Bananas
 

  Oranges
 

 

Email Address

 

 

RADIO BUTTON:
<INPUT TYPE="radio" NAME="radio1" VALUE="Apples">Apples
< INPUT TYPE="radio" NAME="radio1" VALUE="Bananas">Bananas
< INPUT TYPE="radio" NAME="radio1" VALUE="Oranges">Oranges

This tag should be used if only one multiple-choice selection is possible.  FormServlet will pass along the VALUE of the radio button that is checked.  Note that the NAME is the same for each.  This allows for only one answer.

  Apples

 

  Bananas

 

  Oranges

 

 

Email Address

 

 

TEXTAREA:
<TEXTAREA NAME="area1" ROWS=5 COLS=30></TEXTAREA>

Creates a block of space the user can fill in.  Good for "essay" type questions.  By adding WRAP="physical" you can have the inputted text wrap to the size of the textarea you specify.

 

What do you think about fruit?

 

Email Address

 

 

SELECT/OPTION:
<SELECT NAME="option" >Choose one:
< OPTION VALUE="Apples">Apples
< OPTION VALUE="Bananas">Bananas
< OPTION VALUE="Oranges">Oranges
< /SELECT>

This tag creates a pull-down list of options.  The user is limited to one choice.  Passes along VALUE of whichever option is selected.

 

 

 

Email Address