How to Create HTML Website Forms Part 1

HTML tutorial 9

Author: Ian McAllister

To get feedback from your visitors you need forms. Even if you just offer them a space to fill in their names and nothing else, that is still a form.

Interactive forms show you different pages depending on what you enter. This tutorial will not cover interactive forms because they use script languages such as Java script or CGS, or PHP so are beyond the scope of these lessons. The tutorial will cover only the use of forms for gathering information.

Simple non-interactive forms are simple to implement. Trial and error is my favourite way to design them. I just keep adjusting things then checking with my browser, until I get it looking just how I want it.

Don't use simple mailto action

The first part of a form is where you choose the action. You'll have to check with your host to see what you should put as the action, because it interacts with a program in the server. I've shown a typical action in the examples below.

Years ago I used forms with the mailto action, which sent the results of the form to me by e-mail. Then I discovered that Explorer can't handle the mailto action.

The other way of getting the results of the form is to use a script. This works well for all browsers, but if your host doesn't offer one built into the system (unusual - change hosts if that is true) you have to consider the following possibilities.

You must have a host who allows the use of CGI scripts, or use SBI who help you to create a form without knowing anything about forms.
You must find a suitable CGI script, possibly paying for it before trying it
You must know enough to install the CGI script correctly.
The script must be capable of presenting the results in a format that you can understand.

Choose a host that can help you.

If you already have a host for your web site, you will have to discuss the possibilities with your host, and see if they can help you. I can tell you now that the free hosts will not offer you the facilities that you need.

If you already have an SBI site then you can grin knowingly as everyone else tries to get their forms working. A form designer is built into the package.

Click on the form in the "contact" button at the foot of this page to see my form using my host.

If you are still looking for a good host, click here to get all the web facilities that you will need for a long time.

Copy and Paste

HTML code is usually very forgiving, as long as you remember to match opening and closing tags.

The codes for forms are much more unforgiving of the slightest mistake. If you put a paragraph tag, or a bold tag, or a graphics tag in the wrong place, you can observe the result, and correct it. But if you make a mistake in a form, nothing happens. How are you to find the fault if nothing happens?

I spent many hours cursing one host because their form service didn't work. I was just about to make a fool of myself, by writing a nasty letter to support, when I spotted that I had spelled "action" as "acion".

When I was a computer programmer, I learned the value of copy and paste techniques. Rather than writing out blocks of code and getting them wrong, I copied blocks of code that already worked, then changed the details, leaving the framework the same.

You can do the same. Copy a block from the example given in the next lesson, leaving the tags the same, and the input type the same, changing the names and values only.

If you want six menu items, and I have only shown five, copy a line and paste it after the other five lines. Have a text editor open with this form example, and open your HTML editor at the same time. Then copy what you want from the text editor to the HTML editor.

Important The new standards for html require you to put quotes round variables all the time. If you look at my source code you will find that I often don't, because I wrote these pages several years ago. That means that if browsers ever refuse to operate on non-standard code I will have to go through and put in the quotes in all my pages.

Here is a simple example

It will be repeated and added to in the next lesson. Note that it starts and ends with the form tags. At the end of the page you can see how it will display in your browser.

===============================

<form action="/cgi-sys/formmail.pl" method="post">

<input type=hidden name=recipient value=username@yourdomain.com>

<input type=hidden name=subject value=test><p>

<input type=hidden name="env_report" value="REMOTE_HOST,HTTP_USER_AGENT">

Please enter your comments?<br>
<textarea name=Comments rows=4 cols=50> default text </textarea><p>

This is a drop-down menu. It allows only one choice. Note the bias to the most expensive.
<select name=quality>
<option> Cheap and nasty</option>
<option> Standard</option>
<option selected> Connoseur hand-crafted</option>
</select><p>

This is a scroll box which allows multiple entries by holding down the control key. We have a glut of brick letterboxes.
<br> <select multiple name=Letterbox>
<option> Tin Can</option>
<option> Old Log</option>
<option selected> Brick</option>
<option> Concrete</option>
<option> Milk Crate</option>
</select><p>

<input type=submit value="Send in the data">
</form>

===============================

Most hosts use formmail.pl so the first line between the start form tag and the end form tag must be
<form action="/cgi-sys/formmail.pl" method=post>
or you will not receive the results. Copy and paste the line to avoid mistakes, then adjust the path to whatever your host tells you is the right path for formmail. It will usually be as above, but check with your host if it doesn't work. Your host might not even use formmail, but some other script..

There are three HTML tags for types of inputs that you will use. Mostly you will use the input tag, which I shall cover in the next lesson. The other two covered here are textarea and select with start and end tags for each of them.

name

Each type of input must have a name, because that is what the information you receive will be labelled. It is no use receiving data "23" when you don't know if it is street number, age, or the number of items purchased. So you give it a name, and when you get the information, it will say "Age: 23"

value

Most of the inputs can have a value specified. There may be a default value if you don't specify one. The values sometimes show words for the visitor to over-write, and sometimes define an input.

textarea is used when your visitor has to write a lot, for instance, visitor's comments. It is important to have both start and end tags.

select offers a compact way of data entry. You can have either a pop-up menu which allows only one input, or a scroll-box from which you can select as many lines as you like, by holding down the control key as you click your selections. Visitors hate long forms, so use a drop-down menu, taking up a tiny space, rather than a collection of radio buttons, as shown in next lesson.

Next lesson you will have a complete form, which you can save to a text file from which you can copy and paste. Here is a short form that only uses what we have covered this lesson. I was a postman for several months, delivering mail to all sorts of strange letterboxes. So I imagined that I want to sell strange letterboxes, and this form is designed to do so!

Here are the points you should learn from the sample form

The opening form tag contains the instructions that will work with most modern hosts. You will have to see if your host can help you to set up the first line so that it works. If you don't have a host,
look at your choices here.

Hidden types are ones that don't appear on the screen because they require no input from the visitor.
The name in this case must be "recipient" because it tells the computer where to send the information. You do want to receive the information, don't you?
value is your e-mail address.

Next section: name must be "subject", for the value to appear in the subject field of the e-mail that you receive.

Next section: What it does, is tell you who referred the visitor to you (usually a search engine), and what browser they were using.

Next section: This tells your visitor what you expect in the text area.

Next line: name is what appears in the information you get, to describe the text that has been typed into the box. Use whatever name makes sense to you. You don't need to use the rows and columns specifications, but each browser will do something different if you don't. So keep in control by specifying them. The text will scroll after the box is filled.

Next section: The first line tells your visitor what do do - such as click the arrow. Note there is a start and end tag for the group. Your choice of name applies throughout. Each line in the menu must be enclosed between option tags. If you want one choice to be highlighted, add the word selected to the opening option tag.

The main difference in the next group (which produces a scroll box) is the word "multiple" in the opening select tag. This tells the computer that multiple entries can be made by holding down the control key while clicking each choice.

Note: both select versions can have a size specified. If you specified a number of two, it means that any lines more than two would appear in a scrolling window. Unfortunately, some browsers don't display a scrolling window properly, so it is best not to use this facility.

The final "submit" input is necessary if you want to receive results. The value is what will appear on your submit button. You can use a form in an interactive manner with Java Script for instance, in which case you may not need a submit button, or the action line either.

I have missed out the submit button in the display, because I don't really want to sell you a letterbox. If you miss out the phrase "Send in the data" or whatever phrase you prefer to use, the button will be labelled "Submit Query"

How the code works

Here is how the example code shown will appear, except that it won't transmit a message. Try clicking on the various scroll boxes to see how they change. You are in complete control over where the different inputs are positioned, and the words of introduction for each of them.

If you really want to get clever, you can even use a table to position everything where you want it.

===================================

Please enter your comments?
default text

This is a drop-down menu. It allows only one choice. Note the bias to the most expensive.

This is a scroll box which allows multiple entries by holding down the control key. We have a glut of brick letterboxes, so encourage you to click on that field!

Next html tutorial about forms will cover the use of the input tag which is used for most of the possible input methods.