HTML and CSS Reference
6. Create a label element with the text e-mail . Within the label element, insert
an input box for the email field. Set the data type to email and make the field
required. Add the title supply a valid e-mail address .
7. Create a label element with the text Password containing an input box for the
password field. Set the data type to password and make the field required. Add the
title you must provide your password .
8. Create a label element with the text comment (500 character limit) , placing the
parenthetical text on a new line, and within the label element insert a text area box
for the commentBox field. Limit the number of characters that can be typed into the
text area box to 500 characters.
9. Add a submit button with the text submit comment .
10. Save your changes to the file and then go to the comments.css file in your text editor.
Create style rules for the styles described in the following steps.
11. Display the field set with a background color of (245, 245, 255). Set the top and bot-
tom margins to 15 pixels and the left and right margins to auto . Add 5 pixels of pad-
ding and set the width of the field set to 90%.
12. Display labels as blocks floated on the left once the left margin is clear of elements.
Set the font size to 0.9 em and the width to 100%. Set the top and bottom margins to
13. Display input boxes and text area boxes as blocks floated on the right margin. Set the
font size to 0.9 em and the width to 55%. Set the left and right margins to 10 pixels.
In addition, set the height of text area boxes to 150 pixels.
14. Display the submit button as a block once both margins are clear. Do not float the
submit button. Set the dimensions of the button to 200 pixels wide by 30 pixels high.
Set the top and bottom margins to 5 pixels, and the left and right margins to auto .
15. When input boxes and text area boxes receive the focus, change the background
color to the value (225, 225, 240).
16. When input boxes receive the focus and are valid, change the background color to
(225, 240, 225) and display the background image go.png in the bottom-right corner
of the box with no tiling. Resize the background image so that it is contained within
the input box.
17. When input boxes receive the focus and are invalid, change the background color
to (240, 225, 225) and display the background image stop.png in the bottom-right
corner of the box with no tiling. Resize the background image so that it's contained
within the input box.
18. Close the style sheet file, saving your changes.
19. Open sblogger.htm in your Web browser and test the form. Verify that you cannot
leave the username , email , and password fields blank and still submit the form.
Also verify that the form is rejected if an invalid e-mail address is submitted in the
20. If you have access to the Google Chrome browser, test the Web page in that browser
and verify that the title text you entered for the input boxes in Steps 5 through 7 is
included in the error box supplied by the browser when those input boxes fail the
21. Submit your completed files to your instructor, in either printed or electronic form,