HTML and CSS Reference
In-Depth Information
<label for="email" class="required">
E-mail:
</label>
<input type="text" name="email" id="email" required
pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*\.(\w{2}|(com|net|org|edu|i
nt|mil|gov|arpa|biz|aero|name|coop|info|pro|museum))$" title="E-mail format
required">
The specification indicates that the presentation of fields in error can be controlled by
using the CSS pseudo-class
:invalid
in HTML5-compliant browsers.
A full example for you to test out basic HTML5
required
and
pattern
usage in a
browser can be found at the topic's support Web site.
O
NLINE
http://htmlref.com/ch2/requiredpattern.html
N
OTE
Because validation is under browser control, HTML5 provides a
formnovalidate
attribute that can be set on controls or the form to disable validation.
Autocomplete Lists
Under HTML5, the
input
element's
list
attribute is used to set the DOM
id
of a
datalist
element used to provide a predefined list of options suggested to the user for
entry:
<p><label>
Favorite Dog:
<input type="text" list="dogs"></label></p>
<datalist id="dogs">
<option>
Angus
</option>
<option>
Tucker
</option>
<option>
Cisco
</option>
<option>
Sabrina
</option>
</datalist>
This is similar to the
autocomplete
attribute discussed in the next section, but it allows
you to specify the default data rather than relying on what may have been entered in the
browser previously.
Miscellaneous Usability Improvements
Commonly, Web page authors use the
value
attribute to populate some text in a form field:
<input type="text" name="firstname" id="firstname" value="Thomas">
Quite often, people put placeholder or advisory text here, like so:
<input type="text" name="middlename" id="middlename"
value="Enter your middle name here">
