HTML and CSS Reference
In-Depth Information
You'll add the
value
attribute to the
city
and
state
input boxes, setting the default
values of the fields to
Ormond Beach
and
FL
, respectively.
To set the default
city
and
state
field values:
◗
1.
Return to the
survey.htm
file in your text editor and scroll down to the
input
element for the
city
field. Add the attribute
value=”Ormond Beach”
to the
<input>
tag.
◗
2.
Add the attribute
value=”FL”
to the
<input>
tag for the
state
field. Figure 6-22
highlights the revised HTML code for the two input boxes.
figure 6-22
Defining default values for the city and state fields
default value for the city field
default value for the state field
◗
3.
Save your changes to the file and then refresh
survey.htm
in your Web browser.
Verify that the input boxes for the
city
and
state
fields show the text values
Ormond Beach
and
FL
, respectively.
Starting with HTML5, you can also populate your input boxes with placeholders. A
placeholder
is a text string that appears within the control element and provides users
with information about the kind of information accepted by the field. To create a place-
holder, add the attribute
placeholder=”
text
”
to the control element, where
text
is the text of the placeholder. For example, the fol-
lowing
input
element for the
phone
field provides guidance to users about the format in
which phone numbers can be entered:
<input name=”phone” placeholder=”(nnn) nnn-nnnn” />
When a browser displays the form, the text
(nnn) nnn-nnnn
will appear grayed out in
the phone input box. This text will indicate to a customer reading the form that he or she
should enter a phone number, including both the area code and the seven-digit number.
Unlike a default field value, a placeholder is not stored in the data field and is not
sent to the server as a field value. The placeholder automatically disappears as soon as a
user selects the input box. At the time of this writing, all current browsers except Internet
Explorer support placeholders.
Alice wants you to add placeholders to the
custname, postal code, phone
number
, and
receipt
input boxes; the placeholders should provide information to cus-
tomers about the types of data they should enter and the expected formats. You'll add the
placeholders now.