HTML and CSS Reference
In-Depth Information
The placeholder attribute
A usability trick employed regularly by developers is placing text
in an input field as a hint for the user, removing the text when
the user focuses on the field, and restoring the text when focus
leaves the field. This used to require JavaScript. However, it can
now be done declaratively with the
placeholder
attribute. The
specification says, “For a longer hint or other advisory text, the
title
attribute is more appropriate.”
This is generally rendered in a lighter shade of the input's font
colour. It can be styled using
::-webkit-input-placeholder
,
:-moz-placeholder
and
-ms-input-placeholder
. For future com-
patibility, also add
-o-input-placeholder
. This is experimental
and not in the official CSS spec.
It's important to note that
placeholder
does not replace form
<label>
s.
The required attribute
The new
required
attribute can be used on
<textarea>
and most
input fields (except when the
type
attribute is
hidden
,
image
, or
some button types such as
submit
). Modern browsers will not
allow the user to submit the form if required fields are empty
and report an error.
We recommend also adding the ARIA attribute
aria-required
to
such input fields for assistive technology. (See the discussion of
ARIA in Chapter 2.)
The multiple attribute
<input type=file>
is not new in HTML5, but when used in
conjunction with the new
multiple
attribute, the user can now
upload multiple files:
<input type=file multiple>
This was impossible to do in HTML4, so web authors used Java
applets or Flash to achieve the same effect:
multiple
can also be used with other input types: for example,
<input type=email multiple>
allows the user to enter comma-
separated email addresses.