Week 5, Lab 1: Working with Form Elements

The images below show two states of a form layout. Build the first version:

Lab 5.1 version 1

Then transform your markup so that your page looks like this:

Lab 5.1 version 2

Specifications:

  1. Use only a single <FORM></FORM> container. The METHOD of this form is POST and the ACTION is "javascript: formOut()".

  2. Create two INPUT elements of type TEXT, one for first name and the other for last name. Set width of each to 50.

  3. Create four radio buttons with the VALUEs "red," "green," "blue," and "mauve." Give them the attributes necessary to cause them to function as a group.

  4. Add a <SELECT></SELECT> container with six <OPTION> tags: "lion," "tiger," "bear", "mole," "vole," and "bullock." Give the "vole" option the attribute SELECTED.

  5. Set up a <TEXTAREA></TEXTAREA> container with the initial value shown in the examples.

  6. Add a SUBMIT and a RESET button.

  7. If you create all the elements properly, you will be able to fill in values, press SUBMIT, and see your entries in a JavaScript alert box.

  8. To make the transformation from page 2 to page 3, you need to set up a table structure within the form.