Create a Website
HTML
Dreamweaver
CSS Tutorial
JavaScript
FREE Hosting!
With every domain name
you register at DotEasy
you get FREE (no-ad)
one year hosting.
PLUS you get:
  • FREE Website Builder
  • FREE Blog
  • FREE Forum
  • FREE Photo Album
  • FREE Email Accounts
Get your FREE hosting today!
Home > HTML Help & Tutorial
$0 Web Hosting

Fill-out forms let a reader return information to a Web server for some action. For example, suppose you collect names and email addresses so you can email some information to people who request it. This processing of incoming data is usually handled by a script or program written in Perl or another language that manipulates text, files, and information. If you want to, you can write this program yourself, but I have no idea how to do it. I would check with your server. I know that many servers have scripts available for its users. Let's pretend that the one that I'm going to use is called "fb.pl". This will send a response to your fillout form directly to your email address.

NOTE: This script is not real, it is just an example. Check with your ISP to see if they have built-in scripts.

Form Method/Action

The first thing that you type for your guestbook is the Form Method and Action. This is where you enter the Perl script. Most servers and Internet Providers have scripts like this that they provide for you. Check with yours. You cannot have any kind of forms without having a script. The address of the one that I'll be using is:

http://www.domain.com/cgi-bin/fb.pl. If you would like the response sent to your email address, and the address is "a@a.com", you would type this for the first two lines:

<FORM METHOD="POST" ACTION="http://www.domain.com/cgi-bin/fb.pl"><br /><INPUT TYPE="input" NAME="recipient" value="a@a.com"> To:

The result is:

To:

Next, you need to decide what questions that you want to ask, and what you will use to ask them. Before you start, though, you might want to check with your server to see if they have any questions that you MUST ask. I know with some ISPs, you must ask what their email address is, their first name, their last name, and what the subject of their question is. You can use single or multiple text fields, larger fields, checkboxes, radio buttons, pull-down lists and scroll-down lists.

Single or Multiple Fields

In your guestbook, you might want to ask questions that have a single one word answer. To here is what you would type to have four fields that ask for an email address, a first name, a last name, and a subject:

<p><INPUT TYPE="input" NAME="from"> Your Email Address</p>
<p><INPUT TYPE="input" NAME="firstname" Your First Name></p>
<p><INPUT TYPE="input" NAME="lastname"> Your Last Name</p>
<p><INPUT TYPE="input" NAME="subject"> Subject</p>

The result is:

Your Email Address

Your First Name

Your Last Name

Subject

Larger Fields

I would recommend that you have one larger field at the end of your guestbook for comments. You first need to decide how many columns and rows that you want to have. Let's say that you want to have 7 rows, and 45 columns. Here is what you would type:

Please place any questions or comments here:<br />
<TEXTAREA Rows=7 Cols=30 NAME="suggestions"></TEXTAREA><P>

The result is:

Please place any questions or comments here:

Checkboxes

Let's say that you wanted to ask a question like "What are some things that you like to do?" You could have a list of things with checkboxes. If you wanted the list to be: Watch TV, play on the Internet, read a book, play sports, and study, you would type:

What are some things that you like to do?

<INPUT TYPE="checkbox" NAME="like" VALUE="TV"> Watch TV
<INPUT TYPE="checkbox" NAME="like" VALUE="internet"> Play on the Internet
<INPUT TYPE="checkbox" NAME="like" VALUE="read"> Read a book
<INPUT TYPE="checkbox" NAME="like" VALUE="sports"> Play sports
<INPUT TYPE="checkbox" NAME="like" VALUE="study"> Study

The result is:

Watch TV
Play on the Internet
Read a book
Play sports
Study

Radio Buttons

If you ever want to ask a question with one answer, you can use radio buttons. If you wanted to ask "What WWW browser are you using right now?", and you wanted to have the choices Netscape Navigator 4.x, Netscape Navigator 3.x, Netscape Communicator, Mosaic, and Microsoft Explorer, you would type:

What Internet browser are you using right now?

<p><INPUT TYPE="radio" NAME="browser" VALUE="Navigator 3.x">Netscape Navigator 3.x</p>
<p><INPUT TYPE="radio" NAME="browser" VALUE="Communicator">Netscape Communicator</p>
<p><INPUT TYPE="radio" NAME="browser" VALUE="Mosaic">Mosaic</p>
<p><INPUT TYPE="radio" NAME="browser" VALUE="Internetex">Internet Explorer</p>

The result is:

Netscape Navigator 4.x

Netscape Communicator

Mosaic

Internet Explorer

Drop-down List

Another way to ask a question with only one answer is to use a pull-down menu. You can use the SELECTED command to have an option besides the first be selected, as you will see below. If you wanted to ask "What is your favorite color?", and you wanted the list to be of red, yellow, orange, green, blue, purple, black, and brown, with black selected, you would type:

What is your favorite color?

<SELECT NAME="color">
<OPTION>Red
<OPTION>Yellow<OPTION>Green
<OPTION>Blue
<OPTION>Purple
<OPTION SELECTED>Black
<OPTION>Brown
</SELECT>

The result is:

Scroll-Down Lists

Some times, you might want to have a scroll-down list on your page. With this, you can decide whether or not you want people to be able to select more that one item. If you do have it with more that one items, the user has to hold down the command or shift key. You can also decide how many of the lines you want visible. Below are two lists of the same things. In the first one, you can only select one item, and it is showing three lines. In the second one, you can select one or more items by holding down command or shift . The second list is showing four lines. The question is "What is your favorite video game system?" The answers are: Nintendo 64, Sony Playstation, Sega Dreamcast, or arcade video games. The text that you type for each list is above the actual list.

What is your favorite video game system? (Hold shift to select more that one)

<SELECT NAME="video game" SIZE=3>
<OPTION VALUE="nintendo64">Nintendo 64
<OPTION VALUE="playstation">Sony Playstation
<OPTION VALUE="dreamcast">Sega Dreamcast
<OPTION VALUE="arcade">Arcade Games
</SELECT>

The result is:

Reset Form

On most page that have fill-out forms, there is a reset button at the bottom of the form, next to the "submit" or "send" button. To have a reset button, just type:

To reset the all of the forms, press this button:

<FORM><INPUT TYPE="text" VALUE=""> <INPUT TYPE="reset" VALUE="Reset"></FORM>

The result is:


Submit Entry

When you are all finished with everything, you need to make a button so that people can submit their entry. To do this, type:

To submit your choices, press this button:

<FORM><INPUT TYPE="text" VALUE=""> <INPUT TYPE="submit" VALUE="Submit"></FORM>

The result is:


The output is: (Note: Please don't click the button. It has been disabled and will not work.)

At the very end of your form, you must type </FORM> or your forms won't work!!

Enjoy this tutorial?

1. Link to this page(copy/paste into your own website or blog):
2. Add this page to your favorite social bookmarks sites:
3. Add this page as your favorites. (Press Ctrl+D)