Create Employee Registration Form and Submit the Form Using Spring Boot and Thymeleaf
Tags: java, thymeleaf, html, jquery
Published: 2020-07-06 15:45:05

**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](https://attacomsian.com/blog/spring-boot-thymeleaf-example).

#What you need

- IDE - Eclipse or Spring Tool Suite (STS)

- JDK 1.8 or later

- Gradle 4+ or Maven 3.2+

#Project Directory

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xr9vhwh1zi7m9ksx24no.png)

 

#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.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9ui2883w2dwsgkub94l2.png)

 

You can create a project by using [Spring Initializr](https://attacomsian.com/blog/scaffolding-spring-boot-application#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](https://www.javatpoint.com/spring-initializr).


 

#Java Model Class

Let’s create a simple Java model class named **Employee.java** that stores information about the employees:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5mi01bx4md8mvkqii3zr.png) 

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](https://www.vogella.com/tutorials/Lombok/article.html#:~:text=Lombok%20is%20used%20to%20reduce,automatically%20by%20using%20Lombok%20annotations).

#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:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ikgrovuln82tq9x55ewk.png)
 
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.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8dmroh1p9bfypbpaplz0.png)

And then let’s create an employee registration form **registration_form.html** with Thymeleaf templates under src/main/resources/templates/ folder.
```html
<!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.


```html
<!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">&nbsp;<a th:href="@{registration_form}"
					class="btn btn-success"> <i class="fa fa-arrow-circle-o-left"></i>&nbsp;Add
						new employee
				</a></td>
			</tr>
		</tbody>
	</table>
</body>
</html>
```

If you need more information about Thymeleaf templates, take a look at [Thymeleaf tutorial](https://www.thymeleaf.org/doc/tutorials/2.1/thymeleafspring.html#creating-a-form).


#Running & Testing the Application

Once the application is started, open [http://localhost:8080/](http://localhost:8080/) in a web browser to view the HTML form. Here is how it looks like:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kwglaf984y46ocl1h0an.png)

Click Go to Employee Registration Form link.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/87rfye9ee7tr7uhqv0hc.png) 

When you fill all input fields and then click on the **Save**  button, you will see the following output:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/p4cvg49nsqg82yrc6rsb.png)


You can see the source code in this **github** link [EmployeeRegistration](https://github.com/ThiriYadanar/EmployeeRegistraiton).