HTML and CSS Reference
In-Depth Information
◗
3.
Save your changes to the file and then reopen the
survey.htm
file in your Web
browser. Figure 6-41 shows all of the option button groups in the survey form.
figure 6-41
completed option button groups
serviceFriendly
field
orderCo
rrect
field
foodHot field
By default, an option button is unselected; however, you can set an option button to
be selected when a form opens by adding the
checked
attribute to the
input
element as
follows:
<input type=”radio” name=”
name
” checked=”checked” />
You also can enter the
checked
attribute without an attribute value, and most brows-
ers will be able to interpret your code.
Creating a Text Area Box
Alice wants the survey form to include a place where customers can enter extended
comments about Red Ball Pizza. She wants customers to be able to enter several lines of
text. Because an input box is limited to a single line of text, it would not be appropriate
to enter those comments in an input box. Instead, you can create a control element that
allows for extended text entries using the
textarea
element
<textarea name=”
name
”>
text
</textarea>
where
text
is default text that is placed in the text area box. You do not have to
specify default text and can leave the text box empty. Many browsers also support the
placeholder
attribute introduced in the last session to provide additional hints to users
about what to enter into the text box.
Browsers determine the default size of a text area box. Most browsers create a box
that is about 20 characters long and two or three lines high. You can set the dimensions
of a text area box using the CSS
width
and
height
style properties. HTML also supports
the
row
and
cols
attributes to set the size of the box, as follows
The
rows
and
cols
attributes are required
under strict applications
of XHTML.
<textarea rows=”
value
” cols=”
value
”> ... </textarea>
where the
rows
attribute specifies the number of lines in the text area box and the
cols
attribute specifies the number of characters per line.
As you type text into a text area box, the text automatically wraps to a new line as it
extends beyond the box's width. If more text is entered into a box than can be displayed,
the browser automatically adds horizontal and vertical scroll bars to the box. You can
determine whether the locations of line wrapping are included in the field value by using
the
wrap
attribute
<textarea wrap=”
type
”> ... </textarea>