Session 1: Today we’ll be looking at a complete example of an HTML5 form, similar to what is expected for the Interactive Form project. The form demo can be found here:
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 and…
Diving into HTML5: Forms
Milestone: CSS Positioning (Cycling Assignment) During lab time today please be ready to show the progress items listed below.
1. Be prepared to show a completely designed (navigation, layout, type, colors images) HTML5 template.
2. Illustrate that your navigation is operational on a minimum of two pages.
3. Make use of hover behaviors and hit states in your navigation.
Session 2: Today we will start looking at more ways to design and organize the form input fields, including text fields, checkboxes, radio button, select lists, and text areas. We will also pay attention to layout, type faces, type treatments and Javascript. We will also look briefly at the server side scripting necessary to make the form function properly. Although applying this technique will not be required, it is recommended. The language we will be using to do this is PHP. The primary 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 via javascript. Optional: process the information, and send an email to yourself containing the user input. Required: The form must be designed well using HTML5 and CSS positioning. No table layouts are 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 HTML5 and CSS (no table layouts).
4. Validate required fields with Javascript.
5. Use Google Fonts and typesetting CSS properties
6. Optional: Process the user input on the server side using PHP.
7. Optional: Automatically email the formatted data to your email address.
8. Due on Session 2, Week 7.