HTML Forms

Forms allow users to input information and to obtain a response from a web site. Here is an example:

A registration form, like the one above, is processed on the Web server. The server needs to capture the information and store it in a database. The JavaScript that we are learning works on clients, not servers.

Very often, JavaScript is uses to "pre-process" form information (make sure that people fill out required fields, for example). Then, the actual processing of the form is done by a program on the Web server.

In this course, we will use JavaScript to handle all kinds of form processing, including search queries, calculator responses, and database lookups. When you work on an actual Web site, you probably will have to learn another language, such as Java or Perl, to handle server-side processing. But the techniques that you learn here can be transferred easily to those languages.

The <form> tag

Forms are set up using HTML codes for the various elements, such as text boxes and check boxes. Each web form is contained inside <form></form>tags.

When a form is processed on the server, there is additional information inside the <form> tag. A complete tag might say

It is a good idea to name your form, because sometimes you will put multiple forms on a page, and naming each form helps you keep track of them.
We will not be using the method or the action properties. Those are used when the form is processed by the server. We will not be getting into server processing in this course.
We also will not be using the onSubmit = event handler, because submitting a form means sending it to the server. Instead, we will use the onClick = event handler, which works when the user presses a button for a form that is not being submitted.

HTML codes for form "widgets"

The term "widgets" is used to cover all the different type of input elements that can be used in a form. Here is some information about the various widgets:

Widget	Sample Usage	HTML Coding
Text Box	Type in my last name (Kling)	<input type = "text" name = "lastname">
Select Box (Pick List)	Choose from a list of states	<select name = "state" size = "1"> <option value = "MD">Maryland <option value = "VA">Virginia< /select>
Radio Button	Choose either male or female	<input type = "radio" name = "gender" value = "male">male <input type = "radio" name = "gender" value = "female">female
Check Box	Check if interested in newsletter	<input type = "checkbox" name = "newsletter" value = "checked">
Text Area	Type a long comment message	<textarea name = "comments" rows = "3" cols = "40"> </textarea>

Some additional notes about various form widgets:

The width of a text box can be specified as a property within the tag. For example, to create a text box that has room for seven characters, you could specify
<input type = "text" name = "nickname" width = "7">
In this case, the person could keep on typing for many characters, even though the box will just be 7 characters wide.
You can stop someone from typing extra characters, by setting a property called maxlength, which freezes the keyboard and causes a bell to ring when the user types too much. This is a horrible approach, and I do not recommend it.
A select box can be enlarged by choosing, for example size = "3", which would show three options at a time. Showing more options takes up more space, but when there are many options it makes the select box easier to operate.
A radio button is for choices that are mutually exclusive. To work correctly, all of the options for a radio button must be given the same name but each must be given a different value.
With a radio button or a checkbox, you can cause the form to load with a value checked by typing the word checked within the <input> tag. Sometimes, this is helpful. Often, it is sleazy.
For a text area, putting in a larger number of rows will make the area taller. Putting in a larger number of columns will make the area wider.

Other Form Elements

Usually, the user clicks a button when he or she is finished with a form. There are three types of HTML buttons.

<input type = "submit">
This is called a "submit" button. It is used for interactions with a server--we will not use it in this course.
<input type = "reset">
This is a "reset" button. When it is pressed, all of the user inputs are eliminated, and the form reverts to the way it was before the user started to fill it out. It has gone out of fashion, and probably deserved to.
<input type = "button" name = "mysubmit" value = "submit">
This is a generic button. It is very flexible. The value = is what will be printed on the button. So the user could see a button that says "submit" or "press here" or whatever I put for a value.

Another "widget" is a textbox to input a password:
<input type = "password" name = "userpass">
With this box, what the user types will be covered in asterisks.

Not to be confused with a password box is a hidden form field.
<input type = "hidden" value = "x---o----">
The hidden field allows you to store values in a form in order to use them later, without cluttering up the user's page. For example, if you have an interactive game, the hidden fields can store information from previous moves.

Finally, in the form at the top of this page I used two HTML tags. I surrounded the form with <fieldset></fieldset> tags. These created a rectangle around the form.

Also I put the words "Registration From" inside <legend></legend> tags. This put those words along the top border of the form.

Other than use <br> tags between form elements, I did not do much to create white space or align the form elements. In practice, it is worth taking the trouble to align form elements carefully, because a poorly-aligned form detracts from both appearance and usability.

Page created by Arnold Kling. Last Modified August 2, 2001.