CS-081 Assignment 5

For this assignment, you are to create a web page that uses a form to gather information from users. There are three parts to the assignment:

1. Use a table to present form controls and their labels; practice using various features of tables and formatting them using CSS.
2. Practice using various form controls (different types of input, textarea, select, and button controls) and submitting form data to a server-side script.
3. Use JavaScript to validate the form data before submitting it to the server-side script.

1. Add a page for the form to your web site.

   Create a new .xhtml file for your form and add a link to it to your site’s home page. Use a meaningful file name for this page based on what you are going to use the form for (see next item).

2. Code the table and the form.

   Study Chapter 9 of the textbook, and look at the sample form used in class. (Note: if you want to try the “localhost:81” feature of that web page, you will need to download and run Echo_HTTP_Requests.jar: right-click on the link to download the file, save it to your desktop, and double-click it to run it.)

   Design a form for any purpose you like. If you don’t feel like being creative, make it a form for people who want to open an account at a new social networking club. The form is to use all the types of input controls available except for image maps. That is, there must be at least one radio button group, more than one checkbox, at least one text line, text area, single selection list, multiple selection list, and password box.

   Put the text lines, text area(s), and password(s) into the second column of a two-column table. Put labels for each of these items in the first column of the table. Put a radio group into a row of the table that spans both columns. Aside from these requirements, you may structure your form in any way that makes sense. That is, you may use the table for other label/input items, or you can put the other items in separate paragraphs, divs, or whatever makes the most sense.

   Be sure to include a Submit button for your form.

   The action for your form may be either http://babbage.cs.qc.edu/courses/cs081/Form_Script.php or http://babbage.cs.qc.edu/courses/cs081/Form_Script.sh. Use the post method. Test your script to be sure everything works before proceeding.

3. Format your form.

   Use CSS to format the positions, margins, borders and padding, colors, fonts, and images for your form page.

4. Use JavaScript to Validate the Form.

   Begin by working your way through my JavaScript Tutorial.

   This part of the assignment has one required component, and some optional components you may try for extra credit.

   The required component is to use JavaScript to validate that the user has provided information for two or more required entries in your form. You may use the sample code from May 10 as a model, but you will have to adapt it to the particular nature of your form.

   The first optional component can only be done if your form requires the user to enter an email address. Use a regular expression to test whether the email address is valid or not. Here is one you can use:

   var emailRegex =/^[a-z0-9\_\-\.]+@[a-z0-9\-\_]+(\.[a-z0-9\-\_]+)*\.[a-z]{2,4}$/i;

   Note that the function for testing whether a string matches a regular expression is named test(), not match(). (I misspoke in class on May 15.) Also, on May 17 I failed to tell you to be sure to start your regular expression with ^ and to end it with $. Those two symbols mark the beginning and end of the string being tested, and without them you could get a spurious match if there is a valid email address the middle of some string that has other invalid characters at the beginning and/or end.

   Let’s assume you have an input tag in your web page that looks like this:

   <input type="text" id="emailAddress" />

   In your JavaScript, you can get a reference to this element in the DOM tree like this:

   var emailTextElement = document.getElementById('emailAddress');

   You can find out what the value of the text box is (what the user typed, or an empty string if the user typed nothing) like this:

   var emailTextValue = emailTextElement.value;

   Finally, you can test whether the current value of the text box is a valid email address or not like this:

   if ( emailRegex.test(emailTextValue) ) { // address is valid } else { // address is not valid }

   The second optional component is to use something other than an alert box to tell the user that the form was not valid. To do this, you would change the visibility and/or color of an error message that appears directly on the web page.