teaching machines

CS 318 Lab 18 – Forms

April 10, 2017 by . Filed under cs318, lectures, spring 2017.

Dear students,

Thus far we have focused on one half of the communication process: the “speaking” of our ideas to our sites’ visitors. Generally this is not enough. We would like to hear back from our visitors. We want them to join a mailing list, make an order, contribute an idea, vote, and who knows what else. We need information from them. Enter HTML forms.

We’ll start today with a quick demo of the possible form widgets that you read about in your book. Then we’ll jump into two tasks for our lab:

Here’s your TODO list:

See you next time!



First create a lab18 directory. Add a partners.html and include your first names and last initials.


Create in contact.html a form that looks like this:

Make sure you give each form element a name attribute identifying the semantic meaning of the data being requested. The form-forwarding services require name attributes to be set.

Be sure to match the following:

If we actually wish to communicate the data from a form to a human being or a program that can process it, we must define the form’s method and action attributes.

The location of the webpage that does the emailing or processing is specified as the action. We will use a third-party form processing service as the action.

Generally, method should be post, which means the form data is bundled up in something very much like an email attachment and sent to the page specified by action. The alternative is get, which packs all the form data into the URL/address of the page. This makes the URL very long and unwieldy. You’ve probably seen these URLs with get requests embedded in them. We get them in email all the time. Like in the links to CS 318 quizzes!

Writing the page that handles a form submission is a topic for a more advanced course. However, there a few free services that can forward our form data to an email address. Check out one of these:

Follow the service’s directions to get your form submitting to your email address.


Create in pager.html a page that allows the viewer to “page” through a three-image slideshow of pictures. It allows the following interaction:

You will use radio buttons to achieve this effect, though it will feel like a big hack. You can’t actually see the radio buttons! In will be implemented a little bit like the tabview you made last lab.

Follow these steps: