HTML Form Tutorial, Part I

By Will Bontrager
2004-07-06


HTML Form Tutorial, Part I
This is the first part of a 2-part series. Look for the second part next week, right here.

HTML forms are a means of collecting information. People fill in a form and/or select something. Then they click a button.

Forms don't actually process information.

For something to be done with the information, it must be sent somewhere. Information processing destinations can be CGI programs, JavaScript functions, mailto: links, or even a web page (which directs the browser to load the page at the specified URL).

This tutorial is about how to make forms and how to send the information, but not how to process the information after it has been sent off.

Forms begin with the <form> tag and end with the </form> tag. The <form> tag can contain several attributes.

Sometimes you'll need to determine the applicable attributes. Other times, installation directions for CGI programs or JavaScript functions specify the <form> tag attributes expected by the installation.

Where Information Is Sent

One <form> tag attribute specifies where the information will be sent. That's the "action" attribute.

Sending To CGI Programs

If the information is being sent to a CGI program on the same domain as the web page containing the form, the action attribute can contain either a relative URL or an absolute URL. With a relative URL, it would look something like this:

action="/cgi-bin/something.cgi"

If the information is being sent to a CGI program on a different domain, the URL must be absolute (a complete http://... URL):

action="http://domain.com/cgi-bin/something.cgi"

Sending To JavaScript Functions

When sending form information to a JavaScript function, the action attribute would look something like:

action="javascript:SomeFunction()"

or, the action attribute might be replaced with the JavaScript specific "onClick" attribute:

onClick="return SomeFunction()"

If the form information is to be sent to both a JavaScript function and to a CGI program, then both the action and the onClick attributes would be specified.

Sending To mailto: Links

To send form information to the visitor's email program, with the To: destination already filled in, use:

action="mailto:name@domain.com"

If you also want to specify a subject for the email:

action="mailto:name@domain.com?subject=My%20Subject"

(Use "%20" instead of spaces when specifying a subject.)

Note that not all browsers recognize the mailto: link. It is suggested you use this only as a last resort.

Sending To a Different Web Page

To send form information to a different web page so the browser opens the page at the new URL, use:

action="http://newdomain.com/page.html"

Tutorial Pages:
» HTML Form Tutorial, Part I
» How Information Is Sent
» Specifying the Encoding Method for the Information Being Sent
» Form Related Tags
» The <input> Tag
» Part II


Copyright 2004 Bontrager Connection, LLC

Related Tutorials: » Enrich Your Web Applications » Microsoft Complicates HTML Emails With Outlook 2007 » Testing Your Forms for Hijacking Vulnerability » Control Your Domain Registration Data » HTML Forms POST, GET » HTML Tables