HTML and CSS Reference
In-Depth Information
e. Insert a label with the text
state
, associated with the
state
field. Add an input box
for the
state
field directly after the label with a default value of
texas
.
f. Insert a label with the text
Postal code
, associated with the
zip
field. Add an input
box for the
zip
field directly after the label. Using the regular expression pattern
in the
regex.txt
file, define the character pattern for the field. Add the placeholder
text
nnnnn (-nnnn)
.
g. Insert a label with the text
Phone
, associated with the
phone
field. Add an input
box for the
phone
field directly after the label. Define the data type of the phone
field as
tel
. Using the regular expression pattern in the
regex.txt
file, define the
character pattern for the phone field. Add the placeholder text
(nnn) nnn-nnnn
.
h. Insert a label containing the text
email
, associated with the
email
field. Add an
input box for the
email
field directly after the label. Define the data type of the
field as
email
.
i. Make the fName, lName, address, city, state, and phone fields required fields.
j. Below the contactFields field set, insert another field set with the id
otherFields
.
Add the legend text
Other information
.
25. Add the following to the otherFields field set:
a. Insert a label containing the text
Name of Primary contact
, associated with the
pcontact
field. After the label, insert an input box for the
pcontact
field. Add the
placeholder text
Parent or guardian
.
b. Insert a label containing the text
Relation to student
, associated with the
ctype
field. After the label, insert a selection list for the
ctype
field containing the
options
Parent
and
Guardian
. The values for the two options also should be
Parent
and
Guardian
, respectively.
c. Insert a label containing the text
Musical interest (select all that apply)
, associ-
ated with the
interest
field. After the label, insert a selection list containing the
text shown in Figure AC1-5. The option values associated with text are:
brass
,
drums
,
guitar
,
piano
,
strings
,
voice
, and
woodwinds
. Set the size of the selection
list to seven entries and allow users to select multiple options from the list.
d. Insert a label containing the text
Years of Previous Practice
, associated with the
years
field. Add an input box for the
years
field with a default value of
0
. Set the
data type of the input box to
number
, and set the minimum possible value to
0
and the maximum possible value to
12
.
e. After the otherFields field set, insert a check box field named
call
. Next to the
check box, insert a label containing the text
Please contact me for a “Get to
Know You” visit
. Assign the
label
element to the call field.
26. Below the check box label, insert a submit button containing the text
submit
information
, and then insert a cancel button containing the text
cancel
.
27. Link the application page to the
fstyles.css
style sheet. Close the file, saving your
changes.
28. Go to the
fstyles.css
file in your text editor. Add the following to the style sheet:
a. For every field set, create a style rule to: i) set the background color to the value
(231, 231, 255)
; ii) add a 1-pixel solid border with a color value of
(67, 76, 169)
;
iii) float the field set on the left margin; iv) set the top margin to
10 pixels
, the
right margin to
0 pixels
, the bottom margin to
10 pixels
, and the left margin to
2.5%
; and v) set the width to
46%
.
b. For every legend, create a style rule to: i) set the background color to the value
(67, 76, 169)
; ii) set the font color to
white
; and iii) set the padding to
5 pixels
.
c. For every label, add a style rule to: i) float the label on the left margin when the
left margin is clear; ii) display the label as a block; iii) set the font size to
0.9 em
;
iv) set the top and bottom margins to
7 pixels
, the right margin to
4%
, and the left
margin to
5 pixels
; and v) set the width of the label to
40%
.
