Skip Navigation

LITS Help

Forms

There are three basic elements in forms:

  1. The form tag
  2. Input fields:
    Text
    Radio Buttons
    Check Boxes
    Select Lists
    Text Areas
  3. Submit and Reset buttons

The Form Tag

This tag is required to set up a form. It is a container tag meaning that it has a beginning and an end tag. The contents of the form must fall between the two, like this:

<form action="path to CGI" method="post">
Body of Form including all input fields and the submit button.
</form>

The important attributes of the form tag are Action and Method. These are necessary to process the form. The Action attribute should point to the program being used to process the form, in this case "/cgi-bin/form2mail.pl" and the Method tag should be set to "post".

The Input Tags

Input tags are used to collect information from the user. Only information put into the input fields will be passed to the CGI program. For best browser support, it is best to include both the name and the id attributes with the same value for all input tags. Also, input tags should be properly closed, meaning they should end with />.

Text

This tag is used to collect short responses such as name and address.
Name: <input type="text" id="name" name="name" size="30" />
will look like Name:


Radio Buttons:

Radio buttons are useful if you want to force a user to choose between two or more options. Only one radio button in a set can be selected. Radio buttons are grouped together by giving them the same name. The value in the "value" attribute will be passed to the CGI program if that button is selected.

<input type="radio" id="Yes_No" name="Yes_No" value="yes" />yes
<input type="radio" id="Yes_No" name="Yes_No" value="no" />no
will look like yes no

The result would look like "Yes_No=yes" if the yes button was selected.

Check Boxes:

These are used to provide a number of options. More than one can be selected.

Blue <input type="checkbox" id="color" name="color" value="blue" />
Red <input type="checkbox" id="color" name="color" value="red" />
Green <input type="checkbox" id="color" name="color" value="green" />
Yellow <input type="checkbox" id="color" name="color" value="yellow" />
would look like: Blue Red Green Yellow

Select List:

This tag is used to create a drop down menu. A drop down menu will allow the user to choose between a group of options provided in the list.

<select id="color" name="color">
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="yellow">Yellow</option>
</select>
will look like

Text Area:

This is used to collect a large amount of text from the user, such as you would expect in a comments box. The size of the text area is set by designating the number of rows and columns to be displayed.

comments:<br / >
<textarea name="comment" rows="5" cols="25">
</textarea>
would look like:
comments:

Submit and Reset buttons:

Some could argue that the submit button is the most important feature of the form. Nothing is submitted to the CGI until the "submit" button is clicked. The reset button is optional. It allows the user to delete all the information they filled in the form. The button label will read whatever is put in the value field.

<input type="submit" value="Submit my form" /> <input type="reset" value="Reset" /> would look like:

Note: These elements are for instruction only. Nothing will happen if this form is submitted.

 
web/forms.txt · Last modified: 2011/03/03 12:41 by lrath
 
Except where otherwise noted, content on this wiki is licensed under the following license:CC Attribution-Noncommercial-Share Alike 3.0 Unported
Recent changes RSS feed Donate Powered by PHP Valid XHTML 1.0 Valid CSS Driven by DokuWiki