HTML and CSS Reference
In-Depth Information
check boxes to select
multiple options
radio buttons to
select only one choice
Figure 6-3 Checkbox and radio button controls.
A
select control
creates a selection menu from which the visitor selects one or more
choices (Figure 6-4). This prevents the visitor from having to type information into a text or
textarea field. A select control is suitable when a limited number of choices are available. The
user clicks the list arrow to view all the choices in the menu. When clicked, the default appears
first and is highlighted to indicate that it is selected. The select control does not use the
<input /> tag, but rather the <select> and <option> tags. Here is sample code for a select control:
<select name="station">
<option>Google</option>
<option>Live 365</option>
<option>Pandora</option>
<option>Slacker</option>
</select>
selection control with
default size of one option
in drop-down position
Figure 6-4 Different options for selection controls.
Textareas
To create a textarea, the
Web developer specifies
the number of rows and
columns in which the Web
page visitor can enter
information. You can
specify the dimensions
using the rows and cols
attributes within the
textarea tag. You can also
use CSS height and width
properties to set the
dimensions. The maximum
number of characters for
a textarea is 32,700. It is
a good rule to keep the
number of columns in a
textarea to 50 or fewer.
Using that as a limit, the
textarea will fit on most
screens.
A
textarea control
creates a field that allows multiple lines of input (Figure 6-5).
Textarea fields are useful when an extensive amount of input is required from, or desired
of, a Web page visitor. Note that the textarea control uses the <textarea> tag instead of the
<input /> tag. There are six new textarea attributes with HTML5. These are all listed in
Appendix A. In addition to these, the textarea control has two primary attributes:
rows
•
, which specifies the number of rows in the textarea field
, which specifies the number of columns in the textarea field
A textarea control is created with the following code:
•
cols
What else can you tell us about your music preferences?
<textarea name=”other” rows=”3” cols=”100”></textarea>
The
fieldset control
(Figure 6-5 on the next page) is not an input control but
helps to group related form elements together. This makes the form easier to read and
complete. The form segment in Figure 6-5 shows three groupings: two with left-aligned
legends and one with a right-aligned legend. Using fieldset tags to segregate information
immediately allows the Web page visitor to see that two (or more) categories of
