Input this!! The how-to of great forms


Forms allow users to interact with a Web page. Visitors to a Web page can use a form to submit data, such as an email address, or the form could allow them to select data, such a page to be viewed.

Essentially, there are two parts to every form: the interface that the user sees on the screen, and the processing code that resides on the server and determines the action that the form will take.

The interface of the form contains fields for inputting data and buttons for making selections. The form interface comes from HTML tags. The processing code, which is far more complicated than the HTML, is generally referred to as the CGI (Common Gateway Interface) script. The CGI, written in a scripting language such as Perl or TCL or VBScript, is basically a set of instructions for how the information in the form will interact with the server.

Example of Form Interface
(stuff the user sees)

Example of Processing Code (CGI)
(stuff going on on the server)



Name

Student Faculty Other

}
} else { $check_referer = 1; }
# If the HTTP_REFERER was invalid, send back an error.
# if ($check_referer != 1) { &error('bad_referer')
}
} sub get_date
{ # Define arrays for the day of the week and month of the year. # @days = ('Sunday','Monday','Tuesday','Wednesday', 'Thursday','Friday','Saturday'); @months = ('January','February','March','April','May','June','July', 'August','September','October','November','December');
# Get the current time and format the hour, minutes and seconds. Add # # 1900 to the year to get the full 4 digit year.

A Script from Matt's Script Archive
http://www.worldwidemart.com/scripts/

 

Learning to write CGI scripts can be a very complex endeavor; HTML is quite simple by comparision. Luckily, there are many places on the Web that offer ready-made, customizable CGI scripts for free. The script usually has to be placed in a cgi-bin directory on a Web server. A cgi-bin directory is a special directory that allows a form to interact with a cgi script, all without showing the user that script or the contents of the directory. A cgi-bin directory is generally set up by your Internet Service Provider (ISP) or systems administrator.

In many cases your ISP may have ready-made scripts already available for its customers to use. Either way, once a script is in place and working, just link to it in the form action (see following pages) to create the interaction.

Creating a Simple Form

All elements of a form are contained within the <form>...</form> container. The <form> tag is very important , because it is the key to any interaction between the form and the cgi script.

<form action="http://www.someserver.com/cgi-bin/script.pl" method="post" title="Show us the money">


The action attribute provides the URL or location of the cgi script to be used for processing the form. Because these scripts can determine where the information is to be sent, you can not just copy a script location from another Web page. The URL provided here has to be the actual location of a script that you verified is available for your use.

In the example, we are pretending that there's a Website at http://www.someserver.com that has, in its cgi-bin directory, a script called "script.pl" that is available for your use. As far as I know, there's no such Website or script, so be sure you replace this with actual information if you want your forms to work.

<form action="http://www.someserver.com/cgi-bin/script.pl" method="post" title="Show us the money" >


The method attribute refers to how the information will be sent to the server. With the get method, the information is added to the end of the URL and submitted to the server. With the post method, information is sent to the server in a data file. Generally, the script you are using will specify what method should be indicated on the form.

<form action="http://www.someserver.com/cgi-bin/script.pl" method="post" title="Show us the money">


The title attribute of a form tag contains information that helps people who have accessibility issues to understand and navigate the form and the page it's on.

<form action="http://www.someserver.com/cgi-bin/script.pl" method="post" title="Show us the money">

Creating a Simple Form

All elements of a form are contained within the <form>...</form> container. The <form> tag is very important , because it is the key to any interaction between the form and the cgi script.

<form action="http://www.someserver.com/cgi-bin/script.pl" method="post" title="Show us the money">


The action attribute provides the URL or location of the cgi script to be used for processing the form. Because these scripts can determine where the information is to be sent, you can not just copy a script location from another Web page. The URL provided here has to be the actual location of a script that you verified is available for your use.

In the example, we are pretending that there's a Website at http://www.someserver.com that has, in its cgi-bin directory, a script called "script.pl" that is available for your use. As far as I know, there's no such Website or script, so be sure you replace this with actual information if you want your forms to work.

<form action="http://www.someserver.com/cgi-bin/script.pl" method="post" title="Show us the money" >


The method attribute refers to how the information will be sent to the server. With the get method, the information is added to the end of the URL and submitted to the server. With the post method, information is sent to the server in a data file. Generally, the script you are using will specify what method should be indicated on the form.

<form action="http://www.someserver.com/cgi-bin/script.pl" method="post" title="Show us the money">


The title attribute of a form tag contains information that helps people who have accessibility issues to understand and navigate the form and the page it's on.

<form action="http://www.someserver.com/cgi-bin/script.pl" method="post" title="Show us the money">

The Form Elements

Every element in a form should be inside a <label>...</label> container, for accessibility reasons. You'll see this demonstrated as we look at individual examples.

There are a variety of different ways in which one can input data using a form. Many of these ways are specified by the type attribute of the <input /> tag.

<input type="...whatever form the input will take..." / >

In addition to the type attribute it is also necessary to use the name attribute. This the gives the data inputted in this field a name (duh...) and helps the script in determining how the information will be processed. The value for the name attribute should not have any spaces, although the underscore _ is permissible. In the case of checkboxes and and radio buttons, the value attribute may also be used to specify the data value.

The name would correspond to the field name in a database, or the column or row header in a spreadsheet. In a text field, what the user types into the box becomes the value for that input.

This code:

<p><label for="employment location">City<br / >
<input type="text" name="city" id="employment location " />
</label></p>

<p><label for="email address" >Email address<br />
<input type="text" name="email_address" id="email address" />
</label></p>

Creates this:

Top of Form

City

Email address

Bottom of Form

Which might wind up in a database looking like this:

 

A

B

1

city

email_address

2

Seattle

aboss@sccd.ctc.edu

3

Bothell

aboss@cascadia.ctc.edu

 

Use the <label> tag and associated for attribute to identify the exact words that you want to use as the label for the form element. The for attribute uniquely identifies that element.

Use the id attribute in the associated form element to tie that form element to its associated label.

Don't use the same value for the name and id attributes. The labels may not work for fields where the id and name values are identical. The labels work once these values are unique.

<form>
<table>
<tr>
<td><b><label for="first"> First name:</label> </b></td>
<td><input type ="text" name="first_name" id="first" ></td>
</tr>
<tr>
<td><b><label for="last"> Last name:</label> </b></td>
<td><input type ="text" name="last_name" id="last" ></td>
</tr>
</table>
<p>
<input type ="submit" value="Send your info ">
</form>

Text Boxes

The text box is the simplest way to input data. Consequently, it is the default for the <input / > tag.

<p><label for="email address" >Email address<br />
<input type="text" name="email_address" id="email address" />
</label></p>

Email Address

A user can type as much data as desired into the text box. The maxlength attribute imposes a maximum length on content, using the value to set the number of characters allowed.

The default size for the space displayed in a text box is 20 characters. The size of the text box can be changed by using the size attribute, whose value should be the desired number of characters wide:

<label for="email">
<input type="text" name="email_address" id="email" size="40" maxlength="50" />
</label>

This input field will accept 50 or less characters. The size of the box will be 40 characters wide. Enter more text than that and the text will scroll to the side.

Checkboxes and Radio Buttons

For text boxes, the value = whatever the user types into the box.

Checkboxes and radio buttons allow the user to input data by simply checking a box or button. Because the button or box is turned off or on, and no data is actually inputted, the value attribute is set within the tag.

Radio Buttons

Radio buttons allow only one of the choices to be selected at a time. You cannot pick multiple radio buttons at once.

<p>What is your favorite color<br />
<label for="color choice 1">
<input type="radio" name="color" id="color choice 1" value="blue" />Blue
</label>
<label for="color choice 2 ">
<input type="radio" name="color" id="color choice 2 " value="green" />Green
</label>
<label for="color choice 3 ">
<input type="radio" name="color" id="color choice 3 " value="red" />Red
</label> </p>

Blue Green Red

 

 

 

 

 

CheckBoxes

Checkboxs allow one or more of the choices to be selected at a time. You can pick multiple selection boxes for one item.

<p>What are your favorite colors<br />
<label for="color choice 1">
<input type="checkbox" name="color" id="color choice 1" value="blue" />Blue
</label>
<label for="color choice 2 ">
<input type="checkbox" name="color" id="color choice 2 " value="green" />Green
</label>
<label for="color choice 3 ">
<input type="checkbox" name="color" id="color choice 3 " value="red" />Red
</label></p>

Blue Green Red

 

 

 

 

 

Text Areas

To create a larger area for text, use the <textarea> container tag. The <textarea> tag is not an attribute of <input />, but rather a separate tag with its own set of attributes and values. The size of the text area can be controlled by using the rows and cols attributes. The rows attribute is set to equal the number of rows the text area should have. The cols attribute indicates the width of the text area in characters. Unlike the <input /> tag, the <textarea> tag must be closed, by </textarea>. Anything written within this container tag will appear in the text area as well.

<p><label for="My vacation">What did you do on your vacation?<br />
<textarea name="vacation" id="My vacation" rows="5" cols="35"> On my vacation I... </textarea></label></p>

What did you do on your vacation?

What did you do on your vacation?

 

 

Submit and reset buttons

The submit button sends the information gathered in a form to the server to be processed. By default, the text on a submit button will say Submit. However, the text can be changed by adding new text as the value for the value attribute.

<input type="submit" />

<input type="submit" value="send info" />

The reset button erases any information placed in the form and returns the form to its original empty state. The default text is Reset, but this can be changed in the same way as the submit button.

<input type="reset" />

<input type="reset" value="start over" />

 

 

Using an image as a submit button

You can also use an image as a submit button instead of using the default. Use the <input /> tag with the attribute and value, type="image" Several attributes are used in conjunction with this and allow you to better control the image.

 

<input type="image" src="button.gif" />

<input name="gobutton" type="image" src="button.gif" alt="Click here" width="24" height="22" border="0" />

Be forewarned: in xHTML, most of these attributes (such as width, height, border) aren't considered valid, so the validation tools might give you a little grief over the contents of the tag.

Other Input Types

There are several other attributes of the <input /> tag that you can use to create a form. You wil likely encounter the password and hidden types.

The password type functions exactly the same way as a text input, however, the contents typed into that field appear as *****.

Hidden fields are primarily used to submit information to the CGI script on the server. A user on your Web site would not see a hidden field unless they looked at the code.

<input type="hidden" name="required_fields" value="visitor_email_address" />

<p><label for="password" >Password<br />
<input type="password" id="password" name="user_pass" />
</label></p>

Creating a Menu

Forms can also be used to create a menu of options for a person to select from. All parts of the menu are contained within the <select> container tag, while the individual options are indicated by the <option> container. Two types of menu can be displayed, depending on whether you use the size attribute of the <select> tag.

Pulldown Menu

Scrolldown Menu

<label for="color choice">
<select name="color"
id="color choice">
<option selected="selected" value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="yelow">Yellow</option>
</select>
</label>

<label for="color choice">
<select name="color"
id="color choice" size="3">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="yellow">Yellow</option>
</select>
</label>

Top of Form

Bottom of Form

Top of Form

Bottom of Form

As usual, the name attribute of the <select> tag refers to the name given to the results of what the user chooses from the form. For the pulldown menu, the selected="selected" attribute/value of the <option> tag will indicate an item to be initially displayed. Scrolldown menus are created by using the size attribute with the <select> tag. The value for size refers to the number of options that will be displayed. When there are more options than are displayed, a scroll is created.

Making Forms Work

On the following "Fun with Forms" page, there's information on Response-o-matic, which offers a forms script that will work for Websites that don't offer access to their own cgi-bin scripts.

Response-o-matic is a free service that will process basic forms for you. Just visit their Website at http://www.response-o-matic.com/, fill in a few fields on their form, and they'll generate some HTML code that you can copy, paste into an HTML page of your own, and customize to match the rest of your site. Sadly, the decline in revenue from online ads has led the people at response-o-matic to flood you with ads, which means that both the user of the form and the person getting the data from it are going to be subjected to a good deal of advertisements. For a pretty low fee, thought, they'll turn the ads off.

Be forewarned, the HTML generated by Response-O-Matic's Website is not xhtml-compliant. (In other words, it won't pass a validator.) Rather than using their generated text, go to this module's "Fun with forms" page and use my xhtml-ified version of text that will work with the free form processor at Response-O-Matic.

A newer service that so far doesn't have nearly as many junky ads is Free AllForms, at http://allforms.mailjol.net/main.html. I can't vouch for how long they'll be around, but so far they've behaved honorably and their form processing seems to work just fine.

There are a couple of other, similar options out there, too. Check Free Form Processing http://www.nojunkfree.com/webmaster/freeform.asp

If you find a similar service without the junky ads, please share it! Email the URL to aboss@sccd.ctc.edu

********************************* Fun with forms page

A Simple Form with Mailto:

(This does not work on all browsers. It is not considered valid within any version of the HTML specifications. On the browsers where it will work, the code launches the system default email program. So, it won't work on computers that don't have email programs set up--such as those in public places--and it won't work in browsers that aren't set up to honor the nonstandard code.)

My name:
My Message:

<form enctype="text/plain" method="get" action="mailto:aboss@sccd.ctc.edu">
<p>My name: <input type="text" name="myname"> <br />
My Message: <input type="text" name="mymessage" / > <br />
<input type="submit" value="send" name="submit" / >
</p></form>


A Complex Form with CGI

Go to http://www.response-o-matic.com and follow the instructions. You'll be able to generate some html to put into your form page.

Alternatively, you can just copy the html below (scroll below the explanations for easy-to-copy html) and change the contents of each value it so it's tailored to your own site. Do not change the input tag's name, the Response-O-Matic script that processes these pages searches the data input from the form in order to find the content (values) of these predetermined named inputs.

1

<form action="http://www.response-o-matic.com/cgi-bin/rom.pl" method="post">

Don't change a word of this line. It's what controls where the form content is sent and what it does.

2

<input type="hidden" name="your_email_address" value="aboss@sccd.ctc.edu" / >

In the value, replace my email address with yours.

3

<input type="hidden" name="your_name" value="Al Boss" / >

In the value, replace my name with yours

4

<input type="hidden" name="email_subject_line" value="email from some flounder" / >

In the value, put whatever subject line you'd like email sent by this form to have

5

<input type="hidden" name="required_fields" value="visitor_email_address" / >

This is optional. Include it if you want to require that the user complete certain fields, such as their email address. The value has to be an exact match with the name of the form field you're requiring--so for the example on the left to work, you'd have to have an input field like this: <input type="text" name="visitor_email_address" size="50" />

6

<input type="hidden" name="thank_you_title" value="Thank you for completing this form." / >

You can change the value to whatever you'd like the user to see after they fill out and submit your form.

7

<input type="hidden" name="return_link_url" value="http://www.yahoo.com" / >

Replace the value with the url of a page on your site--where you want the user to return after they fill out the form.

8

<input type="hidden" name="return_link_name" value="Go away" / >

Replace the value with what you want the link (previous line) to say. "Go back to the home page", for example, if that's where the link leads, would be more polite than the terse "Go away" in my example here.

Easy-to-copy html:

The items in red text are the ones you should change.

<form action="http://www.response-o-matic.com/cgi-bin/rom.pl" method="post">

<input type="hidden" name="your_email_address" value="aboss@sccd.ctc.edu" / >

<input type="hidden" name="your_name" value="Al Boss" / >

<input type="hidden" name="email_subject_line" value="email from some flounder" / >

<input type="hidden" name="required_fields" value="visitor_email_address" / >

<input type="hidden" name="thank_you_title" value="Thank you for completing this form." / >

<input type="hidden" name="return_link_url" value="http://www.yahoo.com" / >

<input type="hidden" name="return_link_name" value="Go away" / >

Put all the visible form fields below this, and don't forget to close the form with </form> after you've put in the submit button.


Navigation with Forms

When combined with some basic cut-and-paste javascript, forms can be used as an effective navigation tool called a pulldown menu. Remember that when using javascript, you will need to paste the actual script in the <head> container of your document

Pull Down Menu Instructions
http://javascript.internet.com/navigation/menu.html

 


 

Fun with Buttons

You can have a little fun with buttons, by setting the action of a form to a URL. Clicking on the button will then take you to that URL.

<form action="http://www.flipdog.com">
<input type="submit" value="Get a Job" / >
</form>

 

 

 

Terms and Concepts

Form
Form title
Interface
CGI
Label
Input Type
Text Box

Checkbox
Radio Button
Textarea
Submit
Reset
Pulldown Menu
Scrolldown Menu

Readings

WebMonkey:CGI Scripts for Fun and Profit
http://hotwired.lycos.com/webmonkey/99/26/index4a.html?tw=programming

WebMonkey: Good Forms
http://hotwired.lycos.com/webmonkey/99/30/index4a.html?tw=authoring

More information

Matt's Script Archive
http://worldwidemart.com/scripts/

About.com: Creating HTML Forms
http://html.about.com/compute/html/msubforms.htm

About.com: Free CGIs
http://html.about.com/compute/html/msubfreecgis.htm

Free Form Processing, Response-o-matic
http://www.response-o-matic.com/

Free Form Processing, Free AllForms, at
http://allforms.mailjol.net/main.html

Free Form Processing
http://www.nojunkfree.com/freebie.asp?cat_id=15