Home Tutorials Java Jsf Jsf2TagLibrary Html JSF 2 html form

JSF 2 html form

Posted in : Java Posted on : June 29, 2012 at 5:17 PM Comments : [ 0 ]

In this tutorial you will learn about the tag in JSF.

JSF 2 html form

In this tutorial you will learn about the <h:form> tag in JSF.

In JSF applications <h:form> tag is used in the JSF pages to represent the data these data are either used to show to the user or to submit with form. This tag that evaluates the javax.faces.component.UIForm which renders the HTML <form> tag. This tag provides the facility to display and/or get the data from the user by putting in the displaying and/or getting data controls inside. A <h:form> tag that doesn't contains any thing inside it is useless it will not perform any layout. On a single JSF page multiple <h:form> tags can be included. When this tag renders the HTML <form> the "method" attribute is set to the POST and it's id value is generated automatically if the attribute "id" is not given by the developer at the time of development.

For example when on a JSF page you will use the <h:form> tag which doesn't contains anything inside it then the rendered page will look like as :

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

<head>
<title>JSF 2 html form</title>
</head>
<body>
<form id="j_idt3" name="j_idt3" method="post" action="/jsfHForm/form.jsf;jsessionid=0BE9B83DAD30F83A17E30556DB8B06E7"
enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt3" value="j_idt3" />
<input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState"
value="H4sIAAAAAAAAAJVSz2sTQRR+3TStTYv0h/ampyIKMkGkIoRigm1ocKuBrWDxoC+bSXfi7O505m2y6aHgfyB4EipePXjzLxAPgqCgR/8Hj568OL
ONpgc9+GAe8+u973vve2++Q1kZDUt9HCDLSEi2jSbaQVWe/fbu/erjLyXwmlCRKXabGFKqWzBHkeYmSmU3V7fq4GxheMb6Rbs8gpn+I9Gl65mGlYd+kVd
iss/udfo8pNqzzw9eLZor0gPIlQ0oK2vZARxByZ2ONDAXk7MehtywMI1VmvCE2P3W7d/7tbZOFdc0usNHBsa2bBNqODsB3Eqy+PSjIqggkRadjLgxDhLG
/GcK/m5NEVy0mMxkyZiB85KTYY12229tbdpurf/jh4iVZJu8h5mk5snlWkMpOdpNn/Dkx+ure8f1fn3BcRmeh/lqL9UxyyOKpQW+eePnZZ3ntgHr/9eAt
hYDJH66VFfbLMG5Sbm7EVJD88DStLpM1G5ojSNfGMqffr3w4gO+LMFUC6aNOOSFPN5w2nkbdOnvrAKy2Nt2GLgOcMD13se3G8+PP+144PkwF0o05i7GnG
C5mIWqk6YaWFrJfs2HirEx3SIHwerJD5FWA64FSnGIHclruVIDV9BSIdmKcn7eqVl2g3btz+x4SuW/ABH1qXDQAgAA" autocomplete="off" />
</form>
</body>
</html>

Here the form id="j_idt3" is auto generated and value of "method" attribute is set to the 'post'.

Attributes of <h:form> tag

id : This is an optional attribute used for making the component uniquely identifiable. Value of this attribute must be unique.
prependId : This is an optional attribute. This attribute evaluates a boolean value which specifies whether the form 'id' should computed as prefix to the id of it's descendent at the time of clientId generation process. The default value of this attribute is true.
rendered : This is an optional attribute. This attribute evaluates to a boolean value which indicates that whether the current component should be rendered in the Render Response Phase or not or worked on any later form submission. Default value is 'true'.
accept : This is an optional attribute. This attribute specifies the list of content types that this form processed by a server will handle properly.
acceptcharset : This is an optional attribute. This attribute specifies the list of character encodings used to input the data by the user are accepted by the server that processes this form.
dir : This is an optional attribute. This attribute evaluates to the java.lang.String value that suggests the direction for the text which doesn't inherit the property of maintaining a direction. The allowable values are "LTR (Left-to-Right)" and "RTL (Right-to-Left)".
enctype : This is an optional attribute that specifies the content type to be submitted the form to the server.
lang : This is an optional attribute. This attribute is used to give the description of language of the generated HTML output.
onclick : This is an optional attribute. This attribute specifies the onclick event i.e the JavaScript code is executed when click is done over the element by the pointer button.
ondblclick : This is an optional attribute. This attribute specifies the ondbclick event i.e the JavaScript code is executed when double click is done over the element by the pointer button.
onkeydown : This is an optional attribute. This attribute specifies the onkeydown event i.e the JavaScript code is executed when the key of keyboard is pressed down over this element.
onkeypress : This is an optional attribute. This attribute specifies the onkeypress event i.e the JavaScript code is executed when the key of keyboard is pressed down and released over this element.
onkeyup : This is an optional attribute. This attribute specifies the onkeyup event i.e the JavaScript code is executed when the key of keyboard is released over this element.
onmousedown : This is an optional attribute. This attribute specifies the onmousedown event i.e the JavaScript code is executed when a mouse button is pressed down over this element.
onmousemove : This is an optional attribute. This attribute specifies the onmousemove event i.e the JavaScript code is executed when a mouse button is moved over this element.
onmouseout : This is an optional attribute. This attribute specifies the onmouseout event i.e the JavaScript code is executed when a mouse button is moved away from this element.
onmouseover :This is an optional attribute. This attribute specifies the onmouseover event i.e the JavaScript code is executed when the mouse pointer is moved onto this element.
onmouseup : This is an optional attribute. This attribute specifies the onmouseup event i.e the JavaScript code is executed when the mouse button is relesased over this element.
onreset : This is an optional attribute. This attribute specifies the onreset event i.e. the JavaScript code is executed when the <input type="reset"> i.e reset button is called or form is reset.
onsubmit : This is an optional attribute. This attribute specifies the onsubmit event i.e the JavaScript code is executed when the <input type="submit"> i.e. submit button is called or form is submitted.
style : This is an optional attribute. This attribute is used to add the inline CSS styles that are to be applied on this form to specify how it will be displayed when rendered.
styleClass : This is an optional attribute. This attribute is used to specify the CSS style to be applied on the form. These CSS style class/es is a space-separated list.
target : This is an optional attribute. This attribute specifies the frame's name where the form will be displayed after it's submission.
title : This is an optional attribute. This attribute specifies the text information of the component as a tooltip when the mouse pointer is hover over this form.
binding : This is an optional attribute. This attribute evaluates to a javax.faces.component.UIComponent specified for linking the component with the property of backing bean.

Example :

Here I am giving a simple example which will demonstrate you how a <h:form> tag is used on the JSF page. In this example I shall create the JSF pages into which one of the page will contains the <h:form> tag and other child component tags, and the other page will be created for the action which it will take after submission.

Directory Structure

NameBean.java

package devmanuals;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

@ManagedBean(name="nameBean")
@RequestScoped
public class NameBean {

private String name;

public String getName() {
return name;
}

public void setName(String name) {
this.name = name;
}

public String getOutput()
{
return "output";
}
}

form.xhtml

<!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"
xmlns:f="http://java.sun.com/jsf/core">

<head>
<title>JSF 2 html form</title>
</head>
<body>
<f:view>
<h:form id="f1" title="Name Form" onsubmit="alert('form submitted')">
<h:outputText value="Enter your Name : " />
<h:inputText name="nm" value="#{nameBean.name}" />
<h:commandButton value="submit" action="#{nameBean.getOutput}"/>
</h:form>
</f:view>
</body>
</html>

output.xhtml

<!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"
xmlns:f="http://java.sun.com/jsf/core">

<head>
<title>JSF 2 html form</title>
</head>
<body>
<f:view>
<h:outputText value="Your Name is : #{nameBean.name}" />
</f:view>
</body>
</html>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
<display-name>jsfHForm</display-name>
<welcome-file-list>
<welcome-file>form.xhtml</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
<url-pattern>*.jsf</url-pattern>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
<context-param>
<description>State saving method: 'client' or 'server' (=default). See JSF Specification 2.5.2</description>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
<param-value>client</param-value>
</context-param>
<context-param>
<param-name>javax.servlet.jsp.jstl.fmt.localizationContext</param-name>
<param-value>resources.application</param-value>
</context-param>
<listener>
<listener-class>com.sun.faces.config.ConfigureListener</listener-class>
</listener>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.faces</url-pattern>
</servlet-mapping>
</web-app>

How To Run

Download the war file of code from the link Download Source Code and import this file into your eclipse and then start your server and use the link http://localhost:8181/jsfHForm/form.xhtml into the address bar of your web browser.

Output :

When you will execute this example you will get the output as follows :

1. The first page will look like as :

In the above page when you will hover the mouse in the form area the tooltip will appear by the name 'Name Form'.

2. When you will input the value (as I give "Deepak") into the provided textbox and submit the button an alert box will appear with the value 'form submitted' and after clicking on ok button of alert box the output page will be rendered and the value that you have entered in the textbox will be displayed.

When the JSF page that contains the <h:form> tag is rendered the HTML output will be as follows :

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

<head>
<title>JSF 2 html form</title>
</head>
<body>
<form id="f1" name="f1" method="post" action="/jsfHForm/form.xhtml" enctype="application/x-www-form-urlencoded"
onsubmit="alert('submitted')" title="Name Form"> <input type="hidden" name="f1" value="f1" />
Enter your Name : <input type="text" name="f1:j_idt5" />
<input type="submit" name="f1:j_idt6" value="submit" />
<input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState"
value="H4sIAAAAAAAAAJWSQWsTQRTHXzeJNTGU2Nbe9FQEQSb0ECqGYhbb0OBWA1vB4kEnyWx34uzuOPM22fRQ8BsInoSKVw+e9BOIB0FQ0KP
fwaN3Z7aR7UEPPpjH7tt97/3fb97bn1CRWsHFMZ1QkiIXZJfqcI/KyuKPDx/XHn8rgdOFmkjoqEuHmKgeVDFUTIeJGGXyVges1afnjW+YU0KoB
hs3x4/4CFupgpWHXl5a0PiQ3BuM2RDbz78+eN3Q14QDkEmTU5bGEJxgI30Kx1AyoYoNFW/HClq2TEYCOmSaDJNIJjGLkdzv3f7zvN5XiWQKZ3f
YTPcVn1BkMLdl00rBUiFlJ06jsx9N/1WKqPggRab3Q4quYj5Dw2alYOMqRWce15g9+3755Sf6qgQLPShrfsTySZxp2XqTdPXvcn00onYNOqZ8O
mHq4PP7rRcnX/YccDyoDgXV+i6NGMJyjq1ptTZ9Iys+bHtQ0yZnlNdAWDv9gydNnylOBT+iA8HamZQTy62urV8yc10x7YlO47kY64UZjLj9vtf
b2c4MXPJ/cM+Cs12qCLUCXt4Y5ptxLt8MexZseNWgaf1DD4+kINssoKnA7mlw3ZVSzPaTJyz+9eb6wUln3Knby5peggvNIFERyUKMhCl+Y/Od2
8jsNVbs7hWb5EiZ/QaPFPyv5gIAAA==" autocomplete="off" />
</form>
</body>
</html>

Go to Topic «Previous Home Next»

Tags:

How to learn Advanced Java Programming?

Java Video tutorial: How to learn Java?

6 Programming Languages for Learners to Begin with Coding

Java Video tutorial: How to create directory in Java?

Video Tutorial: How to write to a file in Java?

[ 0 ] Comments

Your Comment:

Tutorial Topics

Java