Work in teams to complete the following exercises.

Using HTML Forms

Forms provide a convenient method to collect information from a web user. They can be configured to do a variety of things with the information, including: posting the information to a web server (as demonstrated in class) or sending it via email.

Exercise 7.1

Create a webpage named lab7_1.html that looks something like the one shown on the right. You can specify any questions and answers you like. It should use an HTML form to collect the values of the given expressions and any extra comments the user adds. Format the form as you choose; this example uses a table.

The email button should initiate the system’s email application as shown. Note the new message window on the lower right.

Demonstrate that your web form collects information as specified and fires up the email client by collecting a screen dump of your system in action; you do not need to actually send the email.

You can create a screen capture using the “Print Screen” key ( PrtScn for the full screen and Alt-PrtScn for the current window) and paste that image in a photo editor like Microsoft Paint.

Here’s an example of an email form: emailForm.html. For more information, see W3Schools on HTML Forms and Input and, in particular, sending emails using forms.

We’ll do more interesting input processing when we get to the programming units of the course.

Posting Form Data to a Web Server

Form data can be processed in a variety of ways.

Exercise 7.2

Make a copy of your web form from the previous exercise, name it lab7_2.html and modify it to post the collected information to a web server.

Demonstrate that your form works as requested by collecting another screen dump with your form in one browser window and the posted results in another.

Here’s an example of a login form: loginForm.html. It makes use of this helpful web service: http://www.posttestserver.com/post.php. Configure this by coding your form as follows:

<form action="http://www.posttestserver.com/post.php" method="post" target="_blank" class="external">

Once posted to this server, you can find your output at the URL specified in the webpage returned by the post server.

Grading

Zip up the folder with all your files and screen dumps, and submit them in Moodle. We will grade this exercise according to the following criteria:

40% - Exercise 7.1 - Upload your HTML file and a screen capture demonstrating that your form initiates the system email tool as specified.
50% - Exercise 7.2 - Upload your second HTML file and another screen capture demonstrating that your form sent information to the web service.
10% - Detailing - Include header comments in all HTML files and body comments as appropriate.

If you worked on a team, make sure that both of your names are listed on the main webpage.