HTML and CSS Reference
In-Depth Information
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
5 pixels.
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
email
field.
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
validation test.
21. Submit your completed files to your instructor, in either printed or electronic form,
as requested.
