index
Go to list of available tutorials
Go to Exadel training information

JavaServer Faces HTML Tags

This is a handy reference guide for the standard HTML tag library that is built into JSF. For these tags you need to use the following uri attribute for the JSP taglib directive at the top of the file:

http://java.sun.com/jsf/html

The table that follows shows you examples of HTML output and browser-rendered output for example uses of the tag library. Also, you can skip ahead to some instructions for downloading this reference as a Web application.

Categories of JSF HTML Tags

JSF HTML Tag Reference

JSF Tag

Rendered Result

HTML Source

UIForm

form

<h:form id="jsftags">
 ...
</h:form>

No Renderer

<form id="jsftags" method="post"
    action="/jsftags/faces/pages/tags.jsp"
    enctype="application/x-www-form-urlencoded">
    ...
    <input type="hidden" name="jsftags"
      value="jsftags" />
    <input type="hidden" name="jsftags:link" />
</form>

UICommand

commandButton

<h:commandButton
   id="submit"
   value="#{msg.buttonHeader}"
   action="nextPage">
</h:commandButton>

<input
      id="_id0:submit"
      type="submit"
      name="_id0:submit"
      value="Next Step"/>

commandLink

<h:commandLink id="link" action="goto">
  <h:outputText value="#{msg.linkName}"/>
</h:commandLink>

<a id="_id0:link"
href="#" onclick=
 "document.forms['_id0']['_id0:link'].value=
   '_id0:link';
         document.forms['_id0'].submit();
        return false;">Next Page</a>

UIGraphic

graphicImage

<h:graphicImage id="image"
   alt="jsf-sun"
   url="/images/jsf-sun.gif">
</h:graphicImage>

<img id="jsftags:image"
 src="/jsf-example/images/jsf-sun.gif"
  alt="jsf-sun" />

UIInput

inputText

<h:inputText id="address"
  value="#{jsfexample.address}" />

<input type="text" name="jsftags:_id1"
  value="123 JSF Ave" />

inputSecret

<h:inputSecret redisplay="false"
  value="#{jsfexample.password}" />

<input id="jsftags:password"
   type="password"
   name="jsftags:password"
   value="secret" />

inputHidden

<h:inputHidden id="hidden"
   value="userPreference" />

No Renderer

<input id="jsftags:hidden"
   type="hidden"
   name="jsftags:hidden"
   value="userPreference" />

inputTextArea

<h:inputTextarea id="textArea"
   rows="4" cols="7"
   value="Text goes here.."/>

<textarea id="jsftags:textArea"
   name="jsftags:textArea"
   cols="5" rows="3">
    Text goes here..
</textarea>

UIOutput

outputText

<h:outputText
 value="#{jsfexample.zipCode}"/>

10032

outputLabel

<h:outputLabel for="address">
  <h:outputText id="addressLabel"
    value="User Home Address"/>
</h:outputLabel>

User Home Address

<span id="jsftags:addressLabel">
  User Home Address</span>

outputLink

<h:outputLink
 value="#{msg['jsfstudio.home.url']">
  <f:verbatim>JSF Studio</f:verbatim>
</h:outputLink>

JSF Studio

<a href="http://www.jsf-studio.com">
 JSF Studio
</a>

outputFormat

<h:outputFormat
 value="#{msg.jsfstudioThankYou}">
  <f:param value="Joe Blow"/>
  <f:param id="productName"
    value="#{msg['jsfstudio.label']}"/>
</h:outputFormat>

Thank you, Joe Blow, for trying Exadel JSF Studio!

Thank you, Joe Blow, for tryimg Exadel JSF Studio!

UIMessage and UIMessages

message

Enter address:
<h:message style="color: red"
 for="useraddress" />
<h:inputText id="useraddress"
 value="#{jsfexample.address}"
  required="true"/>
<h:commandButton action="save" value="Save"/>

Enter address: Validation Error: Value is required.

Enter address:
<span style="color: red">
  Validation Error: Value is required.
</span>
<input id="jsftags:useraddress"
 type="text"
  name="jsftags:useraddress" value="" />
<input type="submit" name="jsftags:_id1"
 value="Save" />

UISelectBoolean

selectBooleanCheckbox

<h:selectBooleanCheckbox
 title="emailUpdates"
  value="#{jsfexample.wantsEmailUpdates}" >
</h:selectBooleanCheckbox>
<h:outputText
  value="Would you like email updates?"/>

Would you like email updates?

<input type="checkbox"
  name="jsftags:_id6" checked
    title="emailUpdates" />
Would you like email updates?

UISelectMany

selectManyCheckboxlist

<h:selectManyCheckbox id="cars"
 value="#{carsBean.car}">
  <f:selectItems
   value="#{carBean.carList}"/>
</h:selectManyCheckbox>

Honda Accord

Toyota 4Runner

Nissan Z350

<span id="jsftags:cars">
<table>
 <tr>
 <td><label for="jsftags:cars">
   <input name="jsftags:cars"
     value="accord" type="checkbox">
    Honda Accord</input>
   </label></td>
 <td><label for="jsftags:cars">
   <input name="jsftags:cars"
     value="4runner" type="checkbox">
    Toyota 4Runner</input>
    </label></td>
 <td><label for="jsftags:cars">
   <input name="jsftags:cars"
     value="nissan-z" type="checkbox">
    Nissan Z350</input<
   </label></td>
 </tr>
</table>
</span>

selectManyMenu

<h:selectManyMenu
 id="cars_selectManyMenu"
  value="#{carBean.car}">
   <f:selectItems
    value="#{carBean.carList}"/>
</h:selectManyMenu>

<select id="jsftags:cars_selectManyMenu"
 name="jsftags:cars_selectManyMenu"
  multiple size="1">
  <option value="accord">Honda Accord</option>
  <option value="4runner">Toyota 4Runner</option>
  <option value="nissan-z">Nissan Z350</option>
</select>

selectManyListbox

<h:selectManyListbox
 id="cars_selectManyListbox"
  value="#{carBean.car}">
   <f:selectItems
    value="#{carBean.carList}"/>
</h:selectManyListbox>

<select id="jsftags:cars_selectManyListbox"
 name="jsftags:cars_selectManyListbox"
  multiple size="3">
   <option value="accord">Honda Accord</option>
   <option value="4runner">Toyota 4Runner</option>
   <option value="nissan-z">Nissan Z350</option>
</select>

UISelectOne

selectOneRadio

<h:selectOneRadio
 value="#{carBean.currentCar}">
  <f:selectItems
   value="#{carBean.carList}" />
</h:selectOneRadio>

Honda Accord

Toyota 4Runner

Nissan Z350

<table><tr>
 <td>
  <label for="jsftags:_id9">
   <input type="radio"
    name="jsftags:_id9" value="accord">
      Honda Accord
     </input></label>
 </td>
 <td>
  <label for="jsftags:_id9">
   <input type="radio"
    name="jsftags:_id9" value="4runner">
      Toyota 4Runner
     </input></label>
 </td>
 <td>
  <label for="jsftags:_id9">
   <input type="radio"
    name="jsftags:_id9" value="nissan-z">
      Nissan Z350
     </input>/label>
 </td>
</tr></table>

selectOneMenu

<h:selectOneMenu id="selectCar"
 value="#{carBean.currentCar}">
  <f:selectItems
   value="#{carBean.carList}" />
</h:selectOneMenu>

<select id="jsftags:selectCar"
 name="jsftags:selectCar" size="1">
  <option value="accord">Honda Accord</option>
  <option value="4runner">Toyota 4Runner</option>
  <option value="nissan-z">Nissan Z350</option>
</select>

selectOneListbox

<h:selectOneListbox id="pickCar"
 value="#{carBean.currentCar}">
  <f:selectItems
   value="#{carBean.carList}" />
</h:selectOneListbox>

<select id="jsftags:pickCar"
 name="jsftags:selectCar" size="3">
  <option value="accord">Honda Accord</option>
  <option value="4runner">Toyota 4Runner</option>
  <option value="nissan-z">Nissan Z350</option>
</select>

UIPanel

Grid and Group

<h:panelGrid columns="4" footerClass="subtitle" 
  headerClass="subtitlebig" styleClass="medium" 
  columnClasses="subtitle,medium">
  <f:facet name="header">
    <h:outputText value="Table with numbers"/>
  </f:facet>
  <h:outputText value="1" />
  <h:outputText value="2" />
  <h:outputText value="3" />
  <h:outputText value="4" />
  <h:outputText value="5" />
  <h:outputText value="6" />
  <h:outputText value="7" />
  <f:facet name="footer">
    <h:panelGroup>
      <h:outputText value="one row"  />
      <h:outputText value=" "  />
      <h:outputText
       value="grouped with panelGroup" />
    </h:panelGroup>
  </f:facet>
</h:panelGrid>

Table with numbers
one row grouped with panelGroup
1	2	3	4
5	6	7

<table class="medium">
 <thead>
  <tr><th class="subtitlebig" colspan="4"
   scope="colgroup">Table with numbers</th>
  </tr>
 </thead>
 <tfoot>
  <tr><td class="subtitle"
   colspan="4">
    one row grouped with panelGroup
    </td>
  </tr>
 </tfoot>
 <tbody>
  <tr>
   <td class="subtitle">1</td>
   <td class="medium">2</td>
   <td class="subtitle">3</td>
   <td class="medium">4</td>
  </tr>
  <tr>
   <td class="subtitle">5</td>
   <td class="medium">6</td>
   <td class="subtitle">7</td>
   </tr>
 </tbody>
</table>

UIColumn and UIData

dataTable and column

<h:dataTable id="books"
 columnClasses="list-column-center,
  list-column-right, list-column-center,
list-column-right" headerClass="list-header"
 rowClasses="list-row" styleClass="list-
background" value="#{BookStore.items}" var="store">   
  <h:column>
    <f:facet name="header">
      <h:outputText  value="#{msg.storeNameLabel}"/>
    </f:facet>
     <h:outputText value="#{store.name}"/>
  </h:column>
  <h:column>
    <f:facet name="header">
     <Subject
    </f:facet>
     <h:outputText value="#{store.subject}"/>
  </h:column>
  <h:column>
    <f:facet name="header">
      <h:outputText  value="#{msg.storePriceLabel}"/>
    </f:facet>
     <h:outputText value="#{store.price}"/>
  </h:column>
</h:dataTable>

Title	Subject	Price ($)
JSF For Dummies	JSF	25.0
Struts For Dummies	Struts	22.95

<table id="jsftags:books"
 class="list-background">
 <thead>
  <tr>
   <th class="list-header"
    scope="col">Title</th>
   <th class="list-header"
    scope="col">Subject</th>
   <th class="list-header"
    scope="col">Price ($)</th>
  </tr>
 </thead>
 <tbody>
  <tr class="list-row">
   <td class="list-column-center">
    JSF For Dummies</td>
   <td class="list-column-right">
    JSF</td>
   <td class="list-column-center">
    25.0</td>
  </tr>
  <tr class="list-row">
   <td class="list-column-center">
    Struts For Dummies</td>
   <td class="list-column-right">
    Struts</td>
   <td class="list-column-center">
    22.95</td>
  </tr>
 </tbody>
</table>

UISelectItems

selectItems

<h:selectOneMenu id="selectOneCar"
 value="#{carBean.currentCar}">
  <f:selectItems
   value="#{carBean.carList}" />
</h:selectOneMenu>

<select id="jsftags:selectOneCar"
 name="jsftags:selectCar" size="1">
  <option value="accord">Honda Accord</option>
  <option value="4runner">Toyota 4Runner</option>
  <option value="nissan-z">Nissan Z350</option>
</select>

UISelectItem

selectItem

<h:outputText value="Select car color:" />
<h:selectOneMenu id="chooseCarColor"
  value="apple">
  <f:selectItem
    itemValue="red" itemLabel="Red"/>
  <f:selectItem 
    itemValue="blue" itemLabel="Blue"/>
  <f:selectItem 
    itemValue="black" itemLabel="Black"/>
  <f:selectItem 
    itemValue="green" itemLabel="Green"/>
  <f:selectItem 
    itemValue="white" itemLabel="White"/>
</h:selectOneMenu>

Select car color:

Select car color:
<select id="jsftags:chooseCarColor"
 name="jsftags:chooseCarColor" size="1">
  <option value="red">Red</option>
  <option value="blue">Blue</option>
  <option value="black">Black</option>
  <option value="green">Green</option>
  <option value="white">White</option>
</select>

Running This Reference As an Application

If you would like to run this references as a Web application, download and deploy jsftags-guide.jar . The application contains all the tag examples that you see on this page. It's ready to run. It just needs to be deployed. (Also, the project includes an Ant build script in case you want to rebuild the project.)

Once you have downloaded the Jar file, only a few steps are required. Unzip it by typing:

jar -xvf jsftags-guide.jar

Then add this context to Tomcat server:

<Context debug="0"
  docBase="Path_to_WebContent"
    path="/jsftags-guide" reloadable="true"/>

where Path_to_WebContent is the path on your system to the WebContent folder in the jsftags-guide folder. Finally, start Tomcat and type this in your web browser:

http://localhost:8080/jsftags-guide

JSF Template Also Available

We have also included a blank project template for starting your own JSF projects. To use it, download jsf-blank.jar . Unzip it as above and you will be ready to start developing your own JSF applications. Don't forget to deploy your applications before running.