JSF 2 html inputText

In this tutorial you will learn about the JSF 2 html inputText tag.

JSF 2 html inputText

In this tutorial you will learn about the JSF 2 html inputText tag.

JSF 2 html <h:inputText> tag is translated into the HTML <input> element of its attribute 'type' = "text". This tag is used in the JSF applications to provide the user to enter text into i.e. an one-line input field. 'value' and 'name' attribute of this tag is encoded by rendering the current value of the component and the clientId respectively.

Attributes of <h:inputText>

• converter : This is not a required attribute but, is used when you are required to invoke a Converter (if any).
• converterMessage : This is not a required attribute but, if it is used it displays a converter message as text and it also replaces the message coming from Converter.
   
• id : This is not a required attribute but, is used to make the component uniquely identifiable within its parent UIComponent.
• immediate : This is not a required attribute. It evaluates a boolean expression. If this attribute is used with 'true' value it specifies that the value of component must be converted and validated in the Apply Request Values phase instead of expecting for the Process Validations phase.
  
  
• rendered : This is not a required attribute. It evaluates a boolean expression. Presence of this attribute specifies that whether the current component should be rendered in the Rendered Response phase or not or worked on any later form submission. The default value of this attribute is defined to true.
  
  
• required : This is not a required attribute. It evaluates a boolean value. If this attribute is present it makes required for the user to input the value into the component.
  
  
• requiredMessage : This is not a required attribute. If this attribute is present it displays the textual validation message for the required (if used) attribute.
• validator : This is not a required attribute but, is used when you are required to invoke a Validator.
• validatorMessage : This is not a required attribute but, if it is used it displays a validator message as text and it also replaces the message coming from Validator.
  
  
• value : This is not a required attribute but, is used to specify the current value of the component.
• valueChangeListener : This is not a required attribute but, is used when you are required to invoke a valueChangeListener method to notified on the change of component's new value.
  
  
• accesskey : This is not a required attribute. This attribute is used to define an access key i.e create a shortcut key for the component which can be accessed by the combination (browser dependent combination) of Alt+accesskeyValue or Alt+Shift+accesskeyValue. When this key combination is pressed the focus will be transferred to the current element.
  
  
• alt : This is not a required attribute but, is used to define an alternate textual description for the current element.
• autocomplete : This is not a required attribute. If this attribute's value is set to "off" it shows that the browser's autocomplete characteristic should not enabled for this component and if the value is set to "on" or this attribute is not specified then it render nothing.
  
  
• dir : This is not a required attribute that evaluates to the java.lang.String value which suggests the direction for the text that doesn't inherit the property of maintaining a direction (directionality). The allowable values are "LTR (Left-to-Right)" and "RTL (Right-to-Left)".
  
• disabled : This is not a required attribute. It evaluates a boolean value which presence specifies that whether this component will be participated in the form submission or be get focused or not.
  
  
• label : This is not a required attribute but, is used to specify the user presentable name for the current component.
• lang : This is not a required attribute but, is used specify the language code.
• maxlength : This is not a required attribute but, is used to limit the user to enter the maximum number of characters in input filed.
• onblur : This is not a required attribute. This attribute is used to execute a JavaScript code, on the focus of element is lost.
• onchange : This is not a required attribute. This attribute is used to execute a JavaScript code, on the focus of element is lost and the new value has been changed when it get focused.
  
  
• onclick : This is not a required attribute. This attribute is used to execute a JavaScript code, on the element is clicked.
• ondblclick : This is not a required attribute. This attribute is used to execute a JavaScript code, on the element is clicked double.
• onfocus : This is not a required attribute. This attribute is used to execute a JavaScript code, on the element get focused.
• onkeydown : This is not a required attribute. This attribute is used to execute a JavaScript code, on the key is pressed down onto the element.
• onkeypress : This is not a required attribute. This attribute is used to execute a JavaScript code, on the key is pressed and released onto the element.
• onkeyup : This is not a required attribute. This attribute is used to execute a JavaScript code, on the key is released onto the element.
• onmousedown : This is not a required attribute. This attribute is used to execute a JavaScript code, on the mouse pointer button is pressed down onto the element.
  
  
• onmousemove : This is not a required attribute. This attribute is used to execute a JavaScript code, on the mouse pointer button is traveled inside the element.
  
  
• onmouseout : This is not a required attribute. This attribute is used to execute a JavaScript code, on the mouse pointer button is traveled out form the element.
  
  
• onmouseover : This is not a required attribute. This attribute is used to execute a JavaScript code, on the mouse pointer button is traveled over the element.
• onmouseup : This is not a required attribute. This attribute is used to execute a JavaScript code, on the mouse pointer button is released onto the element.
• onselect : This is not a required attribute. This attribute is used to execute a JavaScript code, on the text inside the element is selected.
• readonly : This is not a required attribute evaluates a boolean expression. This attribute is used to prevent the user from any kind of modification of this element's value.
  
  
• size : This is not a required attribute but, is used to specify the width of the field.
• style : This is not a required attribute but, is used to specify the CSS style will be applied to this component when rendered.
• styleClass : This is not a required attribute but, is used to specify the applicable CSS style space-separated list to be applied at the time of rendering.
• tabindex : This is not a required attribute that evaluates to a java.lang.String value specifies the tabbing order value. This value must be an integer within the range 0 to 32767.
  
• title : This is optional attribute that evaluates a java.lang.String. This attribute is used to specify the title information which will be displayed as tooltip about markup elements.
  
• binding : This is not a required attribute. This attribute evaluates to a javax.faces.component.UIComponent specified for linking the component with the property of backing bean.

Example :

An example for how to use the JSF h inputText tag in JSF applications is being given here. This example demonstrate about the use of <h:inputText> tag in JSF pages. In this example at first I have created a JavaBeans with the 'name' and 'message' properties. Values of these properties can be get using its getter method and the value of name property can be set using the setter method defined in the JavaBeans class. Then created the input.xhtml JSF page where I have used the <h:inputText> tag two times one of them I have made it read only and in the other textbox user can input the value as well as I have used a <h:commandButton> tag. I have kept these tags inside the <h:form> tag to submit their values. Then created an another JSF page named output.xhtml to retrieve the value which has been provided at the input.xhtml page.

Directory Structure

NameBean.java

package devmanuals;

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

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

String name;
String message = "Name field is Required";
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getMessage() {
return message;
}
}

input.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 inputText</title>
</head>
<body>
<f:view>
<h:form>
This is a read only textbox : <h:inputText value="Unmodifiable textbox" readonly="true" title="readOnly textbox"/><br/><br/>
Enter name into the textbox : <h:message for="nameText" style="color:red" />&nbsp;
<h:inputText id="nameText" value="#{nameBean.name}" required="true" requiredMessage="#{nameBean.message}" tabindex="5" maxlength="15" accesskey="t"/><br/>
<h:commandButton value="submit" action="output" />
</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 inputText</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>jsfHInputText</display-name>
<welcome-file-list>
<welcome-file>input.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 this example

After copying the above code paste them to the respective files or by downloading the code from Download Source Code start your web server and then use the following link http://localhost:8181/jsfHInputText/input.xhtml in the address bar of the web browser.

Output :

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

1. The main page will look like as follows :

2. When you will entered the characters into the text box then the output.xhtml page will be executed and output will be as follows :

3. But, if you will not entered the characters into the textbox then an error will be showed and the output will be as follows :

The HTML source code for the rendered <input> element is 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 inputText</title>
</head>
<body>
<form id="j_idt3" name="j_idt3" method="post" action="/jsfHInputText/input.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt3" value="j_idt3" />

This is a read only textbox : <input type="text" name="j_idt3:j_idt5" value="Unmodifiable textbox" title="readOnly textbox" readonly="readonly" /><br /><br />
Enter name into the textbox : 
<input id="j_idt3:nameText" type="text" name="j_idt3:nameText" accesskey="t" maxlength="15" tabindex="5" /><br /><input type="submit" name="j_idt3:j_idt10" value="submit" /><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="H4sIAAAAAAAAAJVSQWsTQRR+3STVhFhrW3LTgxRBkAlSAmIQE2xDg1sNbASLB50k0+7E2d1x5m0y6aHgPxA8CRWvHrzpHxAPgqCgR/+DR6/izCY2PejBB/Nm98289773zffmBxSkVnBuSEeUpMgF2aY63KGycOr7+w+VR19z4LWgJBI6aNE+JqoNRQwV02EiBkbebICz8vi09ct25RHODh/yAW5cj2nEusxgqmD1gZ81EDTeJ3d7Q9bH+rMv918t68vCAzDSZUprCIvT7PQJHELOhgsuPP87VFBzpQzZo32mST+JZBKzGMm99q0/3+sdlUimcHKbTXRH8RFFBjNbse0ULM3hbMVpdPLQYlijiIr3UmS6G1JsKhYwtCytzllqKkUnPtdonn47/+IjfZmDhTbkNT9g2TTeOO+8Tbr0d7gBWlDblkSmAjpiavfT2xvPjz7veOD5UOwLqvUdSyDCSkZd1WGtBhZWvF/3oaRtziCrgVCZ3uBJNWCKU8EPaE+wupFy5Hgra+eX7FwXbHui03gGxnlhByPNTsdvb20aSy75P3JPEue6FBFKc/KyxjDTyGKmEbcWXHjNUlP7Bx4eSUE22R5NBbamwfWmlGLSTR6z+OfrK7tHjWGj7B5rXIFylccyRWJCjIStfi19d/GXce9YcFq6eiwez+nrzEyd2VY7PsvUZ34DXCDjnQ8DAAA=" autocomplete="off" />
</form>
</body>
</html>