Hidden Inputs in Thymeleaf

November 02, 2020 No comments Thymeleaf input hidden

1. Introduction

Thymeleaf is a Java-based template engine used to process documents like HTML, XML, and others. It is one of the most popular libraries used to generate dynamic websites in Java applications. In this article we are going to present how to use hidden inputs in Thymeleaf templates.

2. Thymeleaf forms

Let's start with creating a simple form in Thymeleaf and break it down into its components.

<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>Spring Boot Thymeleaf Application - Forms</title>
</head>
<body>

<form th:action="@{/posts}" th:object="${post}" method="post">
    <div>
        <label for="title">Title:</label>
        <input id="title" type="text" th:field="*{title}" placeholder="Title"/>
    </div>
    <div>
        <label for="content">Content:</label>
        <textarea id="content" rows="2" placeholder="Content" th:field="*{content}"></textarea>
    </div>

    <input type="hidden" th:field="*{id}"/>
    <input type="submit" value="Submit"/>
</form>

</body>
</html>

There are several important aspects we need to explain here:

  • every form in Thymeleaf used a simple HTML form tag,
  • form could be associated with Java object provided in th:object attribute - this object is called command object,
  • command object properties can be attached to inputs using th:field attribute,
  • action could be specified using Thymeleaf attribute th:action or simply action.

Hidden fields are similar to regular one the different is in type. For hidden fields we used type="hidden":

<input type="hidden" th:field="*{id}"/>

Java object associated with this form has the following structure:

package com.frontbackend.thymeleaf.bootstrap.model;

import lombok.Getter;
import lombok.NoArgsConstructor;
import lombok.Setter;

@Getter
@Setter
@NoArgsConstructor
public class Post {

    private String id;
    private String title;
    private String content;
}

Now let's have a look at a simple controller that could handle GET and POST requests:

package com.frontbackend.thymeleaf.bootstrap.controller;

import java.util.UUID;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import com.frontbackend.thymeleaf.bootstrap.model.Post;

@Controller
@RequestMapping({ "/", "/posts" })
public class PostController {

    @GetMapping
    public String main(Model model) {
        Post post = new Post();
        post.setId(UUID.randomUUID().toString());
        model.addAttribute("post", post);
        return "index";
    }

    @PostMapping
    public String save(Post post, Model model) {
        model.addAttribute("post", post);

        // call service to save the post

        return "saved";
    }
}

Every GET request to the root context / or /posts path will present a form associated with a brand new Post object filled with a unique id. POST requests handled by the save method are intended to save post data submitted in HTML form.

Using th:field is one of the way to assign a value to a hidden input, but we could use also:

  • simple name attribute:

    <input type="hidden" th:value="${blog.id}" name="id" />

  • or th:attr Thymeleaf attribute:

    <input type="hidden" th:value="${blog.id}" th:attr="name='id'"/>

3. Conclusion

In this article, we presented how to create a form with hidden fields in Thymeleaf. We showed several ways to achieve that in a real-life but simple example.

As usual, all the code examples used in this tutorial can be found over on Github.

{{ message }}

{{ 'Comments are closed.' | trans }}