Lab 6-- Working with Forms and JavaScript

Fall 2011, Siena College

Lab 6: Working with Forms and JavaScript
Due: 1:30 PM, Monday, October 31, 2011

It's back to building web pages this week, as you will make use of the new techniques we have been looking at in class: HTML Forms and JavaScript event handlers.

You may work alone or with a partner for all parts of this lab.

In Lab: Experimenting with Form Controls

For this first part, you will use the new HTML elements corresponding to form controls to build a form that looks like this:

Strive to make the form appear precisely as in the image above. It should also meet these requirements:

Include all form controls in a <form> element with an empty action attribute.
Give each form control element an appropriate name attribute, even though we will not use it yet.
The age groups are "Up to 12", "13-25", "26-45", and "46 and up".
The radio buttons and checkbox should be selectable by clicking their labels in addition to the button/checkbox itself.
The buttons should be of type submit and reset.
Your form need not perform any actions, though the "Clear This Form" button should clear all form entries.

In Lab: JavaScript Practice

Create a page that contains a simple HTML table with a header row, at least 3 regular rows, and at least 2 columns per row, and a caption.

Use buttons and JavaScript event handlers and functions to accomplish the following:

Provide buttons to change the text color to at least 2 different colors. It is OK if the table borders also change to the same color.
Provide buttons to move the position of the table caption to the top and to the bottom. (Recall that the caption-side style of a <caption> element controls its position relative to the table.) Note: this seems to fail in Firefox - test it in other browsers!
Provide buttons to change the content of some table cells.

In Lab: Some Additional JavaScript Functionality

The w3schools.com page JavaScript How To shows some new bits of JavaScript functionality:

The use of a <script> element within the <body> of a document.
The use of JavaScript code outside any event handler or JavaScript function.
The use of document.write to create dynamic content during the loading of a page.
The use of the built-in Date object to insert the current date and time.

Create a page similar to the one in the demo, but which updates the date string to the current time each time the mouse is clicked on the displayed date.

Note: if you need to include double quotes inside the string you pass to document.write (and you do), you can put that string in single quotes instead:

  document.write('<p class="snoopy">');

In Lab: Accessing Form Data from JavaScript

Even before we start to consider how to submit forms with submit buttons, we can explore how to make use of the data in form controls using JavaScript event handlers.

Try out this example: helloperson.html. Most of this is familiar from previous examples, but there are a couple of items you have not yet seen.

We set an id attribute on the text input so we can access it through JavaScript with document.getElementById.
In our JavaScript function, we declare a local variable name, which exists only within one execution of that function.
We assign that variable name the value attribute of the text input. This works like the .innerHTML but refers to the value typed into the text field.
We then use that variable name as part of what we assign to the .innerHTML of the "message" paragraph to personalize its contents.

We can take this a step further and display only the form when the page is first rendered, then only the message after the button has been clicked, as in this example: helloperson2.html.

The "message" is initially an empty <div>, essentially just a placeholder in the page, with a name we can look up, where we can later place something else.
We give our <form> element an id, so we can look it up using document.getElementById.
The JavaScript function still retrieves the .value of the text input control and uses it to personalize the message. But now that message is a <div>, so we enclose the text we wish to display in a <p> element.
Finally, the function sets the innerHTML of the <form> element to "" - the empty string - which makes its contents empty.

The effect is to place what looks like a brand new message onto the page, and to remove the form from the page. We will look at all of them in upcoming examples. For now, the .value will be enough to do the following.

Mad Libs

Create a simple "Mad Lib" (spend a couple minutes looking at search results on this if you are not familiar with the concept) where you first display at least 5 text inputs labelled appropriately to inform your users of the kind of word or words required for each. When a button is pressed, the form is hidden and a silly message is displayed, using the values entered in the form (and highlighted in red) in the appropriate places.

Building Another Form

Develop a form that could be used to gather food preferences for the guests of a party. One possibility is a "pizza and wings" party. In this case, the form might ask guests how many slices of pizza they want and which of a collection of toppings they like, how many wings they expect to eat and their preference for how spicy they like wings, and whether they prefer diet or regular soda. You may use this example or come up with something with similar complexity using the same kinds of form controls needed here. You need not provide any JavaScript event handlers or submission handling capabilities - just the form layout.

Submitting Your Work

Before 1:30 PM, Monday, October 31, 2011, submit your files for grading. There are three things you need to do to complete the submission: (i) make sure your pages are uploaded properly to the class web space and are available at your URI, (ii) update your main index on the class web space to have links to all documents you have created for this lab, and (iii) email a copy of your files to me at jteresco AT siena.edu. If you worked with a partner on any of the items, you need only upload to the account of one of the team members, but each team member should link to the pages on his or her own main index. Make sure all of your pages validate properly as XHTML Strict.

Grading Sheet

This lab is worth 30 points, which are distributed as follows:

> Feature	Value	Score
Required Documents
Web Design Race Entry Form	4
JavaScript Practice Table	4
Date Display Page	4
Mad Lib Page	6
Party Food Preference Form	6
Style
XHTML documents pass validation	3
Formatting of HTML text	1
Submission
Main index updated	1
Email submission	1
Total	30