Thymeleaf is a template engine for creating views. It can be easily integrated with a Spring boot web application.
Thymeleaf uses HTML as the language for creating templates with its own directives applied to HTML elements.
This article will explain how to submit a form created as Thymeleaf template to a Spring boot controller.
Note: This article assumes that you are familiar with configuring Thymeleaf with Spring boot.
Creating a Thymeleaf form
As stated above, Thymeleaf has its own directives that are written on HTML elements so that Thymeleaf template engine can parse them to its own format.
Some of these directives related to form elements that we will be using in this form submit example are:
1. th:action
Similar to the HTML form action attribute, it is placed over form tag, its value is the URL to which the form will be submitted.
URL is written between curly braces and prefixed with @ symbol.
2. th:object
Object to which form elements will be bound. This object corresponds to entity present on the Spring controller side(or server side).
Properties of this object should match with the attributes of form elements.
3. th:field
This attribute is applied over form elements and its value should match the property names of the object given in th:object attribute.
Values of th:field are enclosed between curly braces and prefixed with a *.
A sample Thymeleaf form for this example is given below. Name of this template is registration.html.
<html xmlns:th="http://www.thymeleaf.org">
<head>
<styLe>
.label{
width:10%;
display:inline-block;
margin:5px;
}
.input{
border-radius:5px;
height:30px;
margin-bottom:10px
}
.submit{
margin-left:10%;
}
</style>
</head>
<h1>Registration Form</h1>
<form th:action="@{/register}" method="post" th:object="${employee}">
<fieldset>
<label class="label">Name</label>
<input class="input" type="text" th:field="*{name}"/><br/>
<label class="label">Address</label>
<textarea th:field="*{address}"></textarea><br/>
<label class="label">Married</label>
<input type="radio" th:field="*{married}" value="Yes"/>Yes
<input type="radio" th:field="*{married}" value="No"/>No<br/>
<label class="label">Permanent</label>
<input class="input" type="checkbox" th:field="*{permanent}"/><br/>
<button class="submit" type="submit">Register</button>
</fieldset>
</form>
</html>
This form uses HTML input box, radio button, text area and check box form elements.
When rendered in the browser, it will look as below.
Each of the
th:action values in the above form template correspond to fields(or properties or instance variables) of an object.For submitting a form to Spring boot, we need to create such object at the server. This is called model object.
So, a class with these properties is given below.
package com.codippa.demo;
public class Employee {
private String name;
private String address;
private int age;
private String married;
private boolean permanent;
// Getter and setter methods
}
Note that th:field values match the property names or instance variables of this object.
Secondly, notice the th:object attribute of Thymeleaf form tag refers to a value. This value corresponds to an object of Employee class shown above.
So, before the HTML form is displayed an object of this class should be created and added to the Spring model object.
Thus, when the application is accessed using URL http://localhost:8080, we need to create a controller method mapped to this root URL.
Employee, bind it with a name(or key) and place it in Spring’s Model class and return the name of Thymeleaf template as below.
@GetMapping("/")
public String home(Model model) {
model.addAttribute("employee", new Employee());
return "registration";
}
Notice that the name(or key) with which the object is added matches the value of th:object attribute.
Next, we also need to create a controller method that handles form submission or gets called when the form is submitted.
URL of this method should match with the th:action form attribute, its method should be POST. Example,
@PostMapping("/register")
public String registerEmployee(@ModelAttribute("employee")Employee employee) {
return "confirmation";
}
Notice the @ModelAttribute annotation.
This attribute binds the object with the data sent while submitting the form. This is the reason that the properties of this object should match the values of th:field attributes of the form so that values sent from browser are mapped to the corresponding properties.
Below image explains the mapping of values between Thymeleaf form fields, Spring controller methods and model object.
Above controller method returns a String which is the name of another Thymeleaf template and is used to display the values that were submitted.
Note that the object received is automatically sent back. Thymeleaf template code for confirmation.html is given below.
<html xmlns:th="http://www.thymeleaf.org">
<head>
<style>
div{
padding:10px;
}
span{
display:inline-block;
width:10%;
}
</style>
</head>
<h1>Please confirm the information</h1>
<hr />
<div>
<strong><span th:text="Name"></span></strong>
<span th:text="${employee.name}"></span>
</div>
<div>
<strong><span th:text="Address"></span></strong>
<span th:text="${employee.address}"></span>
</div>
<div>
<strong><span th:text="Married"></span></strong>
<span th:text="${employee.married}"></span>
</div>
<div>
<strong><span th:text="Permanent"></span></strong>
<span th:text="${employee.permanent} ? 'Yes' : 'No'"></span>
</div>
</html>
Note that in order to display text in an element, Thymeleaf’s th:text attribute is used. Property of model object whose value is to be displayed is referenced using dot operator.
When the form is submitted, below is the result.
All the Thymeleaf templates can be placed at the default location src/main/resources/templates of at some other custom template location.
That is all on form submission with Thymeleaf using Spring boot.