Lab 5 - forms

In this assignment you will build one page, containing two forms.

Build a page named lab5.html

Put a link in your index page to your new page. Also, put a link from this page back to your index page.

Build two forms in the page. The first form is described in this section. The second form is described in the next section.

The first form will contain two input type="text" controls. The first input control should have text next to the control, saying "Specify a standard foreground color in lower case". The second input control should have text next to the control, saying "Specify a standard background color in lower case".

The first form will also contain a submit button, labeled "set colors".

When the submit button is pressed, validate that the colors are one of the standard colors, spelled in lower case. The 17 standard colors are the 16 standard colors and the new standard color "orange".

For each of the controls, if the color is not a valid lower case standard color, inform the user with an alert. If the foreground color is invalid, set it to "black". If the background color is invalid, set it to "white".

Then, set the foreground and background colors of the body to the new colors.

Implementation suggestions: You might want to put the 17 color names in an array. You might want to write one color verification function, that can be used to check the input or output color.

Return false from the event processor, so the form is not submitted. We do not want to submit the form, because this would reload the page, and immediatly lose our new colors.

The second form will start with a statement, asking the user to select at least 2, but not more than 4, items. The items should be in a category you like.

Provide at least 5 choices. Each choice shall have some identifying text and a checkbox.

The second form will also contain a submit button, labeled "submit".

When the submit button is pressed, validate that 2, 3, or 4 checkboxes are checked.

If too many, or too few, checkboxes are selected, alert the user, and return false, so the form is not submitted.

If 2, 3, or 4 checkboxes are checked, return true, so the submit processing will take place. Now, we do not have a server site, or any server code, so we do not actually want the submit process to actually send anything. We can do this by not giving it any specification of where to send the submit. Do this by omitting the form attributes: action and method.

When true is returned, the submit processing will complete its processing and then reload the page. You can see the original page after it has successfully completed the submit processing.

A good way to make a form look good is to put the controls in a table. You might omit some, or all of the borders in the table. Use other html elements, as needed, to make the page look good.