Website Tutorials
For Beginners
HTML Help & Tutorials
Dreamweaver Tutorials
Home > HTML Tutorial
HTML Tutorials - Forms
Getting Started    CSS    Text    Linking    Graphics    Fill-out Forms    Frames    Comments

Getting Started

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">
<INPUT TYPE="input" NAME="recipient" value="a@a.com">TO:<P>


Here is what it will look like:
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:

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


Here is what 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:
<TEXTAREA Rows=7 Cols=45 NAME="suggestions"></TEXTAREA><P>

Here is what the result looks like:
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<P>
<INPUT TYPE="checkbox" NAME="like" VALUE="internet">Play on the Internet<P>
<INPUT TYPE="checkbox" NAME="like" VALUE="read">Read a book<P>
<INPUT TYPE="checkbox" NAME="like" VALUE="sports">Play sports<P>
<INPUT TYPE="checkbox" NAME="like" VALUE="study">Study<P>


The result is:

What are some things that you like to do?

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?

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


The result is:
What Internet browser are you using right now?

Netscape Navigator 4.x

Netscape Navigator 3.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>Orange
<OPTION>Green
<OPTION>Blue
<OPTION>Purple
<OPTION SELECTED>Black
<OPTION>Brown
</SELECT><P>


The output 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?
<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><P>


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


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:
<INPUT TYPE="reset" VALUE="Reset">

The output is:

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


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:
<INPUT TYPE="reset" VALUE="Reset"><INPUT TYPE="submit" VALUE="Submit">

The output is: (Note: Please don't click the button. It has been disabled and will not work.)
To submit your choices, press this button:


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

Getting Started    CSS    Text    Linking    Graphics    Fill-out Forms    Frames    Comments