1. Introduction

1.绪论

Thymeleaf is one of the most popular template engines in the Java ecosystem. It allows us to easily use data from our Java applications to create dynamic HTML pages.

Thymeleaf是 Java 生态系统中最受欢迎的模板引擎之一。它允许我们轻松地使用来自Java应用程序的数据来创建动态HTML页面。

In this tutorial, we’ll look at several ways to use hidden inputs with Spring and Thymeleaf.

在本教程中，我们将看看用Spring和Thymeleaf使用隐藏输入的几种方法。

2. Thymeleaf with HTML Forms

2.带有HTML表格的百里叶

Before we look at working with hidden fields, let’s take a step back and look at how Thymeleaf works with HTML forms in general.

在我们研究隐藏字段的工作之前，让我们退一步看看Thymeleaf是如何与HTML表单一起工作的。

The most common use case is to use an HTML form that maps directly to a DTO in our application.

最常见的用例是使用一个HTML表单，直接映射到我们应用程序中的DTO。

For example, let’s assume we’re writing a blog application and have a DTO that represents a single blog post:

例如，让我们假设我们正在编写一个博客应用程序，并有一个代表单个博客文章的DTO。

class BlogDTO {
    long id;
    String title;
    String body;
    String category;
    String author;
    Date publishedDate;  
}

We can use an HTML form to create a new instance of this DTO using Thymeleaf and Java:

我们可以使用一个HTML表单，用Thymeleaf和Java创建这个DTO的新实例。

<form action="#" method="post" th:action="@{/blog}" th:object="${blog}">
    <input type="text" th:field="*{title}">
    <input type="text" th:field="*{category}">
    <textarea th:field="*{body}"></textarea>
</form>

Notice that the fields in our blog-post DTO map to a single input in the HTML form. This works well in most cases, but what fields shouldn’t be editable? This is where hidden inputs can help.

请注意，我们的博文DTO中的字段映射到HTML表单中的单个输入。这在大多数情况下都很好用，但哪些字段不应该被编辑呢？这就是隐藏的输入可以帮助的地方。

For example, each blog post has a unique ID field that users should not be allowed to edit. Using hidden inputs, we can pass the ID field into the HTML form without allowing it to be displayed or edited.

例如，每篇博客文章都有一个独特的ID字段，用户不应该被允许编辑。使用隐藏输入，我们可以将ID字段传入HTML表单，而不允许显示或编辑。

3. Using the th:field Attribute

3.使用th:field属性

The quickest way to assign a value to a hidden input is to use the th:field attribute:

为隐藏输入赋值的最快捷方式是使用th:field属性。

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

This is the simplest way because we don’t have to specify the value attribute, but it may not be supported in older versions of Thymeleaf.

这是最简单的方法，因为我们不需要指定值属性，但旧版本的Thymeleaf可能不支持这种方法。

4. Using the th:attr Attribute

4.使用th:attr属性

The next way we can use hidden inputs with Thymeleaf is using the built-in th:attr attribute:

我们用Thymeleaf使用隐藏输入的下一个方法是使用内置的th:attr属性。

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

In this case, we have to reference the id field using the blog object.

在这种情况下，我们必须使用id对象引用blog字段。

5. Using the name Attribute

5.使用name属性

Another less verbose approach is to use the standard HTML name attribute:

另一个不那么啰嗦的方法是使用标准的HTML name属性。

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

It solely relies on standard HTML attributes. In this case, we also must reference the id field using the blog object.

它完全依赖于标准的HTML属性。在这种情况下，我们还必须使用id对象引用blog字段。

6. Conclusion

6.结语

In this tutorial, we looked at several ways to use hidden inputs with Thymeleaf. This is a useful technique for passing read-only fields from our DTOs into HTML forms.

在本教程中，我们看了几种使用Thymeleaf的隐藏输入的方法。这是一种有用的技术，可以将只读字段从我们的DTO传入HTML表单。

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

一如既往，本教程中使用的所有代码示例都可以在Github上找到over。