John Keston Classes

Week 5

Session 1: Today we’ll be looking at a complete example of an XHTML form, similar to what is expected for the Interactive Form project. The form demo can be found here:

Form Demo

Once we have looked carefully at the form I will demonstrate how to use Javascript to pre-validate the input from the user. Javascript validation is a useful way to prevent users from leaving out required information from the form. However, server-side validation is also necessary in case Javascript has been disabled in the browser.

Reading:
Introduction to Javascript

Also, if you are looking for more ideas on form layout. Have a look at this list hosted on Smashing Magazine:

CSS-Based Forms: Modern Solutions

Session 2: Today we will start looking at the server-side scripting necessary in order to make our Interactive Form project handle the data entered by users. The language we will be using to do this is PHP. One of the best resources for PHP is php.net.

Interactive Form Project Requirements:
Create an interactive form designed to collect information from users, validate that required information has been entered, process the information, and send an email to yourself containing the user input. The form must be designed well using XHTML and CSS positioning. No table layout is acceptable.

1. The form must contain a minimum of ten input fields.
2. Use of text fields, check boxes, radio buttons, select lists, and text areas are required.
3. Design the form with XHTML and CSS (no table layouts).
4. Validate required fields with both Javascript and PHP.
5. Process the user input on the server side using PHP.
6. Automatically email the formatted data to your email address.
7. Due on Session 2, Week 7.