JavaServer Faces supports HTML5 for allowing you to use HTML5 markup directly in your web page. It also allows you to use JavaServer Faces attributes within HTML5 elements. JavaServer Faces supports for HTML5 falls into two categories:
The HTML5-friendly markup feature offers the complete control of Facelets page over the rendered page output rather than having to pass this control to the component. You can mix and match JavaServer Faces and HTML5 components and elements.
Using Pass-Through Elements
It allows you to use HTML5 tags and attributes in your application. JSF treats it as equivalent to JavaServer Faces components associated with a server-side UIComponent instance.
You must specify namespace http://xmlns.jcp.org/jsfTo make an element that is not a JavaServer Faces element a pass-through element. In the following example, code declares the namespace with the short name jsf:
Here, we are using HTML5 email type in JSF form and it is working friendly. The jsf prefix is placed on the id attribute so that the HTML5 input tag's attributes are treated as part of the Facelets page.
// index page
// response page
The following table shows how pass-through elements are rendered as Facelets tags.
Using Pass-Through Attributes
Pass through attributes allow you to pass attributes that are not JavaServer Faces attributes to the browser. If you specify a pass-through attribute in a JavaServer Faces UIComponent, the attribute name and value are passed straight through to the browser without being interpreted by JavaServer Faces components or renderers.
You must use the JavaServer Faces namespace for pass-through attributes to prefix the attribute names within a JavaServer Faces component. In the following example, we are passing attributes attributes through to the HTML5 input component.
Pass-Through Attributes Example