Printed from TeacherJohn.com • http://www.teacherjohn.com/cabrillo/dm160b/exercises/ex10.php

You are here: Home > Cabrillo > Dm160b > Exercises > Ex10

Web Publishing 2 (DM160B), Cabrillo College, Spring 2008

Exercise 10
Accessible Interactive Forms

Resources for this exercise:

See the Course Schedule for due date. Exercises are due before the beginning of class on the due date.
See the Homework Frequently Asked Questions (FAQ) page for answers to questions about homework exercises.
See the Forms section of the Resources page.
See the WebAIM Creating Accessible Forms tutorial.

In this exercise you will create an accessible interactive Web page with a fill-in form using CGI (Common Gateway Interface). When a user fills out your form and clicks on the "submit" button, the information from the form goes to a CGI script that emails the information to a specified email address. The CGI script is run by the server, so such a page only works if it has been uploaded to the server.

Step 1 - Create your exercise 10 page, and get the form to work

1.1) Create a new Web page for exercise 10.

1.2) This page must contain the XHTML 1.0 Strict DocType, as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

1.3) This page must contain links (either buttons or text links) to the HTML and CSS validators. See How to Put HTML and CSS Validate Buttons on Your Page for information on how I want you to to do this. (Use the block of code on this page to make the button links or text links, so that clicking on the links automatically lets you know if the page validates or not.)

1.4) This page must display your name.and say "Exercise 10".

1.5) This page's <title> must indicate that this is your exercise 10 page, so it should say something like "John Sky's DM160B Exercise 10".

1.6) This page must contain a link with a relative path to your home ("index.html") page (this path will not start with "http://", as it must be a relative path, not a URL).

1.7) Use the example below in yellow as the basis for your form. Copy and paste the entire <form> section into the <body> section of your exercise 10 page.

At a minimum, you must then change the text shown in red in order to get the form to work.

1.8) Set the "submit_to" value ("you@duh.com") to your own email address. This means the data from the form will get sent to you.

1.9) The other necessary change is the "ok_url" value. It must be the correct path to a file (that you will need to create) called "thanks.html".

You may choose to modify other parts of this form to customize it for your page, if you wish — but before doing any experimenting, make only the minimum changes, test the page, and make sure it works. In other words, change only what is shown in red.

<form method="post" action="http://webhawks.org/cgi-bin/bnbform/bnbform.cgi">

<p>Name: <input type="text" name="name" size="30" /> <br /> Address: <input type="text" name="address" size="40" /> <br /> City: <input type="text" name="city" size="20" /> <br /> State: <input type="text" name="state" size="3" /> <br /> Zip Code: <input type="text" name="zip" size="5" /> <br /> Email Address: <input type="text" name="email" size="30" /> <br /> Phone: <input type="text" name="phone" size="12" /> <br /> Fax: <input type="text" name="fax" size="12" /> </p>

<p> What's the best way to contact you? <br /> <input type="radio" name="contact" value="email" />Email <br /> <input type="radio" name="contact" value="us_mail" />US mail <br /> <input type="radio" name="contact" value="phone" />Telephone</p>

<p> What do you plan to do with your new Web composing skills? <br /> <input type="checkbox" name="organization" />Community organization <br /> <input type="checkbox" name="business" />Business <br /> <input type="checkbox" name="hobby" />Hobby </p>

<p> What computer system do you prefer? <br /> <select name="computer_system"> <option selected="selected">Choose from list</option> <option>AMIGA</option> <option>DOS</option> <option>MACINTOSH</option> <option>UNIX</option> <option>WINDOWS</option> </select> </p>

<p> Any comments or questions? <br /> <textarea name="comments" rows="6" cols="50"></textarea> </p>

<p> <input type="reset" value="Clear All Fields" /> <input type="submit" value="Transmit Information" /> </p>

<p> <input type="hidden" name="data_order" value="name, address, city, state, zip, email, phone, fax, contact, organization, business, hobby, computer_system, comments" /> <input type="hidden" name="submit_to" value="you@duh.com" /> <input type="hidden" name="form_id" value="My Test Form" /> <input type="hidden" name="ok_url" value="http://webhawks.org/~yourusername/thanks.html" /> </p>

</form>

The above HTML will result in a page that looks like the the example below.

Name:
Address:
City:
State:
Zip Code:
Email Address:
Phone:
Fax:

What's the best way to contact you?
Email
US mail
Telephone

What do you plan to do with your new Web composing skills?
Community organization
Business
Hobby

What computer system do you prefer?

Any comments or questions?

You may wish to upload and test the form before making more changes, to make sure the form actually works and is processed by the script.

Step 2 - Make the form accessible

2.1) See the WebAIM Creating Accessible Forms tutorial at:
http://www.webaim.org/techniques/forms

2.2) Make the form accessible by adding the <label>, <fieldset>, and <legend> elements.

2.3) Add the following block of code to the page, changing what is in red to be the actual URL of your exercise 10 page:

<a href="http://wave.webaim.org/report?url=URLhere">Accessibilty Check</a>

This will add a link to your page, similar to the validator buttons, that will test your page for accessibilty errors.

Step 3 - Create your exercise 10 page “Thanks” page

3.1) Create another page that the browser will display after someone clicks on the button to submit the information in the fill-in form. This page usually thanks the person for their submission, or confirms that their form submission has been accepted. In order for the above example form to work, you must name this file "thanks.html".

3.2) This page's <title> must indicate that this is your thanks page, so it should say something like "Thanks for filling out the form".

3.3)This page must contain the DocType that will enable you to use an HTML validator (as explained in How to Use the W3C HTML and CSS Validators):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

3.4) This page must contain links (either buttons or text links) to the HTML and CSS validators. See How to Put HTML and CSS Validate Buttons on Your Page for information on how I want you to to do this. Make sure you use the code for XHTML 1.0 Strict, not HTML 4.01 Transitional, as you are using an XHTML, not an HTML, DocType. (Use the block of code on this page to make the button links or text links, so that clicking on the links automatically lets you know if the page validates or not.)

Step 4 - Upload, test, and validate your pages

4.1) Upload the exercise 10 page, and "thanks.html", to your folder on the server. (Note that because you are using a CGI script, this form will not be active — in other words, it will not work — unless it is on the server.)

4.2) Test your exercise 10 form page; view your form page (the page on the server, not the page on your disk) in a browser and use it to send email to yourself. Make sure the browser takes you to your "thanks.html" after you click on the button to submit the information. Also, check to see that you get the email message. (Note that an email message generated by a script may look like spam to your spam filters; you may need to adjust your spam filter settings.)

If you get an error, or if you do not get taken to the "thank you" page ("thanks.html") after submitting the form, make sure that you only changed what was in red.

4.3) Make sure the HTML on this page validates (using the XHTML 1.0 Strict DocType) with no errors, according to the W3C's online HTML Validator at http://validator.w3.org/. You can easily do this by clicking on your HTML validator button. For more information, see How to Use the W3C HTML and CSS Validators for step-by-step directions.

4.4) Make sure the CSS on this page validates, with no errors, according to the W3C's online CSS Validator at: http://jigsaw.w3.org/css-validator/validator-uri.html. You can easily do this by clicking on your CSS validator button. See the CSS section of How to Use the W3C HTML and CSS Validators for step-by-step directions.

4.5) Make sure this page passes the WebAIM Wave accessiblity test with no errors.

4.6) If there are any errors, fix them, re-upload the page, and validate them again.

4.7) Make sure your home page has a working link to all your completed exercises, including this exercise, and that the HTML and CSS on your home page validates.