Creating an HTML Form
The HTML for a Web form is fairly simple. It uses plain HTML tags, and most Web editors can do it for you. This page explains the parts of a form and how to make your own. The HTML code is given, as well as the instructions for Macromedia Dreamweaver, the HelpDesk's supported Web editor. Keep in mind that the terminology should remain fairly constant across Web editors, so you can use the information here in conjunction with the help files for your editor of choice.
This is a pretty long page, so you may want to use the index in the sidebar.
Starting an HTML Form
Like all HTML items, you must start a form with the proper tag. You must also end it with an ending tag. So your entire form should be enclosed between these tags:
<FORM></FORM>
The beginning FORM tag will have attributes. You will examine them
in more detail when you attach the form to a script. The attributes
are METHOD and ACTION.
In a Web editor, look for the option to insert a form area. In Dreamweaver, go to the Insert menu and choose Form. (There is also a Form icon on the Insert toolbar in the "Forms" section.) This takes care of both your beginning and ending tags and gives you an area in which to insert the other form elements
Important: Do not allow your form tag to overlap other tags! You can nest tags inside each other, but not overlap. Netscape in particular will not allow your form to be used if your form tags overlap other tags.
For example, this is allowed: <B><FORM> </FORM></B>
This is not allowed: <B><FORM> </B></FORM>
This often becomes an issue within tables. Your form should either enclose the entire table or be located completely in one table cell. You cannot begin your form in one table cell and end it in another.
Another word of warning: Some Web editors allow you to insert form elements without putting them in a form area. This is invalid HTML, and is unsupported by many browsers, including Netscape.
Form Elements
The parts of the form you usually see are called form elements. If you are using a Web editor, you should be able to find a toolbar or menu that allows you to insert form elements. In Dreamweaver, you can go to the Insert menu, chooseForm Objects, and select an element from the list. You can also use the "Insert" toolbar/palette, which is turned on using the Window menu. This toolbar has a "Forms" section with the various elements.
Most elements will have at least three parts:
- what type of element it is
- what name it is given
- a value
So, if you wanted to get someone's name, you would use a type of element called a text field and name it "name." Once the form was filled out and submitted, the value of "name" would be the user's name.
Text Field
A text field is used when you want to give the user a single line to enter information in. It looks like this:
There is only one tag used to create this element:
<INPUT TYPE="text" NAME="name" VALUE="" SIZE=30>
The INPUT TYPE="text" specifies a text box. The NAME attribute
labels the information in the box. For example, if the text box was
being used to collect the first name of the person filling it in, you
might put NAME="firstname". VALUE is the default text to
put in the box, if any. You can leave it blank. SIZE indicates the
character width of the box. Note: browsers vary widely in their implementation
of the size attribute.
Text Area
The text area is similar to the text box in use, but it is implemented differently. You use it when you want your user to be able to enter more than one line of information. You see this used to give people the opportunity to leave comments. It looks like this:
The code that produced this text area is this:
<TEXTAREA NAME="name" ROWS=3 COLS=30 WRAP="virtual"></TEXTAREA>
Note that, unlike the text box, there is a beginning and an ending tag. If you want a default value, type it as plain text in between the two tags.
Once again the NAME attribute labels the information
entered in the text box. ROWS specifies how tall the text area is,
while COLS works the same as SIZE for text boxes. Note that ROWS only defines how many rows are displayed; if more rows are input,
the scroll
bar will become active.
The WRAP="virtual" attribute is not an official HTML specification,
but it works in some browsers (such as Internet Explorer) to cause
input text to automatically wrap to fit the text area.
Check Boxes
A check box can be used either singly or in groups to allow the user to select zero, one, or more options from a list. You might see one used by itself like this:
You might see a group of checkboxes used like this:
This is the code used to make each of the boxes above:
<FORM>
<LABEL>Check here if you like ice cream:
<INPUT TYPE="checkbox" NAME="pref" VALUE="yes"></LABEL>
</FORM>
<FORM>
Check all the flavors of ice cream that you like:
<LABEL><INPUT TYPE="checkbox" NAME="flavor" VALUE="vanilla"> vanilla</LABEL>
<LABEL><INPUT TYPE="checkbox" NAME="flavor" VALUE="chocolate"> chocolate</LABEL>
<LABEL><INPUT TYPE="checkbox" NAME="flavor" VALUE="strawberry"> strawberry</LABEL>
</FORM>
In each case, the INPUT TYPE="checkbox" specifies that we
are creating a checkbox. The NAME attribute gives a name to the group
of boxes. If the box is in a group by itself, it should have a unique
NAME. Note that the three checkboxes in the "flavor" group
all have the same name. They are distinguished by their unique
VALUEs.
When the form is submitted, the name of the checkbox group will have the value(s) of the checked box(es). If there are multiple values, they will be separated by commas.
The LABEL tag associates text with a form element for accessibility
purposes. Please get in the habit of using labels in your forms.
Radio Buttons
Radio buttons are used in groups where there can only be one answer. For example,
Notice that only one of the two buttons can be selected at a time. The code for this example is:
<FORM>
These are very long instructions!
<LABEL><INPUT TYPE="radio" NAME="answer" VALUE="true" CHECKED> True</LABEL>
<LABEL><INPUT TYPE="radio" NAME="answer" VALUE="false"> False</LABEL>
</FORM>
The structure is the same as that for the checkboxes, except that the INPUT TYPE is now "radio". The CHECKED attribute is what caused the "true" button to be the default selection. You can use the same attribute with checkboxes if you want them to be checked by default.
Buttons
Buttons can be used for many tasks. The most common are submitting or resetting the form. They look like this:
<INPUT TYPE="submit" NAME="Submit" VALUE="Submit
this form">
<INPUT TYPE="reset" NAME="Reset" VALUE="Reset
this form">
This is fairly self-explanatory. The type of button tells what it does. The name is optional unless you are using a script that requires it. (A form can have two or more submit buttons, and the script can tell which button was used based on its name.) The value is what appears on the button.
Other Element References
This is by no means an exhaustive list of form elements. You can use pop-up menus, or even hidden fields. Here are some other references:
Making Your Form Do Something
Your form doesn't do anything without a program to process the information. This program must be on the server; if you are publishing to bama, you have multiple options as to what to use. Once you have decided on a script, you need to know two things:
- Where it is located.
- How it takes information. Your script should tell you whether you need to use the POST or GET method. (If you are given the choice, try POST.)
This is when you use those attributes in the beginning FORM
tag. The METHOD attribute is "post" or "get," as
determined by your script. The ACTION attribute points to the script
you are using.
For example, this is the beginning tag for the HelpDesk Search form:
<FORM ACTION="/cgi-bin/cgiwrap/~helpdesk/search.pl" METHOD=GET>