Creating Web Forms

The basic construction of an HTML form is this...

The form tag can have several attributes:

• " Method" - Determines which http method will be used to
  send the form's information to the web server.
• " Action" - The URL of the form processing script or program (form handler). This script or program will process the form's information. It can also be an email address.-Careful here
• " Enctype" - Determines the method used to encode the form's information. This attribute may be left blank (default) unless you're using a file upload field.
• " Target" - Specifies the target frame or window for the
  response page.

• * METHOD="GET" - This method will append all of the
  information from a form on to the end of the URL being
  requested. -This is the default method.
• * METHOD="POST" - This method will transmit all of the
  information from a form immediately after the requested
  URL. This is the preferred method.

In addition to a form needing to know how to send the information, it also needs to know where to send the information to be processed. The ACTION attribute contains the URL to the form processing script or program. It can also be an email address.-Caution!

Example Form:

Here the form is sent to a cgi script for processing. Most forms these days use php or Perl scripts for form processing.

Example Email Form:

The email form will simply process the information that is placed within your form and send it to your email address. A CGI script is not required; hence the web server isn't required to support scripts.

 The drawback to this method is that it will not work with all browsers and that email harvesters will most likely harvest the email address it is no longer considered to be a good choice. (see hiding email addresses).

You should note that when the ACTION attribute references an email address, you don't have to include the METHOD attribute (i.e. POST or GET).

Form Layout

In order to specify the appearance and layout of the form we use another HTML element the INPUT tag. The input tag, like it sounds, allows your visitors to input data to your Web server.

The INPUT element has the following attributes that may be used:

• " TYPE - Type of input field
• " NAME - Variable name sent to the form processing script.
• " VALUE - Information associated with the variable name to be sent to the form processing script.
• " MAXLENGTH - Maximum number of characters that may be
  placed within an input area.
• " SIZE - The size of the input text area.
• " CHECKED - Default button or box selection.

The INPUT tag usually takes at least two attributes the TYPE and the NAME. The TYPE is the type of element it is i.e. radio button or text and the NAME is the name of this element .

There are ten specific types of INPUT tag which are specified by using the TYPE attribute:

• button
• checkbox
• file
• hidden
• image
• password
• radio
• reset
• submit
• text

You choose which type of input tag you would like by placing it in the type="" attribute. All forms should have at least one input field and a submit button.

This is shown below. The HTML code used to generate this form is also shown below.

Table structures can be used in web forms to improve layout and even add colour. Web forms often use a two column table structure with the filed names in the left column and the data being entered in the right column. Figure below shows the use of tables to layout forms.

 The HTML code is also shown below:

Using FrontPage to Create Forms

FrontPage can be used to create and layout forms but care should be taken to ensure that the forms don’t rely on FrontPage extensions being available unless of course you intend it that way.

When creating forms using the forms Wizard then you should at some stage be prompted to enter the form handler, If you don’t intend to use the FrontPage extensions then choose external for the form handler.

If the HTML generated by FrontPage has any references to a WebBot then it requires FrontPage server extensions to work correctly.

If the server doesn’t support FrontPage server extensions it won’t process the WebBots and so the functionality they were meant to provide will be lost but otherwise the page should display.

 It is best however to remove them if they are not to be used. Although it may require manual editing it is far simpler to use FrontPage for the initial layout than to code the entire form manually.

Keep Forms Simple

Only ask for as much information as you really need. Many people will not fill out a long from but are willing to fill out a simple form that asks only for any email address.

Once you have the email address then you can usually get more information later on.

It is important to note that newsletter subscription forms are a special type of form and are created in conjunction with an autoresponder service provider like get response. See autoresponders for more detail.

Form Processing

When you click the submit button the form is passed to a form processor where the data is extracted and stored.-Processing Website Forms

Related Articles and Resources:

• Website forms Introduction