The following example demonstrates how to accept text input from the user:

<f:view>
<h:form>
<div>
<h:outputLabel for="name" value="Enter your name: " />
<h:inputText id="name" value="#{backingBean.name}" />
<h:commandButton value="Submit" />
</div>
<div>
<h:outputText value="Hello, #{backingBean.name}" rendered="#{backingBean.name ne null and backingBean.name ne ''}" />
</div>
</h:form>
</f:view>

Notice the value attribute of the<h:inputText> tag. The text field is bound to a backing bean String property using the JSF Expression Language (JSF EL). When the form is submitted, the property is set to the value of the text entered by the user.

This example also demonstrates conditional rendering of JSF components. Most JSF tags support the rendered attribute. This attribute allows us to control when a JSF component should be displayed on the page. In this case, the<h:outputText> tag is conditionally rendered when the backing bean's name property is not null and is not equal to an empty string.

In the next example we will use a text field to receive a date value from the user. First we register the standard JSF date time converter on the UI component by nesting the<f:convertDateTime> tag inside the<h:inputText> tag. This converter will attempt to convert the text entered by the user to a date by using the conversion pattern specified in the pattern attribute. Next we register a custom date validator to make sure that the converted date value represents a valid birth date. The error message rendered below the text field was produced by our validator class.

<f:view>
<h:form>
<div>
<h:outputLabel for="name" value="Enter your birthdate (M/d/yyyy): " />
<h:inputText id="name" value="#{backingBean.date}">
<f:convertDateTime type="date" pattern="M/d/yyyy" />
<f:validator validatorId="customDateValidator" />
</h:inputText>
<h:commandButton value="Submit" />
</div>
<h:message for="name" style="display:block" errorStyle="color:red" />
<div>
<h:outputText value="You were born on " rendered="#{backingBean.date ne null}" />
<h:outputText value="#{backingBean.date}">
<f:convertDateTime type="date" dateStyle="full" />
</h:outputText>
</div>
</h:form>
</f:view>

The following screenshots demonstrate a custom date validator class that determines if a date represents a valid birth date. The error message rendered below the text field was produced by our validator class.

When the validation is successful, our backing bean property is updated and the view is rendered again in the browser. This time, our conditionally rendered message is displayed to the user.

The next example shows how to accept numeric input from the user. JSF includes built-in converter classes that handle conversions between character data (strings) and Java data types, such as Integer, Boolean, Float, Long, and so on. In this example, we specify that the text field component can only accept a whole number between 20 and 50 by using the<f:validateLongRange> tag to register a standard validator on the component.

<h:inputText id="number" value="#{backingBean.number}">
<f:validateLongRange minimum="20" maximum="50" />
</h:inputText>

Note that the error message below the text field was produced by the built-in JSF NumberConverter class and is the default text for this particular error. We can override the default JSF conversion and validation error messages by declaring messages with the same keys in our resource bundle.

If we enter a non-numeric value, we will receive an appropriate error message:

If the number is not in the specified range, we will also get an error:

Finally, the value is accepted by the converter and our view is updated, displaying another conditionally rendered HtmlOutputText component.

The HtmlInputTextarea component is identical to the HtmlInputText component, except that it can specify rows and cols attributes to control the width and height of the text area.

<h:inputTextarea rows="10" cols="80" value="#{backingBean.description}" />