JSF 2 html inputSecret

In this tutorial you will learn about the JSF 2 h inputSecret tag.

JSF 2 html inputSecret

In this tutorial you will learn about the JSF 2 h inputSecret tag.

<h:inputSecret> tag in JSF 2 is translated into the HTML <input> element of type 'password'. This tag is used where you want to hide your input text from the other user. Using this tag you can input your text into the textbox in a symbolic form. The 'value' attribute of this tag is rendered by rendering the current value of the component and in case of 'styleClass' attribute is defined then the value is rendered as the 'class' attribute's value and the 'name' attribute is encoded by rendering clientId of the component.

Attributes of <h:inputSecret>

• converter : An optional attribute, is used when you are required to invoke a Converter (if any).
• converterMessage : An optional attribute, is used to display a textual converter message, converter message given by the Converter is replaced with converterMessage (if present).
  
• id : An optional attribute, this attribute is an unique identifier. If this attribute is present it makes the component uniquely identifiable.
• immediate : An optional attribute that evaluates a boolean value which specifies whether the value of component must be converted and validated on Apply Request Value phase instead of waiting for the Process Validations phase or not.
  
• rendered : An optional attribute that evaluates to a boolean value which specifies 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 : An optional attribute that evaluates to a boolean value which specifies that the submitted value of this component is necessary or not.
• requiredMessage : An optional attribute, is used as to display the required textual validation message if the required attribute is used.
• validator : An optional attribute, is used when you are required to invoke a Validator (if any).
• validatorMessage : An optional attribute, is used to display a textual validator message, validator message given by the Validator is replaced with validatorMessage (if present).
  
• value : An optional attribute, is used to specify the current value of component.
• valueChangeListener : An optional attribute, is used when you are required to invoke a valueChangeListener method to notified on the change of component's new value.
  
• accesskey : An optional attribute, is used to define the access key i.e. the shortcut key for the component that when this key is pressed the focus is transferred to the current element.
  
• alt : An optional attribute, is used to specifiy an another text based description for the element.
• autocomplete : An optional attribute that evaluates the java.lang.String value. 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 : An optional 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 : An optional attribute that evaluates a boolean value. The 'true' value specifies that the current component will not be participated in later form submission or never be get the focus. And the 'false' value specifies that the attribute must not be rendered.
   
• label : This is an optional attribute. This attribute evaluates to a java.lang.String value used to specifies the user presentable name.
• lang : This is an optional attribute. This attribute evaluates to a java.lang.String value and is used to specify the language code.
• maxlength : An optional attribute, is used to specify the maximum number of input characters in this field.
• onblur : An optional attribute, is used to execute JavaScript code when the focus of this element is being lost.
• onchange : An optional attribute, is used to execute the JavaScript code on the element's focus is being lost and the element's value has been changed.
• onclick : An optional attribute, is used to execute the JavaScript code on over this element a mouse pointer button is clicked.
• ondblclick : An optional attribute, is used to execute the JavaScript code on over this element a mouse pointer button is doubly clicked.
• onfocus : An optional attribute, is used to execute the JavaScript code on getting the focus of this element.
• onkeydown : An optional attribute, is used to execute the JavaScript code on the key is pressed down onto this element.
• onkeypress : An optional attribute, is used to execute the JavaScript code on the key is pressed down and released onto this element.
• onkeyup : An optional attribute, is used to execute the JavaScript code on the key is released onto this element.
• onmousedown : An optional attribute, is used to execute the JavaScript on the mouse pointer button is pressed down onto this element.
• onmousemove : An optional attribute, is used to execute the JavaScript on the mouse pointer button is traveled inside this element.
• onmouseout : An optional attribute, is used to execute the JavaScript on the mouse pointer button is traveled away from this element.
• onmouseover : An optional attribute, is used to execute the JavaScript on the mouse pointer button is traveled over this element.
• onmouseup : An optional attribute, is used to execute the JavaScript on the mouse pointer button is released onto this element.
• onselect : An optional attribute, is used to execute the JavaScript on selection of the text inside this element.
• readonly : An optional attribute that evaluates a boolean value which is used to prevent the user from making any kind of modification of this element's value.
  
• redisplay : An optional attribute that evaluates a boolean value that specifies the any value of this field should be rendered at form creation.
• size : An optional attribute, is used to specify the width of this field.
• style : An optional attribute that evaluates to a java.lang.String value, which specifies that the CSS style will be applied to this component when rendered.
• styleClass : An optional attribute that evaluates to a java.lang.String value which specifies the applicable CSS style space-separated list to be applied at the time of rendering.
  
• tabindex : An optional 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 : An optional attribute that evaluates to a java.lang.String value specifies the title information about markup elements.
• binding : An optional attribute that 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 about how to use the <h:inputSecret> tag in your JSF applications. In this example I have created a JavaBeans for getting and setting the properties value. Then created two JSF view pages into one of which I have used the <h:inputText> and <h:inputSecret> tag to input the value and in an another page I have used the <h:outputText> tag to show the entered value.

Directory Structure

UserBean.java

package devmanuals;

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

@ManagedBean(name="userBean")
@RequestScoped
public class UserBean {

String name;
String psw;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getPsw() {
return psw;
}
public void setPsw(String psw) {
this.psw = psw;
} 
}

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 inputSecret</title>
</head>
<body>
<f:view>
<h:form>
Enter your Name : <h:inputText value="#{userBean.name}" /><br/><br/>
Enter your password : <h:inputSecret value="#{userBean.psw}" title="password" size="10" maxlength="8"/><br/> <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 inputSecret</title>
</head>
<body>
<f:view>
<h:outputText value="Your Name is : #{userBean.name}" /> <br/>
<h:outputText value="Your password is : #{userBean.psw}" />
</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>jsfHInputSecret</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

Download the source code from the link Download Source Code provided in the WAR file and then import the source code in Eclipse IDE as a WAR file and then select the imported file and then press the Right Click -> Run As ->Run on Server and then Click Finish button.

Output :

When you will execute the above example and input the value as entered into the image given below :

Then the output will be as follows :

And the HTML source code 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 inputSecret</title>
</head>
<body>
<form id="j_idt3" name="j_idt3" method="post" action="/jsfHInputSecret/input.jsf" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt3" value="j_idt3" />

Enter your Name : <input type="text" name="j_idt3:j_idt5" /><br /><br />
Enter your password : <input type="password" name="j_idt3:j_idt7" value="" maxlength="8" size="10" title="password" /><br /> <br /><input type="submit" name="j_idt3:j_idt9" value="submit" /><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="H4sIAAAAAAAAAJVSz2sTQRR+3SStjan0F7npqQiCTBAJFYOY0DY0dGsDW8HiQSebaXfi7O505m2y6aHgfyB4EipePXjzLxAPQsGCHv0fPHp3ZhObKnrwwbzdfTvfe99733v3HQpSK1jo0T4lCXJBNqkOtqkszHz78LH89EsOnCYURUy7TepjrFowi4FiOohFN5X362CtNLhk/Lw5eYTp3hPexduJgqXHbpZX0OiA7HR6zMfai7NHb+b1DeEApNIACtJYcgjHkLNfxwqIxaRkn/pMEz8OZRyxCMnD1tqv95W2iiVTONxiQw1jWzQJFVyZFNyIkvDiT4lQpIiKdxJkWtuSMOY/nfG3ZwrhmqlJdBKNGVgvGGrSaLfd1sa6mVb1Hzd4KAVZZ/s0EdgcBVcaUorhbvyMRT/e3tw7qffqJctlUIZShUcyQZIGGApT+c7h3OlWmpoJVP9vAm3F+xTZxV5tczMIy5N+dwOKDcU8w9MIM5G7oRQdulxj+vzr1Vef6OscTLUgr/kRy/RxBnnrDej631l5aGpvmm1gyqN9pvZO3997efJ52wHHhVlfUK0f0JAhLGbLULHaVDxDKzqouVDUBtPNciCURzd4XPGY4lTwI9oRrJZK2bcNLWSaLUnrL1s550abdjd7rJ4vUd6uFELBhm+dRx35J6L6OyL9CWnttPkNAwAA" autocomplete="off" />
</form>
</body>
</html>