Chapter 7. Form Handling

Any time you need to gather information from the users of your Web sites, you'll need to use a form.

Forms can contain most of the usual graphical interface elements, including entry fields, radio buttons, check boxes, pop-up menus, and entry lists. In addition, HTML forms can contain password fields, shielding the user's input from prying eyes.

Once the form is filled out, a click on the form's Submit button sends the form's information to your Web server, where a CGI (that stands for Common Gateway Interface, and it's a script that runs on the Web server) interprets the data and acts on it. Often, the data is then stored in a database for later use. It's useful to make sure that the data the user enters is "clean," that is, accurate and in the correct format, before it gets stored on the server side. JavaScript is the perfect way to check the data; this is called form validation. Though the CGI can do the validation (and should as a backup measure, since some people will have JavaScript turned off in their browsers), it's much faster and more efficient for your users to also do it on the client's machine with JavaScript.

In this chapter, you'll learn how to use JavaScript to make sure that your forms contain valid information, check data in one field against the data in another field, and highlight incorrect information to let the user know what needs to be changed.

Table 7.1. Just Enough HTMLForms

Tag	Attribute	Meaning
form		A tag that contains any of the following tags, making them into a valid HTML form
	action	The name of the server-side CGI that is run when control is passed back to the Web server
input		A form field of varying types, depending on the value of the type attribute
	class	The class assigned to the element
	id	The unique id assigned to the element
	name	Primarily used to group sets of radio buttons; also is a name that JavaScript can use to refer to this field; as with other JavaScript objects, no spaces or other punctuation is allowed, and it cannot start with a number
	maxlength	The maximum length entry that the user may enter in this field
	size	The number of characters that are displayed on the page
	type	The type of input required; possible values are button, check box, image, password, radio, reset, submit, and text
	value	The preset value of this form field
label		Used to specify labels for controls that do not have built-in labels, such as text fields, check boxes, radio buttons, and menus
	for	Associates the label with a specific element's id
option		The possible options available inside a select tag
	selected	Indicates whether this option is selected as the default
	value	The preset value of each option
select		A form field that is either a pop-up menu or scrolling list, based on the size attribute
	class	The class assigned to the element
	id	The unique id assigned to the element
	size	The number of options that are displayed on the page; if the attribute is set to 1, or this attribute is not present, the result is a pop-up menu