HTML and CSS Reference
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
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.
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