Creating a Web Form - HTML, CSS, and Dynamic HTML - page 470

figure 6-76 inline validation on the postal code

initial text does not
match a valid postal code

five-digit postal code is valid

as the user continues to
type, the postal code
becomes invalid again

final nine-digit postal code is valid

◗

5. Continue to enter different values into the different input boxes and verify the
effectiveness of the inline validation tools in providing immediate feedback on the
validity of your data.
Trouble? If you're using Internet Explorer or Safari, you might not see a change
in the background of the different input boxes as you enter the field values. If you
are using Opera, the background image will change but the background color
will not.

You've finished the initial work on the survey form. Alice has placed a copy of your
files in a folder on the company's Web server, and from there the Web form can continue
to be tested to verify that the CGI script and the form work properly together. Alice is
pleased with your work on this project and will come back to you for future Web page
development for Red Ball Pizza.

Session 6.3 Quick Check

1. Provide the code to create an input box for a field named homepage that is used
for storing Web site addresses.

2. Provide the code to create a spinner control for the withdrawal field that ranges
from 20 to 200 in increments of 20 units.

3. Provide the code to create a range slider for the red field that ranges from 0 to 255
in increments of 5 units.

4. Provide the code to create an input box named state that has the suggested
options Alabama , Alaska , Arizona , Arkansas , California , and Colorado from a
data list with the id statelist .

5. Create a submit button with the text Send Donation .

6. Provide the code to create a text input box for the socSecNum field and make
the field required.

7. The userAccount field must follow the regular expression pattern
^\user\-d{4}$ . Provide the code for a text input box that can be validated
for this field.

8. Provide a style rule to display all textarea elements with the background color
rgb(220, 220, 255) when they have the focus.