Planning Your Forms

Before you start creating complex forms for your web pages, you should do some planning that will save you time and trouble in the long run.

First, decide what information you need to collect. That might sound obvious, but you need to think about this before you start worrying about the mechanics of creating the form.

Next, review this information and match each item with a type of form control. Ask yourself which type of control is most suited to the type of questions you're asking. If you need a yes or no answer, radio buttons or check boxes work great, but the textarea element is overkill. Try to make life easier for the users by making the type of control fit the question. This way, analyzing the information using a script, if necessary, will be much easier.

You also need to coordinate with the person writing the CGI script to match variables in the script with the names you're assigning to each control. There isn't much point in naming every control before collaborating with the script authorafter all, you'll need all the names to match. You also can create lookup tables that contain expansive descriptions and allowable values of each form control.

Finally, you might want to consider validating form input through scripting. Using JavaScript, you can embed small programs in your web pages. One common use for JavaScript is writing programs that verify a user 's input is correct before she submits a form. I'll discuss JavaScript in more detail in Lesson 12, "Introducing JavaScript."

Summary

As you can see, the wonderful world of forms is full of different types of form controls for your visitors . This truly is a way to make your web pages interactive.

Be cautious, however. Web surfers who are constantly bombarded with forms are likely to get tired of all that typing and move on to another site. You need to give them a reason for playing!

Table 10.1 summarizes the HTML tags used today. Remember these points and you can't go wrong:

Table 10.1. Today's HTML Tags

Tag	Use
`<form>`	Creates an HTML form. You can have multiple forms within a document, but you cannot nest the forms.
`action`	An attribute of `<form>` that indicates the server-side script (with a URL path ) that processes the form data.
`enctype`	An attribute of the `<form>` tag that specifies how form data is encoded before being sent to the server.
`method`	An attribute of `<form>` that defines how the form data is sent to the server. Possible values are `get` and `post` .
`<input>`	A `<form>` element that creates controls for user input.
`type`	An attribute of `<input>` that indicates the type of form control. Possible values are shown in the following list:
`text`	Creates a single-line text entry field.
`password`	Creates a single-line text entry field that masks user input.
`submit`	Creates a Submit button that sends the form data to a server-side script.
`reset`	Creates a Reset button that resets all form controls to their initial values.
`checkbox`	Creates a check box.
`radio`	Creates a radio button.
`image`	Creates a button from an image.
`button`	Creates a pushbutton. The three types are Submit, Reset, and Push, with no default.
`hidden`	Creates a hidden form control that cannot be seen by the user.
`file`	Creates a file upload control that enables users to select a file with the form data to upload to the server.
`<button>`	Creates a button that can have HTML content.
`<textarea>`	A text-entry field with multiple lines.
`<select>`	A menu or scrolling list of items. Individual items are indicated by the `<option>` tag.
`<option>`	Individual items within a `<select>` element.
`<label>`	Creates a label associated with a form control.
`< fieldset >`	Organizes form controls into groups.
`<legend>`	Displays a caption for a `<fieldset>` element.

Use the form element to create your forms.
Always assign an action to a form.
Create form controls with the input element or the other form control elements.
Test your forms extensively.