FORMS

Okay, okay, okay! I want to be a millionaire! When do I learn about selling stuff on my website?

Funny you should ask Youre about to learn all about forms, how they work, and how to build them on your website inthis secetion of the web design course.

To build working forms, youll need two parts: the form itself (which youll build) and the program that processes the form, called a CGI (which youll configure).

CGI

When the user is finished filling out a form, the form is sent to your server for processing. The program that processes your form is called a CGI, which stands for Common Gateway Interface. A CGI is a program, referred to as "common", because it allows itself to be used by different types of computers and operating systems. It doesnt matter if your visitors are using a Mac or PC. Everyone can interact with the CGI on your server.

CGI programs can do many things associated with forms, such as handle form submissions, search a site, charge a credit card, submit information to a database, or allow site access through password protection.

By the way, you should know that CGI is not a computer language, its a program classification type. "CGI" is just a name for a program that can be used by multiple computer platforms, like Macs and PCs. CGIs are often written in languages like Pearl and Java.

You can have a CGI custom programmed for you, or you can search the free-script resources on the web. Custom programming can get very expensive, so its usually best to try and find a reputable free script first.

Good Free-Script Resource:

http://www.worldwidemart.com/scripts

Good Custom Programmers:

http://www.yvod.com

Once you have a CGI, youll have to configure it so it works with your form and server. A CGI will need to be customized to do exactly what you want it to do. For example, if the CGI needs to send you an e-mail, itll need to know your e-mail address, and the location of the program on your server that actually sends mail, called the "Sendmail" program. Youll need to download a CGI, open its code and fiddle with it a little bit. You dont have to be a programmer to get this done, but you will need to carefully follow directions and not be afraid to utilize your hosting service help line when asked for information about your server.

Where are CGIs kept on my server?

Because CGIs are programs, nefarious hacker types can misuse them. Because of this, some servers require you to place all of your CGIs in one folder called a "cgi-bin". Others allow you to place CGIs directly on your site. You will probably have to call and ask your hosting site how they handle CGIs.

Most hosting sites allow you to place custom CGIs in a folder on your site called "cgi-bin". You may have to create the folder yourself.

The CGIs File Extension

Youll also most often have to change the file extension of the CGI from whatever it is to ".cgi". For example, most CGIs are written in a language called Perl. Perl scripts have a ".pl" extension. In order for the server to recognize the file as a program, youll need to change the ".pl" extension to ".cgi". You can do this by opening the CGI with Notepad or Simple Text, and adding ".cgi" to the end of the file name when you save.

It is important to thoroughly examine the "read-me" file that should accompany your CGI for any special set-up details.

So, I downloaded a CGI, changed its extension to ".cgi" and stuck it on my site. Now what?

Youll have to configure the CGI to work with your site. For example, if youre using a CGI that will e-mail you information from a submitted form, youll have to tell it what your e-mail address is. Usually the accompanying "read-me" file will instruct you to open the CGIs code and change a few things (like the e-mail address). You can open code of any type with the Notepad or Simple Text. CGIs are usually pretty lengthy and hard to read for beginners, but after opening the CGIs code you can easily use the Notepads or Simple Texts "Search" or "Find" feature to find items that the read-me file instructs you to look for. IT IS VERY IMPORTANT TO THOROUGHLY READ THE CGIS "READ-ME" FILE. Each one is different.

If the "read me" file asks for information you dont know, pick up the phone and call tech support at your hosting site. If theyre rude to you, ask for the manager and complain. Those people are there to help you.

Using Perl Scripts

Most CGIs are written in a language called Perl. When configuring Perl Scripts to work with your form, it is important to make sure that the first line of the code reads:

#!/usr/local/bin/perl

This file path tells the server that the file is Perl, and directs it to the Perl interpretera program that allows the server to run Perl.

Sadly, most Perl scripts will have trouble running on a Windows NT/2000 based server. Luckily, most servers are Unix based. Ask your hosting service if your server is Unix or NT.

CGI Recap

Youll need to:

* Check with your server to make sure they accept custom CGIs. (you want them to)

* Create or use the pre-made folder called "cgi-bin" on your site. Youll store all of your CGIs here. There should only be one cgi-bin.

* Check with your server to see if you should change the extension of the CGI to ".cgi". You probably need to.

* Carefully read the "Read-Me" file or accompanying directions for setting up the CGI.

* Use the Find/Replace tools in Note Pad or Simple Text to help you configure the CGI.

A good CGI to start with is also one of the most useful. FormMail is a Perl script CGI that e-mails site owners form results. Its available at:

http://www.worldwidemart.com/scripts/formmail.shtml

Forms Without CGI

If youre not sending anything sensitive, you can link your form to free form submission services. The best, in my opinion, is http://www.response-o-matic.com

Go there and check them out!

Secure Servers

Normally, when information is sent over the Internet, evil hackers can spy it on. To combat this, servers use encryption, or coding, on form based data submitted to the site. If your server provides encryption, it is "secure". Most hosting sites provide a secure server, but you should ask when signing up.

FORMS

As the web designer, you will be responsible for designing the look and feel of the form. You will not be expected to create a custom CGI to process the form on the server, but you might set up a pre-made one.

The Form Tag

Every form starts off with the <form> tag. The <form> tag has some important modifiers that instruct the browser how and where to send the form.

METHOD

METHOD is a modifier of the FORM tag that stipulates how the information in the form will be submitted to the server. Will the server use its own resources to get the information, or will the form post itself to the server using the computing power of the users computer? Your two submission METHOD choices are:

method="get"

method="post"

Servers would rather have you do the work. In almost all situations you will use method="post".

ACTION

The ACTION modifier instructs the computer exactly where to send the form information when submitted. The ACTION modifer of the form tag will direct the form to whatever CGI is being used.

A completed FORM tag could look like:

<form method="post" action="/cgi-bin/whatever_cgi.cgi">

**IMPORTANT: The Form tag must be closed </form> at the end of the form.

Input Items

You are going to define buttons, text boxes, and pull down menus. These are "Input Items". There are different types of input items, which we will go over shortly. An input item tag looks like:

<input type= "whatever_type">

Naming Input and Form Items

When you receive the submitted form, it will look something like:

Below is the result of your feedback form. It was submitted by
(supercool_user@bomb.com) on Tuesday, October 31, 2000 at 11:56:53
-

name: Mr. Man

cc: 5369 9304 5930 8964

exp: 10/05

item: useless plaything

Notice that each item in the returned form has a word identifying that item (name, cc, exp, item). That identifier is the items "name". If a form item is named youll be able to identify it later when you receive the form results. Youll have to name every form item (checkboxes, text boxes, buttons) when you place them on the screen.

IMPORTANT: Names must be all lowercase and one word! "home_address" is okay, though.

Formatting a Form

For design and looks, most forms are built in tables.

Creating Form Fields

Text Fields

Text fields are the most common form field. They allow the user to type in whatever they feel like. Text Fields can be used for names, addresses, credit card numbers, ect. The tag for a text field is:

<input type="text" name="whatever" size="40" maxlength="40">

SIZE denotes the size of the text field in characters.

MAXLENGTH denotes the maximum number of characters that can be typed in the text field. A MAXLENGTH modifier protects your site from thirteen-year-olds who paste the dictionary into forms.

**Note that the tag only places an empty box on the screen. If you want to give your users directions youll need to label each field.

Example:

First Name: <input type="text" name="first_name">

Would appear as:

First Name:

Checkboxes and Radio Buttons

Checkbox Radio Button

There is no difference between checkboxes and radio buttons except that checkboxes allow you to select multiple answers for the same question and radio buttons only let you choose one.

In order for a form to submit clear a clear report, the form needs know what each box means, what its value is. For example, if a user checks a box denoting income, the report must clearly show that the user checked the "$1,000,000" box, and not the "$10,000". The name of the checkbox might be "income". Each checkbox and radio button must be named, but must also have a value. The value is returned on the form report when a certain button is checked. Values cannot contain spaces.

Some people like to think of the "name" as the question being asked, and the "value" as the answer.

Checkbox HTML:

<input type="checkbox" name="income" value="1,000,000">

Radio Button HTML:

<input type="radio" name="age" value="35-40">

The CHECKED modifier can be added to a radio button or checkbox tag to pre-select it. Example:

Would you like a bunch of annoying e-mails?

Yes! <input type="checkbox" name="e_mail" value="yes" checked>

***NOTE: A group of checkboxes or radio buttons will usually all have the same name if they are part of the same question. They must each have different values, though.

Pull-Down Menus and Lists

Pull-Down Menu List

Pull-Down Menus and lists are good when the user is presented with a number of set choices.

The following HTML is for the above pull-down menu. It allows for three choices: High School, Grammar School, and the Academy of Web Design SF. Notice that each option has a value that will be returned if the user selects that option. Values cannot contain spaces.

<select name="education">

<option value="hs">High School</option>

<option value="gs">Grammar School</option>

<option value="awdsf">the Academy of Web Design SF</option>

</select>

The words between the opening and closing OPTION tag will appear on the viewers screen.

Lists are built in the same manner as the pull-down menu, except that you must add a "SIZE" modifier to the SELECT tag. In addition, you can also allow users to select multiple items in the list by adding the "MULTIPLE" modifier to the SELECT tag. You should instruct users that they must hold control or command if they wish to select multiple items.

If you desire a choice to be pre-selected, add the SELECTED modifier to that choice (high school is pre-selected below)

Example:

<select multiple name="education" size="2">

<option selected value="hs"> high school </option>

<option value="gs"> grammar school </option>

<option value="awdsf"> academy of web design, sf </option>

</select>

Allowing Users To Attach Files to their Form Submission

Users can send you files along with their form. This works much like attaching a file to an e-mail. When given the option of attaching a file to a form, users will view an empty field with a "Browse" button attached to it. You will have to instruct them in its usage. The tag for a File Attach Button looks like:

<input type="file" name="file_users_sent_me">

Acknowledgment Page

You will want to acknowledge that the form has been submitted. The following tag re-routes a user to any specified HTML page after the form is submitted to your server.

The Submit Button

You need a button for users to click when theyre all done, no?

Well, here it is. In the following code, "Value" is what the button says on it.

<input type="submit" name="submit" value="Submit">

When a user clicks the "submit" button, the form will be submitted to the CGI stipulated in the FORM tag:

Practice form:

See if you can build the following form. Its HTML is at the bottom of the page if you get stuck.

Remember that a form items name and value is up to you. Also remember that forms are usually built in a table, but for simplicity's sake, the below example was not.

First Name:

Last Name:

Do you like me? Check box: Yes! No.

Choose your favorite cookie:

<p>First Name:

</p>

<p>Last Name:

</p>

<p>Do you like me? Check box:

Yes!

No.</p>

<p>Choose your favorite cookie:

<option value="choc">Choco</option>

<option value="peanut">Peanut</option>

<option value="liar">I hate Cookies</option>

</select>

</p>

<p>

</p>

</form>

Continue to Advanced Tables|