HTML and CSS Reference
In-Depth Information
Chapter 7
Basic JSF2 HTML5 Components
HTML5 introduced new web form elements to cater to common input types. None of these new elements have JSF
equivalents. In this chapter we will look at four of the new HTML5 input types and implement them as composite
components. The input types implemented in this chapter are the Input Color, Date Picker, Slider, and Spinner types.
The other components are left as an exercise for the reader to implement. A complete list of the new input types can
be found in Table
7-1
.
Table 7-1.
New Input Types in HTML5
Type
State
Data type
Control type
search
Search
Text with no line breaks
Search field
tel
Telephone
Text with no line breaks
Text field
url
URL
Absolute IRI
Text field
email
E-mail
E-mail address or list of e-mail addresses
Text field
datetime
Date and time
Date and time (year, month, day, hour,
minute, second, fraction of a second) with
the time zone set to UTC
Date and time control
date
Date
Date (year, month, day) with no time zone
Date control
month
Month
Date consisting of a year and a month with
no time zone
Month control
week
Week
Date consisting of a week-year number
and a week number with no time zone
Week control
time
Time
Time (hour, minute, seconds, fractional
seconds) with no time zone
Time control
datetime-local
Local date and time
Date and time (year, month, day, hour,
minute, second, fraction of a second) with
no time zone
Date and time control
number
Number
Numerical value
Text field or spinner
control
range
Range
Numerical value, with the extra semantic
that the exact value is not important
Slider control
color
Color
sRGB color with 8-bit red, green, and blue
components
Color well
