Unit06 Web Forms

Overview

I hope you have enjoyed the assignments so far because they are about to get a little more difficult. So far everything we have built is information that we provide to the end user. In this lesson we will provide a mechanism to allow the end user to communicate with you. We will be adding another page to the site that will contain a web form. This form will contain drop down lists, radio buttons, check boxes, and text areas. You will also have to use some advanced CSS to make the form style nicely.

Vocabulary

Eye Tracking

Eye tracking is monitoring where we look on a screen. Sophisticated equipment, glasses or cameras, can record where we look while reviewing a screen. This information helps designers identify problems with their designs.

Meta Refresh

Meta refresh is a method of instructing a web browser to automatically refresh the current web page after a given length of time.

Tools

• Check your page using the Markup Validation Service
• Check your page with the W3C CSS Validator
• Use my Module 6 AutoGrader to check your own work before submitting.

Objectives

At the end of this module, you should be able to...

• Add pages to your site with proper Wayfinding.
• Explain the elements of a web form and how input types effect the user experience.
• Explain name values pairs in a GET method submission
• Implement HTML5 required attribute.
• Style the form using CSS.
• Implement a meta refresh.

Tasks

• Read input tag by w3schools
• Read type attribute by w3schools
• Read forms and inputs by w3schools
• Read text area by w3schools
• Read label by Mozilla
• Read fieldset and legend by w3schools
• Read What is Color Contrast and Why it's Critical to Improve Accessibility by Jonar Sabilano

Download

Watch

• Canvas Videos
• Watch unit6a-Unit Overview
• Watch unit6b-Form Elements
• Watch unit06c-Follow Along Intro
• Watch unit06d-Create Two New Pages
• Watch unit06e-New Form
• Watch unit06f-Create Customer Information
• Watch unit06g-Create Delivery Method
• Watch unit06h-Create Delivery Options
• Watch unit06i-Create Comments
• Watch unit06j-Style Form part 1
• Watch unit06k-Style Form part 2
• Watch unit06l-Style Submission Button
• Watch unit06m-Common Problems

Assignment Example

View an example of this assignment

Assignment Checklists

Follow Along Activity(5 pts)

• Follow along with videos in this unit to create you own version of the "Drone Delivery" Website.
• Rename the completed assignment folder as "06follow-along".
• Upload this folder to your GitHub account and make sure the link works.
• Submit a link to your site in Canvas.

Unit06 Web Forms (10 pts)

Create two additional pages for your web site. If you rip off the follow along items in your form, you will fail this assignment. Please think of something new and unique for your form.

Common Page Elements

Create two new pages that match the look and feel of your current site.

• Match the header and navigation and footer of the existing site
• Add links from the other pages to the page with the form and from this page back to the other pages
• Set the class of this page link to active
• Do not include the thanks page in the navigation scheme

Fieldset and Legend

Include a fieldset (line around several items) with a legend (DESIGN: Chunking).

• Use at least three field sets
• Use at least three legends
• Style the fieldsets
• Style the legends

Form Parts

Please include these different parts in your form.

• At least 1 INPUT "text"
• At least 1 INPUT "email"
• At least 1 INPUT "tel"phone
• At least 1 INPUT "radio" with multiple states
• At least 3 INPUT "checkbox" elements
• At least 1 SELECT that has no less than 3 OPTION elements
• At least 1 TEXTAREA element
• Insure that clicking on the user instructions will activate the input (wrap with a label tag)

Required Attribute

Please make at least three fields required before the form will process to the thanks page.

• Implement the required feature of HTML5

Styling

Use CSS to style up your form and make it look professional. This includes changing the text inputs, text areas, drop-downs, and making everything line up nicely..

• Background and text color for all area where the user types information
• Everything is left aligned (straight line eye tracking)
• Field sets and legends are styled
• Inputs have round corners and borders
• Style the user instructions with input so they are visually grouped (DESIGN: Proximity)

Submission Button

Use CSS to style the submit button so it has border, round corners, padding and a background color.

• Border
• Round corners
• Padding
• Background color (from color scheme)

Functionality

Set the action to display the confirmation page (must be named "thanks.html" ).

• Make sure that the form method is set to GET
• The form action is set to open the thanks.html page
• Insure that the confirmation page automatically forwards to the index page after 5 seconds using meta refresh

Valid HTML markup

Please check your code prior to uploading to see if you missed anything. You should use the html5 code validator.

• Valid HTML5 markup on the new form page

Valid CSS markup

Please check your CSS to see if you have any errors (warning are OK). You should use the CSS code validator to check your work.

• Valid CSS for your CSS file

Upload to GitHub

Upload your assignment to a GitHub repository

• Create a folder called "06form" and put the two html files inside it.
• Upload this folder to your "dwdd1600" repository.

Grade

In order to receive a grade for this assignment you must earn 90% of the points listed above.

• Pass
• Fail