HTML and CSS Reference
In-Depth Information
usemap
: Specifies the URL of a client-side image map (only for
input type="image"
).
value
: Specifies the initial value of a control before it has been modified by the user.
width
: Specifies the width of an
input type="image"
in either pixels or as a percentage. This is
new in HTML5; image inputs couldn't previously carry dimension attributes.
Note that many of the optional attributes available for the
input
element are specific
only to certain types of form inputs (as indicated by the
type
attribute). Also, many of the
new attributes in HTML5 can override the equivalent attribute settings in the parent
form
element.
Next we'll go through each of the different input types in more detail, one by one.
input type="text"
This type of
input
element creates a single-line field in which your visitor can type whatever text you
might require, such as a name, address, or a short answer to a question. It's usually rendered in browsers
as a white, rectangular box with a thin inset border, though CSS can easily change its appearance.
These single-line text fields are best for very short bits of text, no more than a few words. If the entered
text exceeds the width of the field, the excess characters will run off to one end of the field so the end of
the text string is visible and the first portion appears truncated. Rest assured that the complete value is still
there, it's just not all visible. Longer, multi-line passages of text call for the
textarea
element, covered
later in this chapter.
An
input type="text"
element may carry an optional
maxlength
attribute, defining the maximum
number of characters (including spaces) that can be entered into the field. Unfortunately, web browsers
offer no indication that a text field has a maximum allowed length; when you reach the limit, it simply stops
accepting anything you type. If you paste an overlong string of text into a field with a
maxlength
attribute,
the text will be truncated. If you need to use a
maxlength
attribute on a text field (for example, a username
field to log into a system that restricts usernames to 12 characters or less), it's helpful to indicate the
maximum length in a note near the form control.
An optional
value
attribute allows you to set the initial text of the field, which a user can delete or modify,
or she can it leave alone and the default value will be submitted with the form. It's especially useful for
automatically “prepopulating” forms with stored information that a user can edit. Text fields that are meant
to be blanks where your users can enter new information should, in fact, be blank when initially rendered.
You shouldn't use
value
to provide hints or instructions; there are other elements and attributes for that,
as you'll soon see.
Listing 8-2 shows the markup for a basic text control. We've included a
maxlength
attribute along with a
note about the maximum allowed length, as well as a
size
attribute. Because this example asks a user to
update previously saved information, we've also prepopulated the field using the
value
attribute.