JavaServer Faces HTML Tags Reference

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

UIForm | UICommand | UIGraphic | UIInput | UIOutput | UIMessage and UIMessages | UISelectBoolean | UISelectMany | UISelectOne | UIPanel | UIColumn and UIData | UISelectItems | UISelectItem

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>
Next Page 
<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>
jsf-sun 
<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 
10032
outputLabel 
<h:outputLabel for="address">
  <h:outputText id="addressLabel"
    value="User Home Address"/>
</h:outputLabel>


<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>

<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>

<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 reference 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.

Tutorials
Training


Exadel, Inc. Copyright 2004