JSF标签与Html标签对照表

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

<
h:commandButton
   
id
="submit"

   value
="#{msg.buttonHeader}"

   action
="nextPage"
>


</
h:commandButton
>

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

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

<
h:inputText 
id
="address"

  value
="#{jsfexample.address}"
 
/>

<
input 
type
="text"
 name
="jsftags:_id1"

  value
="123 JSF Ave"
 
/>

<
h:inputSecret 
redisplay
="false"

  value
="#{jsfexample.password}"
 
/>

<
input 
id
="jsftags:password"

   type
="password"

   name
="jsftags:password"

   value
="secret"
 
/>

<
input 
id
="jsftags:hidden"

   type
="hidden"

   name
="jsftags:hidden"

   value
="userPreference"
 
/>

<
textarea 
id
="jsftags:textArea"

   name
="jsftags:textArea"

   cols
="5"
 rows
="3"
>

    Text goes here..

</
textarea
>

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


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

10032

<
h:outputLabel 
for
="address"
>

  
<
h:outputText 
id
="addressLabel"

    value
="User Home Address"
/>


</
h:outputLabel
>

<
span 
id
="jsftags:addressLabel"
>

  User Home Address
</
span
>

<
h:outputLink
 
value
="#{msg['jsfstudio.home.url']"
>

  
<
f:verbatim
>
JSF Studio
</
f:verbatim
>


</
h:outputLink
>

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

 JSF Studio

</
a
>

<
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 tryimg Exadel JSF Studio!

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:

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

<
h:selectBooleanCheckbox
 
title
="emailUpdates"

  value
="#{jsfexample.wantsEmailUpdates}"
 
>


</
h:selectBooleanCheckbox
>


<
h:outputText
  
value
="Would you like email updates?"
/>

<
input 
type
="checkbox"

  name
="jsftags:_id6"
 checked
    title
="emailUpdates"
 
/>

Would you like email updates?

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

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

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

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

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

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

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

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

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

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

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