How to Create Registration form in Spring Boot and Thymeleaf?
In this previous section I showed you how to make Hello World Application in Thymeleaf and Spring Boot. In this section we are going to learn to make and run Spring Boot Registration form. We will use Spring Boot 3.4.1 and Thymeleaf to make the registration form. In the next section/video I will show you how to add the validation to Spring Boot and Thymeleaf based registration form. So, let's lean to make registration form step by step.
We are going to develop registration page and here is its screenshot:
Step 1: Create Java Class for Form
First of create a package net.roseindia.webapp.forms and inside this package create a Java file with the name UserForm.java. Here is the full code of UserForm.java file:
package net.roseindia.webapp.forms;
public class UserForm {
private String userName;
private String password;
private String confirmPassword;
private String firstLastName;
private String email;
private String address;
private String country;
public String getUserName() {
return userName;
}
public void setUserName(String userName) {
this.userName = userName;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getConfirmPassword() {
return confirmPassword;
}
public void setConfirmPassword(String confirmPassword) {
this.confirmPassword = confirmPassword;
}
public String getFirstLastName() {
return firstLastName;
}
public void setFirstLastName(String firstLastName) {
this.firstLastName = firstLastName;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address;
}
public String getCountry() {
return country;
}
public void setCountry(String country) {
this.country = country;
}
}
This class file will be used to hold the values entered by user in the registration form. You can add more fields to meet your specific project needs.
Step 2: Create Controller Class
What is a Controller class in Spring Boot?
The controller class is an important component in Spring MVC applications and it is used to handle the HTTP request from the user. This class is used to handle the HTTP request from a web browser or other client to map the http request url to a method in the Controller class. In our registration application our controller class will handle Get and Post ("/register") requests.
Create a package net.roseindia.webapp.controllers and then create a new Java file with the name UserController.java. In your Controller class UserController.java add following code:
package net.roseindia.webapp.controllers;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;
import net.roseindia.webapp.forms.UserForm;
@Controller
public class UserController {
@GetMapping("/register")
public String showForm(Model model) {
UserForm user = new UserForm();
model.addAttribute("user", user);
return "userform";
}
@PostMapping("/register")
public String saveForm(@ModelAttribute("user") UserForm form) {
System.out.println("Full Name:" + form.getFirstLastName());
return "userform";
}
}
The @Controller is used to configure the class file to register request handler in the Spring Boot application. The annotation @GetMapping("/register") is used to map the HTTP request to the class function. To handle the post request @PostMapping("/register") is used, while form data is populated to the bean with the help of the code (@ModelAttribute("user") UserForm form) following code:
public String saveForm(@ModelAttribute("user") UserForm form) {..}
Step 3: Create Thymeleaf view page
Now we have to create the view for our application and its userform.html, which is Thymeleaf template page to generate HTML for the user. Create userform.html in the templates directory as shown below:
Here is the full code of the userform.html view file:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="ISO-8859-1">
<title>User Registration</title>
</head>
<body>
<div align="center">
<h1>User Registration</h1>
<form action="#" th:action="@{/register}" method="post" th:object="${user}">
<label>Full name:</label>
<input type="text" th:field="*{firstLastName}" /><br/>
<label>Login Name:</label>
<input type="text" th:field="*{userName}" /><br/>
<label>Password:</label>
<input type="password" th:field="*{password}" /><br/>
<label>ConfirmPassword:</label>
<input type="password" th:field="*{confirmPassword}" /><br/>
<label>E-mail:</label>
<input type="text" th:field="*{email}" /><br/>
<label>Address:</label>
<input type="text" th:field="*{address}" /><br/>
<label>Country:</label>
<input type="text" th:field="*{country}" /><br/>
<br/>
<button type="submit">Register</button>
</form>
</div>
</body>
</html>
Now we are ready with our application and we can test it by running the code.
Step 4: Run and Test application
Run the application in the Eclipse IDE and browser to http://localhost:8080/register to view the form. You enter the value and click on the Register button. After submitting the form you will see the value of the user's full name on the console. You will also see the values you entered in the form in the next page (in the form), which means form data is submitted to controller and then controller displays back the same data in the form.
You can learn and understand more details by watching the video tutorial of creating Registration forms in Spring Boot and Thymeleaf. Here is the video tutorial "How to Create Registration form in Spring Boot and Thymeleaf?":
In this section I have shown the steps to create registration forms in Spring Boot and Thymeleaf. This tutorial will help you gain the skills to make registration forms in Spring Boot. In the next section I will show you how to add form validation code in the Spring Boot registration form. All these tutorials will help you master the Spring Boot Framework, so we suggest you to learn all these tutorials one by one. We are also providing the source code on each step.
Download Source code: Source code of Registration form in Spring Boot and Thymeleaf.
Related Tutorials