How do you
know what your visitors think? Simple - ask them. And provide them
with a form so they can easily pass along their thoughts, concerns,
even requests or orders, to you. The elements making up forms are
diverse, but creating your own forms is not hard at all. Read Matt
Doyle's "Building Forms" to learn how the basic elements of forms
work. Go ahead – add a form to your site. Forms add interactivity to
a static Web experience and put you in touch with your public.
Once you get the basics down cold, move on to Steve Adcock's
"Five Basic Tips for your Forms." Short and to the point, you'll see
how to get the most out of your forms and maybe even improve your
response rates through better usability design. Your HTML might be
technically correct, but your responses will dwindle if your forms
are unprofessional or boring.
Building Forms This tutorial will show you how to create forms in
your Web pages using HTML. Forms allow you to make your site
interactive - your users can use the forms on your site for giving
you feedback via email, navigating your site, posting messages and
other content to your site, voting and polling, and almost anything
else you can dream of!
In this tutorial, we'll start off by looking at the
<form> tag, the basic building block of Web
forms. Then we'll look at 8 different types of fields that you can
place in your form, including text fields, checkboxes, radio
buttons, list boxes, text areas, hidden fields, password fields and
file upload fields.
After that, we'll show you how
to use the submit, image and reset buttons, and how to create
generic form buttons. Buttons are needed to "activate" your form,
for example, to enable the user to send the form after they've
filled it in.
Finally, we'll briefly look at ways to process
the results of your forms after they've been
The FORM tag All HTML forms
are created using the <FORM> tag: <form method="xxxx" action="xxxx">
(form fields in here)
attribute controls how the information that the user enters in the
form is sent to the server. The two options are:
Sends the form data as part of the URL (e.g.
script.cgi?name=Joeemail@example.com). This is the
default option. It's useful and efficient for small amounts of
data (e.g. a search engine query) and it's easy for the user
to refresh the results of the form by just pressing the
browser's refresh button. However it cannot be used for large
amounts of data (more than a few hundred bytes).
Sends the form data encoded in the HTTP data stream. This
is recommended for most types of forms (e.g. feedback forms
and form mailers). The user will not see the form data in the
URL. Large amounts of data can be sent this way. Unlike the
GET method, the user cannot easily refresh the form results
page - they usually see a dialog asking if they want to resend
the form data - but this is often a good
The action attribute specifies where the form
data submitted by the user will be sent. Usually this is the URL of
a script on the server - for example, http://www.yoursite.com/cgi-bin/feedback.cgi or http://www.yoursite.com/poll.asp.
Form Fields Now that we've covered the
basic FORM tag, it's time to put some fields in our
Form fields include things like text boxes, checkboxes,
radio buttons, and drop-down lists. Each form field has a name and a
value. The name is used by the server-side script or other program
to identify the field, and the value is the data that is entered by
We'll look at each of the available form field
types in turn, and show examples of each field.
Fields Possibly the most widely used form field is the
text entry field. This is a simple box into which the user can enter
small amounts of text data, such as their name or email address. It
takes the format: <input type="text"
name="xxxx" value="xxxx" size="xxxx"
The name attribute is the
name of the field (for example, email_address or age). The value
attribute allows you to provide a default value that will appear in
the box (the user can change the value if they want). This is
optional - to leave the field blank, use value="" or miss out the
value attribute altogether.
The size attribute specifies the
physical size (width) of the form field, in characters. You can miss
out this value in which case the browser's default field size will
Finally, the maxlength attribute allows you to limit
the amount of characters the user can enter. If you leave this value
out, then the user can enter as much as they
are simple fields that can be toggled on or off with a mouse click.
A checkbox can have only one value - for example, yes, or
These fields are great for allowing the user to specify
a single item of data - for example, whether they want to receive
your newsletter or not, or to indicate that they have read your
terms and conditions.
attribute is the name of the field (for example, newsletter). You
can specify multiple checkboxes all with the same name, in which
case they will belong to the same group. When the form is submitted,
the values of all the checkboxes will be sent using the same field
The value attribute specifies the value that will be
submitted if the user checks the box. If the user clears the box (so
that it has no check mark in), then a null (empty) value will be
The checked attribute, if present, will display
the checkbox already selected. If checked is not present in the tag,
the checkbox will be displayed
Would you like to be
added to our mailing list? <form> <input type="checkbox"
name="mailing_list" value="yes" checked>
Buttons Radio buttons are similar to checkboxes, except
that only one radio button in a group can be selected at any one
time. (As with checkboxes, a radio button group is a collection of
radio buttons with the same name attribute.)
are useful for getting a user to pick from a choice of options. (If
you have a lot of options, consider using a list box instead.) The
radio button tag has the same attributes as the checkbox
attribute is the name of the field (for example, favorite_color).
You can specify multiple radio boxes all with the same name, in
which case they will belong to the same group. Only one radio button
in the group can be selected at any one time.
attribute specifies the value that will be submitted if the user
selects this radio button.
The checked attribute, if present,
will display the radio button already selected. If checked is not
present in the tag, the radio button will be displayed
Example: What is your favorite color? <form> <input type="radio"
name="favorite_color" value="red" checked> Red <input
type="radio" name="favorite_color" value="orange">
Orange <input type="radio" name="favorite_color"
value="pink"> Pink </form>
Boxes List boxes allow the user to select one or more
items from a list of available options. A list box takes the
<select></select> tag defines
the list box. The name attribute is the name of the list box (for
The size attribute specifies how
many list items will be displayed at once. If this attribute is not
present or is set to 1, then a drop-down box will be
The optional multiple attribute, if present, will
allow the user to select more than one option in the list by holding
down the Shift or Control keys.
Inside the <select></select> tag, one or
more <option> tags are placed. Each
<option> tag represents an item in
the list box. The value attribute is the value that will be
submitted if the user selects this option. The optional selected
attribute will pre-select this option when the form is first
In between each <option></option> tag, you
can place the text label that you would like to be displayed for
that option. Note that the text label does not have to be the same
as the option's value attribute. The text label is not submitted
with the form; it's just to guide the user.
1: Drop-Down List
What is your favorite sport? <form> <select name="favourite_sport"
size="1"> <option value="all" selected>I love all
Hockey</option> </select> </form>
2: 3-Line List
What is your favorite sport? <form> <select name="favourite_sport"
size="3"> <option value="all" selected>I love all
Hockey</option> </select> </pre> <form>
Areas If you need the user to input a large amount of
text (more than a single line), use the text area field. It takes the
<textarea name="xxxx" rows="xxxx"
cols="xxxx" wrap="xxxx"> (default text
Basic Tips for Your Forms
On the World Wide Web, forms are the
essence of communication, and yes, there is a method to its madness.
Presentation is everything on the web, and if you want feedback from
your visitors, you need to conform to their visual biases and
expectations on how forms should both look and act. Let's take a
quick look at 5 basic form tips.
1. Do not bore them.
Include what you need, throw away the rest. Do not make your
visitors write a book to send you feedback. Keep your forms short,
simple and to the point. Not only do your visitors have more to do
than fill out a lengthy form, they are sensitive to the information
they provide others, especially over the Internet. If this is a
comments form, ask their name, e-mail address and comments. You do
not need their location, date of birth or their favorite color.
2. Create data restrictions Have you ever
received a blank form? What about a name that spans out 100
characters? To prevent these common occurrences, place data
restrictions upon your form. For example, require certain form
article for more on requiring fields), or restrict the available
character count for a text box. How is this done? Let's take a look:
This is a typical text box named Name,
with a size of 20 and a maxlength of 10. This means that although
the text box will span 20 character positions to the right, only 10
characters will be allowed in that text box. This type of
restriction would work well with middle initial fields or state code
3. Start them off on the right track Is it
so much to ask that the user must click in the first box to begin
filling out the form? Yes! Well, this could be debatable, but a nice
feature none the less. Here is how you'd automatically place the
cursor in a particular text box.
this? If you already have a body tag, simply copy and paste from
onLoad to the right. What this says is place the cursor in the
'fieldname' text box in the first form of the page. Note, you can
place the cursor, by default upon page load, in any text box, but
logically, you'd place it in the first text box the user would fill
out, like Name, for example.
4. Organize the form
data Another good practice of forms is the use of a table to
organize the text and input elements. A common use is a simple
two-column table, the left column supplying the question or criteria
and the second column providing the actual form element.
5. Give them a confirmation Okay, it's simply a
matter politeness to thank the visitor for taking the time to fill
out your form, so after submission, the user should be presented
with a thank you page. Many server-side scripts written in ASP, Cold
Fusion, Perl, or PHP have this feature built in.
these 5 easy and basic tips can improve your response frequency and
make your forms look and act more professionally. Remember, forms
are your best friend, so treat them well.