Week 8

Session 1: Today we will discuss the requirements for the HTML5 Interactive Form project. This project is due session 1 of week 11. We will begin by looking at the markup and css necessary to create the form interface. HTML5 provides several new and useful features for form interaction. However, these features are not supported by all current browsers. Therefore fallback validation is required for the client side and server side of the application. In order to learn the server side scripting necessary, we will install MAMP on your Macbooks. Alternatively, if you have shared hosting available your interactive form can be implemented on a web server.

Form Demo

Assignment 3: HTML5 Interactive Form (15 Points)
Due: Session 1, Week 11 (Beginning of Class)

Description:
Using HTML5, CSS, Javascript, and PHP build an interactive form designed to collect information, validate user input, process form data, and email the results. Your form must include all of the following interface items: text fields, a text area, select lists, checkboxes, radio buttons, and a submit button. Use HTML5 validation, with Javascript and PHP fall-back. UX considerations such as placeholder text, feedback messages, adequate documentation, and input focus are also required. Finally, include a method to prevent bots from hijacking the form (reCAPTCHA). These techniques will be demonstrated during class.

Requirements:
1. Use HTML5, CSS, JavaScript, and PHP to build an interactive form
2. Your form must collect information and send it via email using PHP
3. The form must validate the user input using HTML5, Javascript, and PHP
4. Input methods must include: text fields, textarea, checkboxes, radio buttons, select lists, submit button
5. Use placeholder text, feedback, documentation, and input focus to improve the UX
6. Implement methods to prevent bots from hijacking the form
7. Upload a zip file of and shortcut to your project to the dropoff drive by session 1 of Week 11

Points Breakdown:
5 points are awarded for the look, feel, and design of the form (HTML5 and CSS)
5 points are awarded for handling the validation of the user input (HTML5, JS, PHP)
5 points are awarded for sending the data via email and preventing exploits (PHP)

Relevant Links:
HTML5 Forms: The Markup
Dive Into HTML5 » Forms

Session 2: Today the jQuery UI exercise is due. Please be prepared to share what you developed with the class. After the presentations we will continue the demonstrations for the HTML5 Interactive Form project.

4 thoughts on “Week 8”

  1. http://www.awwwards.com/understanding-web-ui-elements-principles.html

    This is a very interesting article about web UI elements and principles.
    Interface is viewed as a collection of jobs, each with a beginning, middle and end.
    User interaction through controls on demand and instant clues and cues through animation are essential to offer the best User experience.

    http://ianlunn.github.io/Hover/

    Hover.css is a collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on.
    Hover.css is open source, and made available under a MIT License.

    https://nightwalk.withgoogle.com/en/home

    Project Night Walk takes you to a journey on a neighborhood of Marseille famous for its unique atmosphere and street art.
    You can wonder around the vibrant streets as if you were there.

Comments are closed.