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

Exercise 10: Interactive Forms


Resources for this exercise:


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 DM60 Exercise 10".

1.4) This page must contain the HTML 5 DocType that will enable you to use an HTML validator, as explained in How to Use the W3C HTML and CSS Validators.

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 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 HTML 5 (not XHTML 1.0 Strict nor HTML 4, for example). (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.)

Make sure you use the correct links (for HTML 5).

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://earthdance.com/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.

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?

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 HTML 5 DocType that will enable you to use an HTML validator, as explained in How to Use the W3C HTML and CSS Validators.

2.4) 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 charset="utf-8">

2.5) 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 HTML 5 (not XHTML 1.0 Strict nor HTML 4, for example). (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.)

Make sure you use the correct links (for HTML 5).

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.

1.20) Make sure the HTML on this page validates (using the HTML 5 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 link. For more information, see How to Use the W3C HTML and CSS Validators for step-by-step directions.

1.21) 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/. 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

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, and that these links are coded as an HTML list.

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. Make sure you use the code for HTML 5 (not XHTML 1.0 Strict nor HTML 4, for example). (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) Make sure the HTML on this page validates (using the HTML 5 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 link. 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/. 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) 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.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 11/24/14. 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 11/26/14.