Exercise 10: 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.
In this exercise you will create an 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
1.1) Using a basic text editor create an HTML document. This page will become your exercise 10 page.
1.2) This page must display your name and "Exercise 10".
1.3) This page's <title> must indicate that this is your
exercise 10, so it should say something like "John Sky's DM60A Exercise
10".
1.4) 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).
Remember that now we are using 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.5) This page must contain the character encoding meta tag (as explained
in Character Encoding for Web Pages).
Because this tag tells the browser how to interpret the characters used in
the document, it should be the first tag in the <head> section.
So
right
after the <head> tag, place this line of code:
<meta http-equiv="content-type" content="text/html;
charset=UTF-8" />
1.6) 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.)
1.7) 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.8) 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.9) 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.10) 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
<!-- Note: The above set of Radio
Buttons all have the same name ("contact") so they work properly; i.e.,
you can only select one of them. -->
</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" />
<!-- For reset and submit buttons,
whatever you put in "value" will be the label of the button;
if you don't include a value="..." attribute, they will be named "Reset" and "Submit." -->
</p>
<p>
<!-- SCRIPT CONFIGURATION SECTION -->
<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" />
<!-- END OF SCRIPT CONFIGURATION SECTION -->
</p>
</form>
The above HTML will result in a page that looks like the the example below.
Step 2 - Create your exercise 10 page “Thanks” page
2.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".
2.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".
2.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)
Remember that now we are using 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">
2.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 3 - Upload, test, and validate your pages
3.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.)
3.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.
3.4) Make sure the HTML on these pages validates (using the XHTML 1.0 Strict DTD) 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.
3.5) If you used any CSS, make sure the CSS on these pages 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.
3.5) If there are any errors, fix them, re-upload the pages, and validate them again.
Step 4 - Modify your home page
Note that, unlike your exercises that now must validate to XHTML 1.0 Strict, your home page may validate to either HTML 4.01 Transitional or XHTML 1.0 Strict. Whichever standard you use, make sure your validtor buttons or links match the DocType. (In other words, if you are using an HTML DocType, don't use a validator button that syas "XHTML"; if you are using an XHTML DocType, don't use a validator button that syas "HTML".)
4.1) Modify your home page to include a link that goes to your exercise 10 page. Make sure your home page has a working link to each of your completed exercises
4.2) As always, your home 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.)
4.3) View your home page (the page on the server, not the page on your local disk) in a Web browser to make sure your links work.
4.4) Make sure your home page validates, with no errors, according to the W3C's online HTML Validator at http://validator.w3.org/. You can now easily do this by clicking on your validator button. For more information, see How to Use the W3C HTML and CSS Validators for step-by-step directions.
4.5) If you have used any CSS on your home page, 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.6) If there are any errors, fix them, re-upload the page, and validate it again.
Step 5 - Submit the feedback form
5.1) Submit the feedback form. To receive full credit for this exercise you must submit this feedback form before it expires. This exercise is due on 5/10/10. Allowing for a one-day grace period, the form will expire at the end of the day following the due date, which means the form for this exercise will expire at 12:00 AM on 05/12/10.