JSF Tutorial - JSF Form_CommandButton Example

The h:commandButton tag renders an HTML input element of the type "submit".

The following JSF code

<h:commandButton value="Click Me!" onclick="alert('Hello World!');" />

is rendered into the following HTML code.

<input type="submit" name="j_idt10:j_idt13" value="Click Me!"
   onclick="alert('Hello World!');" />

Tag Attributes

Attribute	Description
id	id for the tag
rendered	A boolean value; false would suppress rendering
styleClass	Cascading stylesheet (CSS) class name
value	value binding
valueChangeListener	A method binding that responds to value changes
required	A boolean; if true, marks the tag as required
coords	Coordinates for an element whose shape is a rectangle, circle, or polygon
dir	Direction for text. Valid values are ltr (left to right) and rtl (right to left).
disabled	Disabled state of an input element or button
style	Inline style information
tabindex	Numerical value specifying a tab index
target	The name of a frame in which a document is opened
title	A title used for accessibility. Browsers typically create tooltips for the title's value
width	Width of an element
onblur	Event handler for losing focus
onchange	Event handler for value changes
onclick	Event handler for Mouse button clicked over the element
ondblclick	Event handler for Mouse button double-clicked
onfocus	Event handler for element received focus
onkeydown	Event handler for Key pressed
onkeypress	Event handler for Key pressed and released
onkeyup	Event handler for Key released
onmousedown	Event handler for Mouse button pressed
onmousemove	Event handler for mouse moved
onmouseout	Event handler for mouse left
onmouseover	Event handler for mouse moved onto
onmouseup	Event handler for mouse button released
onreset	Event handler for form reset
onselect	Event handler for Text selected

Example

The following code is from login.xhtml.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:h="http://java.sun.com/jsf/html"
      >
 
    <h:body>
      
      <h1>login.xhtml</h1>
      
    </h:body>

</html>

The following code is from UserBean.java.

package com.java2s.common;


import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
 
@ManagedBean(name="user")
@SessionScoped
public class UserBean{
 
  public String goLoginPage(){
    
    return "login";
    
  }
}

The following code is from demo.xhtml.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:h="http://java.sun.com/jsf/html"
      >
    <h:head></h:head>
    <h:body>
      
      <h1>JSF 2 button and commandButton example</h1>
      
      <h:form>
      <ol>
        <li>
          <h:commandButton value="submit" type="submit" action="#{user.goLoginPage}" />
        </li>
        <li>
          <h:commandButton value="reset" type="reset" />
        </li>
        <li>
          <h:commandButton value="button" type="button" />
        </li>
        <li>
          <h:commandButton value="Click Me" type="button" onclick="alert('h:commandButton');" />
        </li>
        <li>
          <h:button value="buton" />
        </li>
        <li>
          <h:button value="Click Me" onclick="alert('h:button');" />
        </li>
        <li>
          <h:button value="buton" outcome="login" />
        </li>
      </ol>
      </h:form>
      
    </h:body>

</html>

Download Form_CommandButton.zip

To RUN

Copy the generated WAR file from the target folder to Tomcat deployment folder and run Tomcat-Install-folder/bin/startup.bat.

After Tomcat finish starting, type the following URL in the browser address bar.

http://localhost:8080/simple-webapp/demo.xhtml