Thymeleaf Interactive Tutorial

Exercise 12: forms

This exercise introduces concepts from chapter 4 - section 3 of the Using Thymeleaf manual.

  1. A bean of class Customer has been set into the context model with variable name customer. This is a complex bean, containing properties of the Gender PaymentMethod enum types.
  2. Edit the source code in order to bind bean fields into form fields. You have to use th:object and th:field attributes.
    As this exercise is more complex than previous ones, some hints have been written as HTML comments inside the template.
  3. After trying a solution, look a the Generated source to see how field elements are populated. In particular, see the input hidden element for the 'id' field.
  4. You can finally press the 'Submit' button to see how the form values are sent to the server.
  5. You can check the proposed solution by pressing the Show solution button () above the code editor.

Welcome to the Thymeleaf Interactive Tutorial. Thymeleaf version used in this tutorial is 2.1.5.RELEASE.

This interactive tutorial has been created by the Thymeleaf Team using The Thymeleaf Template Engine and other great open source tools like:

The tutorial is gracefully hosted at the Heroku Cloud Platform

Icons used in this app, except Thymeleaf logo, are created by Mark James

You can get the source code of this tutorial at GitHub.

You can find much more documentation on Thymeleaf at the Thymeleaf website.

For any questions or help, you can use the user forum.

Source code

Static view

Generated source

Dynamic view