Creating Website 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:

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
• Website forms Introduction