Working with Forms

Home
Tips
Examples
BookStore
Links
Mail
A Form is an HTML construct used to get input from the user, which is usually processed using CGI Scripts or similar mechanisms. If you are not familiar with forms and CGI scripts, you should read An Instantaneous Introduction to CGI Scripts and HTML Forms.

Creating a form

The following is a form with three fields, a submit button and a reset button. 
Enter your name : 
 Enter your age : 
  Date of birth :
The above form was created using HTML code similar to the following : 
<FORM NAME="sample" METHOD=POST
        ACTION="/cgi-bin/homestead/mail.pl?member_name">
    Enter your name : <INPUT TYPE=TEXT NAME="yourname" SIZE=30><BR>
     Enter your age : <INPUT TYPE=TEXT NAME="yourage" SIZE=3><BR>
      Date of birth : <INPUT TYPE=TEXT NAME="yourdob" SIZE=10><BR>
    <INPUT TYPE=SUBMIT> <INPUT TYPE=RESET>
</FORM>
We can refer to this form as document.sample since we have named the form as 'sample'. The first text field is document.sample.yourname and the second field is document.sample.yourage. To get the text which is entered in the first text field, you can use document.sample.yourname.value . Now let us see how to go about validating the data entered.

Validating the form

To add validation to your form, there are two things that have to be done. The first is to write a JavaScript routine which does the validation (for this example, we will name the function validateForm()) and the second is to modify the <FORM> tag to <FORM NAME="sample" METHOD=POST ACTION="..." onSubmit="return validateForm()"> The above line tells the browser to call validateForm() when the user submits the form. The following is the code for validateForm() 
<SCRIPT LANGUAGE="JavaScript">
    <!-- Hide code from non-js browsers
    function validateForm1()
    {
	formObj = document.sample;
	if ((formObj.yourname.value == "") ||
	    (formObj.yourage.value  == "") ||
	    (formObj.yourdob.value  == "")) {
	    alert("You have not filled in all the fields.");
	    return false;
	}
	else
	    return true;
    }
    // end hiding -->
</SCRIPT>
And here is the form with the added validation.
Enter your name : 
 Enter your age : 
  Date of birth :
If any of the fields are blank, an alert box will pop up and the form won't be submitted. The form is submitted if the validation routine returns a true; if it returns false , the submit operation is cancelled.

Setting the focus

Note: The following example may not work on Microsoft Internet Explorer 3.x. You will find that the focus is not set properly. If anyone figures out what the problem actually is, please let me know.

In the preceeding example, the message gave no clue as to which field is actually causing problems. Usually forms are much bigger and such a message will not be of much use. In the next form, not only is the message more informative, but the cursor is also placed at the erring field so that the user can start typing in directly. For example, to position the cursor in the first field (yourname), we can use the JavaScript function document.sample.yourname.focus(). Here is the modified function.

<SCRIPT LANGUAGE="JavaScript">
    <!-- Hide code from non-js browsers
    function validateForm()
    {
	formObj = document.sample;
	if (formObj.yourname.value == "") {
	    alert("You have not filled in the name field.");
	    formObj.yourname.focus();
	    return false;
	}
	else if (formObj.yourage.value == "") {
	    alert("You have not filled in the age field.");
	    formObj.yourage.focus();
	    return false;
	}
	else if (formObj.yourdob.value == "") {
	    alert("You have not filled in your date of birth.");
	    formObj.yourdob.focus();
	    return false;
	}
    }
    // end hiding -->
</SCRIPT>
Here is our new form.
Enter your name : 
 Enter your age : 
  Date of birth :

If you belong to GeoCities

You might have noticed that the <FORM> tag contains an ACTION field which is set to "/cgi-bin/homestead/mail.pl?member_name". This is a CGI Script provided by GeoCities for use by its members. If you belong to GeoCities, you can use this script to get the information users enter into your form. Just change member_name to your actual GeoCities member name. Whenever someone comes to your page and fills in your form and submits it, you will get a mail with the information that was entered. Also, don't forget the METHOD=POST part in the <FORM> tag.

GeoCities
Me from GeoCities