Web Forms

There are many times when it would be nice to be able to provide a quick and easy way for the visitors to your web page to send you information. While an email link makes it easy for your visitors to contact you via email, sometimes you have specific questions and want to make it as easy as possible for your visitor to send this information.

I'm sure you've already seen web pages with little "fill in the blank" type of boxes or buttons to click to specify a choice. These are done with forms. What you may not realize is how easy they are to create.

How easy is easy? How Do Forms Work?

There are 3 parts to a form:

The Form Action tag
The input fields
The Submit button

As with most HTML tags, you'll need an opening and closing form tag. The opening form tag includes an action that determines what will be done with the form.
Example:
<.FORM ACTION="mailto:yourname@email" method="Post">

The first part, FORM, is pretty clear. This is denoting the start of a form. The ACTION attribute determines what happens to form data when the submit button is clicked. The data can be sent to you via email using a "mailto" or it can be sent to some sort of form handler (Javascript, CGI, etc). For this tutorial, we'll be using a "mailto" form action. Just as with a mailto link, data collected from the form will be sent to your email address. Before moving on, let's just add a bit more information to the opening form tag. encytpe="text/plain" will make the email you receive easier to read. So we have:
<.FORM ACTION="mailto:yourname@mail" method="POST" enctype="text/plain">

All forms end with the closing </FORM> tag. But before we discuss that, we have to cover form input and submission. So let's move onward and upward.

Throughout this tutorial we'll be showing you html tags. In order to get them to display properly, we've added a period between the opening < and the tag. You should remove this when writing your html code. Remember, use <tag> and not <.tag>

Nested between these two tags will be the tags for the methods you choose to have your visitors use to enter their data. Let's take a look at these tags next. Don't worry. Near the end of this tutorial, we'll put it all together with a sample form that you can download and use.

Forms provide several different ways for your visitor to enter information. These are text-input boxes, text areas, check boxes, radio buttons, and pull down selection menus.

Text input boxes provide a single line for your visitor to enter information.
Text areas give your visitor a multi-row box to enter a more extensive amount of text than is possible using the single line text input.
Check boxes can provide groups of small boxes that allow your visitor to select one or more of the choices that you offer.
Radio buttons are similar to check boxes but will only allow your visitor to select one of the choices in the group.
Selection menus provide a pull down listing of choices for your visitor. You can specify whether one or more of these choices may be selected.

Getting Started - The Input Tag

The first tag we will look at is the input tag, <.INPUT>. This is a very versatile tag and can be used to add a space for text input, checkboxes, radio buttons, submit and reset buttons.

Using the TYPE attribute in the tag sets the kind of input that you want to use. You will also give the field a name by using the NAME attribute.

To add a field to your form that will allow your user to enter their email address, you can use something like:
<.INPUT TYPE="text" NAME="email">

As you can see from the value of the TYPE attribute, this tag will create a box that your visitor can enter a text response into. The name of this field is "email".

You can set the length of the box that appears on your page by using the SIZE attribute.
<.INPUT TYPE="text" NAME="email" SIZE=30>
This will set the length of the box to allow the display of 30 characters. The maximum number of characters that your visitor can enter can be set by the MAXLENGTH attribute.
<.INPUT TYPE="text" NAME="email" SIZE=30 MAXLENGTH=50>
The tag above will produce a box 30 characters wide into which your visitor can enter up to 50 characters.
A variation of the text type is the TYPE="password". Although there is no real encryption or coding of the data done by this input, the text entered in the box is displayed as asterisks or "*" symbols. This is a convenient feature if the data being sent is of a confidential nature. An example of this tag is:
<.INPUT TYPE="password" NAME="quiet" SIZE=30>

Working With Checkboxes and Radio Buttons

A second type of input that can be added to your form with this tag is the checkbox. This is used to allow your visitor to check a small box next to the options you offer. Your visitor will be able to select one or more of the boxes. The checkbox inputs are grouped together by using the same name for each input in the group.

An example of a checkbox group would look something like:
In making my web page I used:
<.INPUT TYPE="checkbox" NAME="used" VALUE="HTML code">HTML code
<.INPUT TYPE="checkbox" NAME="used" VALUE=""AOLPress>Netscape Composer
<.INPUT TYPE="checkbox" NAME="used" VALUE="Front Page">FrontPage
<.INPUT TYPE="checkbox" NAME="used" VALUE="Other">Other

An input that works quite similarly to the checkbox is the radio button. This also provides a method for your visitor to select an option from your choices. Unlike the checkbox, the radio button allows only one selection to be made. The radio button group also uses the same name for each field in the group.
An example would look something like:
My favorite meal is:
<.INPUT TYPE="radio" NAME="meal" VALUE="Breakfast">Breakfast
<.INPUT TYPE="radio" NAME="meal" VALUE="Lunch">Lunch
<.INPUT TYPE="radio" NAME="meal" VALUE="Dinner">Dinner
<.INPUT TYPE="radio" NAME="meal" VALUE="Too busy to eat">I am too busy to eat.

A Textarea allows for freeform input

There are often times when you would like to give your visitor some additional space to enter more information. Or perhaps you would like more information and want to use a larger area to prompt your visitor to feel free to enter some more information than can be placed in a standard one line input box. The multiline textarea tag sets your user free from the constraints imposed by the single line input tag.

The basic textarea tag looks something like:
<.TEXTAREA NAME="moredata" COLS=40 ROWS=6><./TEXTAREA>

Note that this tag has some attributes that were not used in the single line text input. The first is the COLS attribute, This sets the width of the text box in characters. The ROWS attribute sets the height of the box in lines of text. Please also take note that this tag has a closing tag , <./TEXTAREA>, unlike the <.INPUT> tag. You can specify some text to both be displayed in the box as a sample for the type of information you want by enclosing it between the opening and closing tags.
See this example:
<.TEXTAREA NAME="moredata" COLS=40 ROWS=6>Please send more data about yourself. Do you have any hobbies?<./TEXTAREA>

Adding the "Submit" Button

How will this form be sent to you once the data has been entered? You'll need a submit and reset button. These are used so that your visitor can send the information in the form or clear all the fields to start over. The submit button will go back to look at your form action line. It will do whatever the form action tells it to do with the data. In this case, it will mail the data to you via the mailto link.

Examples of these are: <.INPUT TYPE="submit" VALUE="Send it!">
which will place a button with a message "Send it!" on your page.
And
<.INPUT TYPE="reset" VALUE="Start over">
which will place a button with a message "Start over" on your page.

If you want to stop here, you could make a very useful form. To stop here and jump to the sample form, Click Here.

Advanced form techniques

The "Select" Tag The text area tag gives your user plenty of space to enter information and the radio button and checkbox both allow for choosing among different options. These fields, however, do take up quite a bit of space on the screen and can lead to a form that appears to be long and unwieldy. A method of providing a number of choices to your user, while also keeping a compact look for your form is to use the <.SELECT> tag.

This is used along with the <.OPTION> tag to produce a pull down type of menu. The <.SELECT> tag is used to set the overall control over the field, while the <.OPTION> tag is used to define the individual items in the menu. Your visitor will be able to select one of the options presented by the pull down menu, much like the radio button input.

The HTML code for a sample pull down menu would look something like...
My computer's operating system is
<.SELECT NAME=system>
<.OPTION>Windows 98
<.OPTION>Windows Me
<.OPTION>Windows 2000
<.OPTION>Windows XP
<.OPTION>Mac OS X
<./SELECT>

While this may seem logical to allow one choice here, what if your user has two or more computers, using different operating systems? We can take care of this possibility by using the MULTIPLE attribute in the <.SELECT> tag.
My computer's operating system is
<.SELECT NAME=system MULTIPLE>
<.OPTION>Windows 98
<.OPTION>Windows Me
<.OPTION>Windows 2000
<.OPTION>Windows XP
<.OPTION>Mac OS X
<./SELECT> This will allow your visitor to select more than one of the options, somewhat like the checkbox input.

You are also able to set the number of options visible by using the SIZE attribute in the <.SELECT> tag.
In this example, three options will be visible.
My computer's operating system is
<.SELECT NAME=system MULTIPLE SIZE=3>
<.OPTION>Windows 98
<.OPTION>Windows Me
<.OPTION>Windows 2000
<.OPTION>Windows XP
<.OPTION>Mac OS X
<./SELECT>

The "Option" Tag

There are also some tools that you can use within the <.OPTION> tag to control the data that will be sent to you. Using the example above, if we were not really interested in the exact operating system used but only whether an up to date version was being used, we could do some behind the scenes tricks to get the data that we need.

My computer's operating system is
<.SELECT NAME=system>
<.OPTION VALUE="old">Windows 95
<.OPTION VALUE="new">Windows 98
<.OPTION VALUE="old">Windows 3.1
<.OPTION VALUE="old">Mac OS 7
<.OPTION VALUE="new">Mac OS X
<./SELECT>

We also have the ability to pre-select an option by using the SELECTED attribute in the <.OPTION> tag.
My computer's operating system is
<.SELECT NAME=system>
<.OPTION>Windows 98
<.OPTION>Windows Me
<.OPTION>Windows 2000
<.OPTION>Windows XP
<.OPTION SELECTED>Mac OS X
<./SELECT>

Sample Form

A sample HTML file for a form that allows your visitors to send you email about your web site is shown below. You can copy this into a text editor such as Notepad for PCs or SimpleText for Macs. Remove the period after each "<" bracket. Important: Please change the form action tag to your real email address.
Try copying the text below into your favorite text editor. Enter your remail address as specified above then save as a web page. OK, so far, so good. Now show me a more complex example!
See the input tags in action
Grab a more complex template ready for you to modify and use

Copyright pcrobin.com, 2002. Please do not reproduce without permission