Creating HTML Forms
Up to this point, everything in this guide has
focused on getting information out to others. (E-mail links, introduced in Chapter 8,
"Intra-Page and E-mail Links," are the one exception.) But HTML is a two-way
street; you can use your Web pages to gather information from the people who read them as
Web forms allow you to receive feedback, orders, or
other information from the readers of your Web pages. If you've ever used a Web search
engine such as Lycos or Excite, you're familiar with HTML forms. Product order forms are
also an extremely popular use of forms.
This chapter shows you how to create your own forms
and the basics of how to handle form submissions.
New Term: An HTML form is part of a Web page
that includes areas where readers can enter information to be sent back to you, the
publisher of the Web page.
Before you learn the HTML tags to make your own
forms, you should understand how the information that someone fills out on a form makes
its way back to you. You also need to have the person who runs your Web server computer
set it up to process your forms.
Every form must include a button for the user to
submit the form. When someone clicks on this button, all the information they have filled
in is sent (in a standard format) to an Internet address that you will specify in the form
itself. For that information to get to you, you have to put a special forms-processing
program at that address.
Almost all Internet service provider companies that
offer Web page hosting also provide pre-programmed scripts to their customers for
processing forms. The most common thing that such a script would do is forward the
information from the form to your e-mail address, though it might also save the
information to a file on the Web server or format the form data to make it easier for you
It's also possible to set things up so that much of
the form information can be interpreted and processed automatically. For example, server
software exists to authorize a credit card transaction automatically over the Internet,
confirm an order to the customer's e-mail address, and enter the order directly into your
company's in-house database for shipment. Obviously, setting up that sort of thing can get
quite complex, and it's beyond the scope of this guide to explain all the things you could
do with form data once it has been submitted. To Do: Before you start building your first
form, you should do the following:
- Ask your Internet service provider what they offer
for form processing scripts and what exact address your forms should send their
information to. In the next chapter, you'll see where and how to put that address into
- If you run your own Web server computer, the server
software probably came with some basic form processing scripts. Consult your documentation
to set them up properly and find out the address on your server where each is located.
- If you have a choice of several forms-processing
scripts, I recommend starting with the script to simply send the "raw" form data
to your e-mail address. The example in this chapter uses such a script. You can experiment
with fancier scripts later.
Once you have the address of your forms-processing
script, you're ready for the rest of this chapter. As usual, I recommend that you create a
form of your own as you read through my examples.
Every form must begin with a <FORM>
tag, which can be located anywhere in the body of the HTML document. The <FORM>
tag normally has two attributes, METHOD and ACTION:
<FORM METHOD="post" ACTION="/cgi/generic">
Nowdays, the METHOD is almost always "post",
which means to send the form entry results as a document. (In some special situations, you
may need to use METHOD="get", which submits the results as part of the
URL header instead. For example, "get" is sometimes used when
submitting queries to search engines from a Web form. If you're not yet an expert on
forms, just use "post", unless someone tells you to do otherwise.)
The ACTION attribute specifies the address
of the program or script on the server computer that will process the information a user
enters on a form. This is the address that your service provider or Web server manager
should be able to give you, as mentioned in the previous "To Do" section. If you
are a programmer, you can also write your own scripts in any language supported on the
The form in Figures 18.1 and 18.2 includes every
type of input that you can currently use on HTML forms. Figure 18.3 is the same form, as
it might look after someone fills it out. As you read through the rest of this chapter,
refer to these figures for an example of each type of input element.
Figure 18.1. All parts of a form must fall between
the <FORM> and </FORM> tags.
Figure 18.2. The form listed in Figure 18.1 uses
every type of HTML form input element.
Time Saver: Notice that most of the text in
Figure 18.2 is monospaced. Monospaced text makes it easy to line up a form input box with
the box above or below it and makes your forms look neater. To use monospaced text
throughout a form, enclose the entire form between <PRE> and </PRE>
tags. Using these tags also relieves you from having to put <BR> at the end
of every line because the <PRE> tag puts a line break on the page at every
line break in the HTML document.
Figure 18.3. Visitors to your Web site fill out the
form with their mouse and/or keyboard, and then click on the I Submit! button.
To ask the user for a specific piece of information
within a form, use the <INPUT> tag. This tag must fall between the <FORM>
and </FORM> tags, but it can be anywhere on the page in relation to text,
images, and other HTML tags. For example, to ask for someone's name you could type the
What's your first name? <INPUT TYPE="text" SIZE=20
What's your last name? <INPUT TYPE="text" SIZE=20
The TYPE attribute indicates what type of
form element to display, a simple one-line text entry box in this case. (Each element type
is discussed individually in the following sections.)
The SIZE attribute indicates approximately
how many characters wide the text input box should be. If you are using a proportionally
spaced font, the width of the input will vary depending on what the user enters. If the
input is too long to fit in the box, most Web browsers will automatically scroll the text
to the left.
MAXLENGTH determines the number of
characters the user is allowed to type into the text box. If someone tries to type beyond
the specified length, the extra characters won't appear. You may specify a length that is
longer, shorter, or the same as the physical size of the text box. SIZE and MAXLENGTH
are only used for TYPE="text" because other input types (check boxes,
radio buttons, and so on) have a fixed size.
Time Saver: If you want the user to enter
text without it being displayed on the screen, you can use <INPUT
TYPE="password"> instead of <INPUT TYPE="text">.
Asterisks (***) are then displayed in place of the text the user types. The SIZE,
MAXLENGTH, and NAME attributes work exactly the same way for TYPE="password"
as for TYPE="text".
Each Piece of Form Data
No matter what type an input element is, you must
give a name to the data it gathers. You can use any name you like for each input item, as
long as each one on the form is different. When the form is sent to the server script,
each data item is identified by name.
For example, if the user entered Jane and Doe
in the text box previously defined under the "Text Input" section, the server
script would receive a document including the following:
If the script mails the raw data from the form
submission to you directly, you would see these two lines in an e-mail message from the
server. The script might also be set up to format the input into a more readable format
before reporting it to you.
Figure 18.4 is a sample e-mail message from the form
in Figure 18.3. Notice that each data element is identified by the name given to it in
Figure 18.1. Your server script might present the data in a different format than that
shown in Figure 18.4, but it should include all the same information.
Figure 18.4. Clicking on the I Submit! button in
Figure 18.3 causes this information to be sent to a server script. (The script may then be
e-mailed to you.)
The simplest input type is a check box, which
appears as a small square the user can select or deselect by clicking. A check box doesn't
take any attributes other than NAME:
NAME="baby" VALUE="yes"> Baby Grand Piano
<INPUT TYPE="checkbox" NAME="upright"> Upright Piano
Selected check boxes appear in the form result sent
to the server script as follows:
Blank (deselected) check boxes do not appear in the
form output result at all. If you don't specify a VALUE attribute, the default VALUE
of "on" is used.
Time Saver: You can use more than one check
box with the same name, but different values, as in the following code:
NAME="pet" VALUE="dog"> Dog
<INPUT TYPE="checkbox" NAME="pet" VALUE="cat"> Cat
<INPUT TYPE="checkbox" NAME="pet" VALUE="iguana">
If the user checked both cat and iguana, the
submission result would include the following:
Radio buttons, where only one choice can be selected
at a time, are almost as simple to implement as check boxes. Just use TYPE="radio"
and give each of the options its own INPUT tag, as in the following code:
NAME="card" VALUE="v" CHECKED> Visa
<INPUT TYPE="radio" NAME="card" VALUE="m"> MasterCard
The VALUE can be any name or code you
choose. If you include the CHECKED attribute, that button will be selected by
default. (No more than one button with the same name can be checked.)
If the user selected MasterCard from the preceding
radio button set, the following would be included in the form submission to the server
If the user didn't change the default CHECKED
selection, card='v' would be sent instead.
Both scrolling lists and pull-down pick lists are
created with the <SELECT> tag. This tag is used together with the <OPTION>
<SELECT NAME="extras" SIZE=3 MULTIPLE>
<OPTION SELECTED> Electric windows
<OPTION> AM/FM Radio
No HTML tags other than <OPTION>
should appear between the <SELECT> and </SELECT> tags.
Unlike the text input type, the SIZE
attribute here determines how many items show at once on the selection list. If SIZE=2
had been used in the preceding code, only the first two options would be visible, and a
scrollbar would appear next to the list so the user could scroll down to see the third
Including the MULTIPLE attribute allows
users to select more than one option at a time, and the SELECTED attribute makes
an option selected by default. The actual text accompanying selected options is returned
when the form is submitted. If the user selected Electric windows and Turbocharger, for
instance, the form results would include the following lines:
Time Saver: If you leave out the SIZE
attribute or specify SIZE=1, the list will create a pull-down pick list. Pick
lists cannot allow multiple choices; they are logically equivalent to a group of radio
buttons. For example, another way to choose between credit card types would be:
- <SELECT NAME="card">
The <INPUT TYPE="text">
attribute mentioned earlier only allows the user to enter a single line of text. When you
want to allow multiple lines of text in a single input item, use the <TEXTAREA>
and </TEXTAREA> tags instead. Any text you include between these two tags
will be displayed as the default entry. Here's an example:
<TEXTAREA NAME="comments" ROWS=4 COLS=20>
Please send more information.
As you probably guessed, the ROWS and COLS
attributes control the number of rows and columns of text that fit in the input box. Text
area boxes do have a scrollbar, however, so the user can enter more text than fits in the
Just A Minute: Some older browsers do not
support the placement of default text within the text area. In these browsers, the text
may appear outside the text input box.
Every form must include a button that submits the
form data to the server. You can put any label you like on this button with the VALUE
<INPUT TYPE="submit" VALUE="Place My Order Now!">
A gray button will be sized to fit the label you put
in the VALUE attribute. When the user clicks the button, all data items on the
form are sent to the program or script specified in the FORM ACTION attribute.
Normally, this program or script generates some sort
of reply page and sends it back to be displayed for the user. If no such page is
generated, the form remains visible, however.
You may also optionally include a button that clears
all entries on the form so users can start over again if they change their minds or make
mistakes. Use this line:
|<INPUT TYPE="reset" VALUE="Clear
This Form and Start Over">
Custom Submit Button
You can combine forms with all the HTML bells and
whistles you've learned in this guide, including backgrounds, graphics, text colors,
tables, and frames. When you do so, however, the standard submit and reset buttons may
start looking a little bland.
Fortunately, there is an easy way to substitute your
own graphics for those buttons. To use an image of your choice for a submit button, type:
<INPUT TYPE="image" SRC="button.gif" NAME="buttonxy">
The image named button.gif will appear on
the page, and the form will be submitted whenever someone clicks on that image. You can
also include any attributes normally used with the <IMG> tag, such as BORDER
Just A Minute: When the form data is sent to
the server, the exact pixel coordinates of the click will be included as a data item with
the name you specify in <INPUT NAME>. For example, the line in the previous
paragraph might send
Normally, you should ignore this information, but
some server scripts use it to make the button into an image map.
There is no specific form type for a graphical reset
button, but you can achieve the same effect by putting an image link to the current page,
<A HREF="thispage.asp"><IMG SRC="cancel.gif"></A>
Time Saver: You can make a button that
cancels the form and proceeds to another page (ignoring all information the user has
entered so far) simply by linking to that other page. For example:
HREF="nodice.asp">Click here to cancel.</A>
Figures 18.5 and 18.6 show a jazzed-up version of
the "Get Me Rich Quick" form which uses customized submit and reset buttons.
Figure 18.5. The last <INPUT> tag on
this page creates a custom graphical submit button. The <IMG> tag after it
resets the form.
Figure 18.6. The HTML in Figure 18.5 combines
graphics, tables, and form input elements on this Web page.
If you want to send certain data items to the server
script that processes a form, but you don't want the user to see them, you can use the INPUT
TYPE="hidden" attribute. This attribute has no effect on the display at
all; it just adds any name and value you specify to the form results when they are
You might use this attribute to tell a script where
to e-mail the form results. For example, Figure 18.5 includes the following input element:
<INPUT TYPE="hidden" NAME="mail_to" VALUE="dicko">
which adds the following line to the form output:
You also found that you need to set up a script or
program to process form data before you actually create a form. Your Internet service
provider or server software vendor can help you do this.
Table 18.1 summarizes the HTML tags and attributes
covered in this chapter.
Table 18.1. HTML tags and attributes
covered in Chapter 18.
||Indicates an input form.
||The address of the script
to process this form input.
||How the form input will
be sent to the server. Normally set to POST, rather than GET.
||An input element for a
||The type for this input
widget. Possible values are CHECKBOX, HIDDEN, RADIO, RESET,
SUBMIT, TEXT, or IMAGE.
||The name of this item, as
passed to the script.
||For a text or hidden
item, the default value; for a check box or radio button, the value to be submitted with
the form; for reset or submit buttons, the label for the button itself.
||The source file for an
||For check boxes and radio
buttons, indicates that this item is checked.
||The width, in characters,
of a text input region.
||The maximum number of
characters that can be entered into a text region.
||For images in forms,
determines how the text and image will align (same as with the <IMG> tag).
||Indicates a multiline
text entry form element. Default text can be included.
||The name to be passed to
||The number of rows this
text area displays.
||The number of columns
(characters) this text area displays.
||Creates a menu or
scrolling list of possible items.
||The name that is passed
to the script.
||The number of elements to
display. If SIZE is indicated, the selection becomes a scrolling list. If no SIZE
is given, the selection is a pop-up menu.
selections from the list.
||Indicates a possible item
within a <SELECT> element.
||With this attribute
included, the <OPTION> will be selected by default in the list.
||The value to submit if
this <OPTION> is selected when the form is submitted.
- Q I've heard that it's dangerous to send credit
card numbers over the Internet. Can't thieves intercept form data on its way to me?
A It is possible to intercept form data (and any Web pages or e-mail) as it travels
through the Internet. If you ask for credit card numbers or other sensitive information on
your forms, you should ask the company who runs your Web server about "secure"
forms processing. There are several reliable technologies for eliminating the risk of
high-tech eavesdroppers, but it may cost you quite a bit to implement the security
To put the amount of risk in perspective, remember that it is much more difficult to
intercept information traveling through the Internet than it is to look over someone's
shoulder in a restaurant or retail store. Unless you service hundreds of credit card
transactions per day, it will probably never be worth it to a would-be thief to bother
tapping in to your forms data. Of the billions of dollars lost to credit card fraud each
year, so far exactly zero has been from "unsecure" Internet transactions.
Q Can I put forms on a CD-ROM, or do they have to be on the Internet?
A You can put a form anywhere you can put a Web page. If it's on a disk or CD-ROM
instead of a Web server, it can be filled out by people whether or not they are connected
to the Internet. Of course, they must be connected to the Internet (or your local
intranet) when they click on the submit button, or the information won't get to you.
- 1. What do you need to get from the people who
administer your Web server computer before you can put a form on the Internet?
2. Write the HTML to create a "guestguide" form that asks someone for his
name, sex, age, and e-mail address.
3. If you had created an image named sign-in.gif, how would you use it as the
submit button for the guestguide in Question 2?
|1. The Internet address of a
script or program which is set up specifically to process form data.
2. <HTML><HEAD><TITLE>My Guestguide</TITLE></HEAD>
<BODY> <H1>My Guestguide: Please Sign In</H1> <FORM
METHOD="post" ACTION="/cgi/generic"> Your name: <INPUT
TYPE="text" NAME="name" SIZE=20><P> Your sex: <INPUT
TYPE="radio" NAME="sex" VALUE="male"> male <INPUT
TYPE="radio" NAME="sex" VALUE="female"> female<P>
Your age: <INPUT TYPE="text" NAME="age" SIZE=4><P> Your
e-mail address: <INPUT TYPE="text" NAME="email"
SIZE=30><P> <INPUT TYPE="submit" VALUE="Sign In">
<INPUT TYPE="reset" VALUE="Erase"> </FORM>
3. Replace <INPUT TYPE="submit" VALUE="Sign In">
<INPUT TYPE="image" SRC="sign-in.gif"
- You should make a form using all of the different
types of input elements and selection lists to make sure you understand how each of them