JSF Form component is a collection of fields along with the data and submit functionality to be sent to the model implementing the business scenario.

JSF Form

To use the form in your JSF page include the following namespace;


Some of the important form tag attributes are;

  1. id: This is the unique identifier used to identify a component.
  2. onclick: invokes the javascript function to be called when a button is clicked next to an element.
  3. onsubmit: The javascript function to be called on click of form by a submit button.
  4. onreset: Javascript to be invoked on the reset of the elements in a form.
  5. rendered: flag indicating whether a component should be rendered or still processed.
  6. binding: value of the expression linked to a property in a backing bean.
  7. lang: the language used by the components in the form.
  8. target: Name of the frame where the resource retrieved is to be displayed.
  9. accept: the contents list that the form can handle.
  10. ondblclick: Javascript code to be executed when the mouse is double clicked over a field in a form.
  11. onmouseup: Javascript code to be executed when the mouse button is released over a component.
  12. onmousedown: Javascript code to be executed when the mouse pointer is clicked down over this element.
  13. acceptCharSet: defines the list of character encoding that the form will accept.
  14. style: The CSS style definitions that can be applied for the form
  15. prependId: flag that indicates whether id should be prepended to the form
  16. dir: Overrides default text functionality for this component.
  17. title: A title for an element of the form used as tooltip.

JSF Form Example

Consider an example to demonstrate the usage of the JSF form. A minimalistic form contains at least some text fields, labels and a submit button to generate a post request. This example demonstrates a minimal JSF form page.

Create a page called cardetails.xhtml as shown below.

In the JSF page above, we declared a <h:form> tag that contains the fields – name, id, model, color and registration number pertaining to the car object. All these fields together constitute a Car form wherein a user can enter the details and click the submit button to post the details.

Upon click of the form submit button, viewdetails.xhtml page is called that prints the data entered by the user.

Let’s now create the viewdetails.xhtml page that displays all the car details entered by the user.

This view page fetches all the details from the Car bean through getter and setter methods.

Below is the code for Car managed bean.

The Car class contains the getter and setter methods for all the fields.The @ManagedBean annotation indicates that the car is a managed bean and @SessionScoped indicates that the bean is valid for the session.

Below image shows the final project structure of the project.


JSF Form Example Test

Just build the project and run the application, you should get below response in the browser.


That’s all for the JSF form example and the interaction between the managed beans. You can download final project from below link and play around with it to learn more.

By admin

Leave a Reply

%d bloggers like this: