Improve Site Performance Increase Site Traffic Monitor Site Uptime Webmaster Resources NetMechanic Home Looking For Help? Partner Programs Privacy Policy Contact Us Press Room
NetMechanic Home LOGIN | HELP | ABOUT US | PRODUCTS | SITE MAP
NetMechanic Menu
Over 52 Million Web Pages Tested!     
 
Positioning tips.
form story search.
Search for:


Your Email:

I would like to receive my newsletter in:
HTML format
Text format


forms.
Volume 8 (2005)
   September
   June
   April
   March
   January

Volume 7 (2004)
   November
   September
   July
   June
   May
   April
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 6 (2003)
   December
   November (Part 2)
   November
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 5 (2002)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 4 (2001)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 3 (2000)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June
   May
   April
   March
   February
   January

Volume 2 (1999)
   December
   November
   October
   September
   July
   June
   May
   April
   March
   February
   January

Volume 1 (1998)
   December
   November
   October
   September

 

Beginner Tip:
Form Processing Basics

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

  
October 2002
Vol. 5, No. 19
 • JavaScript Tip
 • Accessibility Tip
 • Beginner Tip
  

Popular HTML editors make it really easy to include forms on your Web site. Just place a few textboxes, checkboxes, and a submit button and you're done. Or are you?

The form data still needs to be processed. That's where many beginning webmasters run into problems. We'll answer some of the most common questions about attributes, CGI scripts, and other options for form processing.

What does the term "form processing" mean, anyway?

There are two sides to form processing: the client-side and the server-side.

The client-side is the actual form that a visitor sees on your Web page. The form accepts the information entered by the user and the browser sends the data to the server for processing.

The server-side is a little more complicated, mainly because you have so many options for form processing. When the browser sends the form data to the server, it (the browser) assumes the server knows what to do with it. The server relies on you, the webmaster, to provide those instructions.

If you don't, the user may see an error message. Even worse, the form may seem to submit without a problem, but nothing really happens on the server-side. Keep this from happening by becoming familiar with the attributes that go with the FORM tag, what they mean, and what they do.

What is the ACTION attribute?

The ACTION attribute specifies the URL that will receive and process the form data. Use ACTION to send the form to a processing script or to email the form data, like this:

  • CGI Script: action="http://www.SiteName.com/cgi-bin/processForm.cgi."

    This sends the form data to a CGI script that writes the information to a database or saves it in some format.

  • JavaScript function: action="javascript:functionName()"

    This fires a JavaScript function that includes form handling information. Careful with this one: if visitors have JavaScript turned off or are using non-JavaScript browsers like screen readers, your form won't process at all.

  • Email: action="mailto:YourEmailAddress@YourDomain.com"

    Webmasters often use a MAILTO in the ACTION attribute to automatically subscribe people to mailing lists or listservers.

Note: when you use a MAILTO address with the ACTION attribute, no other processing takes place. The browser sends an email to the address (or addresses) you specify, but the form data isn't saved anywhere else. Also, some browsers don't recognize MAILTO links.

When visitors take the time to fill out a form, most won't appreciate it much if you waste their time.

So how do I send an email AND get the form to process at the same time?

Some sort of form-mail script works best for this. These are usually short CGI scripts that are installed on the server-side. Check with your Web host because the vast majority of hosting companies give clients access to one or more form processing scripts. If your host doesn't, it may be time to look for a new Web host!

The CreativeProgrammers Web site offers a quick form-mail script tutorial that explains how a form-mail script works.

Depending on your Web host and the complexity of your form, you may want to sign up with an online form-hosting service. These companies remotely host your forms. Your forms appear on your Web site, but the form data is processed by the form host's server instead of your own Web host. Most companies charge a fee for this service that ranges from about $20 per year to $100 or more.

A form-hosting service may be a good idea for a beginning webmaster who needs to generate really complicated forms (like multi-page forms), write the information to a database, or conduct other kinds of specialized processing.

How does the form data get sent?

You decide that and set up the process using the METHOD attribute.

The ACTION attribute defines how the form will be processed and the method attribute defines how the form data will be sent. Use METHOD to tell the browser which HTTP method to use to submit the form data.

METHOD has two possible values: GET and POST.

What's the difference between POST and GET?

With POST, you send the contents of the form as a data stream. Form data sent using GET becomes part of the URL.

POST separates the form data from the URL and includes it in another part of the HTTP request to the server. JavaScript functions and many CGI scripts that process forms require you to use the POST method.

Although GET is the default, it's an older method that's deprecated (marked for deletion in future HTML versions) in HTML 4.0.

POST is often the preferred way to send information especially if it's sensitive data or contained in a particularly long form.

My HTML book says to never use method="get." Why?

Besides being deprecated, GET is less secure. It adds all the form data to the URL and sends it all to be processed.

The URL of a form processed using GET looks like this:

http://www.YourDomain.com/cgi-bin/query?    Fname=Brian&Lname=Magoo&comments=Comments

The question mark precedes the form data and the ampersand sign separates the values of the different form fields.

That raises two serious issues:
  • Security: All the form data is appended to the URL. Consider the information you often put into a form: name, address, phone number, email address, credit card information. Do you really want it sailing around unprotected on the Web?

  • Size: If you're sending a large amount of form data, some of the data may get dropped. GET's size limitation depends on the server where the form is hosted. It can be as little as 256 bytes, while others accept as much as 32k.

Many Web reference sources advise you to avoid GET entirely. We disagree.

Is GET ever a good way to submit form data?

Yes! There are times when GET really is the best option.

The GET method is particularly useful for online search functions. Since GET adds the form data to the URL, searchers are able to bookmark and save the URL with the form data. We use it for our search functions here at the NetMechanic site.

Search engines and the search functions on individual Web sites often use the GET method for just this reason. It gives searchers the opportunity to save the search results for later reference.

Another reason for using GET is to avoid problems when your visitors use the Back button on their browser. Using the POST method will generate a warning message like the one shown below if visitors try to return to the form results page.

This warning occurs because the POST method has some extra security mechanisms that prevent it from resending data without the visitor's express consent.

Unfortunately the warning usually just confuses visitors, who end up hitting the Refresh button and resending the form data anyway.

Avoiding this warning is a big part of the reason we at NetMechanic use the GET method whenever possible.

How do I send visitors to a confirmation page after they submit the form?

The easy way is to put the confirmation page URL as the value for the ACTION attribute. But there's a problem. The form data doesn't get stored anywhere else because you haven't specified any sort of processing script or action.

Your form-mail script should include an option to send visitors to a customized confirmation or thank-you page. Many require you to include the URL of the confirmation page inside your form using a hidden field. That's a field that the visitor doesn't see on the Web page, but is used to process form data or save form information for use on another Web page.

A hidden field that specifies a confirmation page looks like this:

<input type="hidden" name="ThankYou" value="http://YourDomainName.com/ThankYou.htm">

I use FrontPage for my forms. Why do I care about this?

FrontPage is a good WYSIWYG editor for beginners. They can quickly lay out and post a working Web site without actually writing any HTML code themselves. The downside is that webmasters give up a lot of control and may have problems debugging the editor-generated pages.

HTML Toolbox checks your HTML code for errors and alerts you to browser-specific HTML tags that may break your page in some browsers. It works whether you've hand-coded your page or used an editor like FrontPage. But you also need to be alert to editors that add their own proprietary tags to certain page elements.

FrontPage uses proprietary tags called "webbots" to process forms. The webbot feature makes FrontPage forms easy to set up and use, but they only work on servers that have the FrontPage extensions installed. If you use the webbot feature for forms, you're limited to Web hosts who offer FrontPage extensions on their servers.

There's absolutely nothing inherently bad about FrontPage forms or extensions. They work great for most users. But realize that if you only know how to use FrontPage webbots to create forms, then you're tying yourself to one editor, restricting your choice of Web hosts, and limiting your form processing options.

Avoid this problem by creating forms in FrontPage that don't use the webbots. It will be easy to do now that you understand how forms process!

If you'd like to learn more about individual form elements and how to use them in a form, check out this HTML form tutorial by William Bontrager. There's a short online version and a downloadable PDF version that's longer and more complete.



Rate This Tip:
Not Useful Useful Very Useful   
 
NetMechanic Tools
HTML Toolbox
Browser Photo
Server Check
Search Engine Starter
Search Engine Tools
GIFBot
Newsletter
HTML Tutorial and Tips
Search Engine Tutorial
Accessibility Information
Browser Problem Tutorial

Company Info
Products
About Us
Contact
Advertise
Link To Us
Jobs
Privacy Policy
Partner Programs
Press Room
RSS Feed
Support
 



Powered by Overture!

 
     
 
   
 
     


Keynote Home
Copyright © 1996-2007,
Keynote NetMechanic
All rights reserved.