Thymeleaf is a modern server-side Java template engine for both web and standalone environments. In this article, you'll learn how to create HTML forms with Thymeleaf and how to handle the form submission on the backend using Spring Boot. If you need more information on working with Thymeleaf in Spring Boot, take a look at this guide.
What you need
IDE - Eclipse or Spring Tool Suite (STS)
JDK 1.8 or later
Gradle 4+ or Maven 3.2+
Project Directory
Dependencies
To use Thymeleaf with Spring Boot, you only need to include spring-boot-starter-web and spring-boot-starter-thymeleaf . Spring Boot DevTools is a great tool that helps you to develop an application faster. It reflects changes in the code without the need to restart the whole application each time.
You can create a project by using Spring Initializr web tool and use the above-mentioned dependencies.
When you want to create the project from Spring Initializr, select these dependencies and generate project. Take a look for more detail of Spring Initializr at Spring Initializr Modules.
Java Model Class
Let’s create a simple Java model class named Employee.java that stores information about the employees:
Lombok is used to reduce code for model objects, e.g., it can generate getters and setters for those objects automatically by using Lombok annotations. Take a look at How to install Lombok.
Controller
Let’s create a Spring MVC controller class called EmployeeController.java that defines three HTTP end-points to handle different GET and POST requests:
The showHome() method is bound to handle GET requests at / HTTP endpoint and returns the name of the Thymeleaf view (index) to render an HTML form.
The showRegistrationForm() method is bound to handle GET requests at /registration_form HTTP endpoint and returns the name of the Thymeleaf view (registration_form) to render an HTML form. It uses a Model object to expose a new Employee object to the view template.
The saveEmployee() method is bound to handle POST requests at /save HTTP endpoint and registration_form.html form is submitted. Since the submitted employee is @ModelAttribute Employee, that model is bind to result.html and displayed the result. The submitted employee will not be saved into the database. This will be written in the next article.
HTML with Thymeleaf
Let’s create simple HTML page index.html for the welcome page under src/main/resources/templates/ folder.
And then let’s create an employee registration form registration_form.html with Thymeleaf templates under src/main/resources/templates/ folder.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Create New Employee</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
<body>
<div class="container my-3">
<div class="row">
<div class="col-md-8 mx-auto">
<h2>Employee Registration</h2>
<form th:action="@{/save}" th:object="${employee}" method="post">
<div class="form-row">
<div class="col-md-6 form-group">
<label>ID</label>
<input type="number" class="form-control" th:field="*{id}">
</div>
<div class="col-md-6 form-group">
<label>Name</label>
<input type="text" class="form-control" th:field="*{name}">
</div>
<div class="col-md-6 form-group">
<label>Department</label>
<select class="form-control" th:field="*{dept}">
<option value="">Choose...</option>
<option value="IT">IT</option>
<option value="HR">HR</option>
<option value="Sale">Sale</option>
</select>
</div>
<div class="col-md-6 form-group">
<label>Age</label>
<input type="number" step="any" class="form-control" th:field="*{age}">
</div>
<div class="col-md-6 form-group">
<strong>Gender</strong>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" th:field="*{gender}" id="option1" value="Male">
<label class="form-check-label" for="option1">Male</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" th:field="*{gender}" id="option2" value="Female">
<label class="form-check-label" for="option2">Female</label>
</div>
</div>
<div class="col-md-6 form-group">
</div>
<div class="col-md-6 form-group">
<label>Joining Date</label>
<input type="text" class="form-control" placeholder="yyyy-MM-dd" id="join_datepicker" th:field="*{joiningDate}">
</div>
<div class="col-md-6 form-group">
<label>Retiring Date</label>
<input type="text" class="form-control" placeholder="yyyy-MM-dd" id="retire_datepicker" th:field="*{retiringDate}">
</div>
</div>
<button type="submit" class="btn btn-primary btn-block mt-3">Save</button>
</form>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$("#join_datepicker").datepicker({dateFormat:"yy-mm-dd"});
$("#retire_datepicker").datepicker({dateFormat:"yy-mm-dd"});
});
</script>
</body>
</html>
Let’s create a display_form.html to show the submitted employee information.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Result</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css"
th:href="@{/css/display_form.css}" />
</head>
<body>
<h2>Result</h2>
<table>
<tbody>
<tr>
<td><strong>ID:</strong></td>
<td><span th:text="${employee.id}"></span></td>
</tr>
<tr>
<td><strong>Name:</strong></td>
<td><span th:text="${employee.name}"></span></td>
</tr>
<tr>
<td><strong>Age:</strong></td>
<td><span th:text="${employee.age}"></span></td>
</tr>
<tr>
<td><strong>Gender:</strong></td>
<td><span th:text="${employee.gender}"></span></td>
</tr>
<tr>
<td><strong>Department:</strong></td>
<td><span th:text="${employee.dept}"></span></td>
</tr>
<tr>
<td><strong>Joining Date:</strong></td>
<td><span th:text="${employee.joiningDate}"></span></td>
</tr>
<tr>
<td><strong>Retiring Date:</strong></td>
<td><span th:text="${employee.retiringDate}"></span></td>
</tr>
<tr>
<td colspan="2"> <a th:href="@{registration_form}"
class="btn btn-success"> <i class="fa fa-arrow-circle-o-left"></i> Add
new employee
</a></td>
</tr>
</tbody>
</table>
</body>
</html>
If you need more information about Thymeleaf templates, take a look at Thymeleaf tutorial.
Running & Testing the Application
Once the application is started, open http://localhost:8080/ in a web browser to view the HTML form. Here is how it looks like:
Click Go to Employee Registration Form link.
When you fill all input fields and then click on the Save button, you will see the following output:
You can see the source code in this github link EmployeeRegistration.
Top comments (0)