HTML and CSS Reference
In-Depth Information
To reduce the width of the
state
field input box:
◗
1.
Return to the
forms.css
file in your text editor and add the following style rule at
the bottom of the file (see Figure 6-21):
input#state {
width: 50px;
}
figure 6-21
setting the width of the state input box
sets the width of
the state input
box to 50 pixels
◗
2.
Save your changes to the file and then refresh
survey.htm
in your Web browser.
Verify that the width of the input box for the
state
field has been reduced.
Another way to set the width of an input box is by adding the following
size
attribute
to the
input
element
To avoid confusion, set
your width using either
the CSS
width
style or the
HTML
size
attribute, but
not both.
size=”
chars
”
where
chars
is the width of the input box in characters. For example, the HTML code
<input name=”state” size=”2” />
sets the size of the input box for the state field to two characters in width. Note that this
is not an exact measure because the width of individual characters varies depending on
the typeface and font style.
Defining Default Values and Placeholders
More than 90% of Red Ball Pizza customers come from Ormond Beach in Florida.
Rather than forcing these customers to enter the same city and state information in the
survey form, Alice wants you to specify Ormond Beach, FL as the default city and state
values. To define a default value, you add the attribute
value=”
value
”
to any form control, where
value
is the default field value that initially will appear in
the control when the form is opened by the browser. For example, the following input
control sets the default value of the
city
field to
Ormond Beach
:
<input name=”city” value=”Ormond Beach” />
Defining a Default Field Value
• To define the default value of a field, add the attribute
value=”
value
”
to the control element, where
value
is the default value assumed by a browser unless
a user enters a different value.
