{"id":66037,"date":"2020-09-01T11:13:03","date_gmt":"2020-09-01T11:13:03","guid":{"rendered":"https:\/\/www.baeldung.com\/?p=86451"},"modified":"2020-09-01T11:13:03","modified_gmt":"2020-09-01T11:13:03","slug":"using-hidden-inputs-with-spring-and-thymeleaf","status":"publish","type":"post","link":"https:\/\/itteacheritfreelance.hk\/wordpress\/index.php\/2020\/09\/01\/using-hidden-inputs-with-spring-and-thymeleaf\/","title":{"rendered":"Using Hidden Inputs with Spring and Thymeleaf"},"content":{"rendered":"

<\/p>\n

1. Introduction<\/h2>\n
<\/div>\n

Thymeleaf<\/a> 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.<\/p>\n

In this tutorial, we’ll look at several ways to use hidden inputs with Spring and Thymeleaf.<\/p>\n

2. Thymeleaf with HTML Forms<\/h2>\n
<\/div>\n

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.<\/p>\n

The most common use case is to use an HTML form that maps directly to a DTO in our application<\/strong>.<\/p>\n

For example, let’s assume we’re writing a blog application and have a DTO that represents a single blog post:<\/p>\n

class BlogDTO {\r\n    long id;\r\n    String title;\r\n    String body;\r\n    String category;\r\n    String author;\r\n    Date publishedDate;  \r\n}<\/code><\/pre>\n
We can use an HTML form to create a new instance of this DTO using Thymeleaf and Java:<\/p>\n
<form action=\"#\" method=\"post\" th:action=\"@{\/blog}\" th:object=\"${blog}\">\r\n    <input type=\"text\" th:field=\"*{title}\">\r\n    <input type=\"text\" th:field=\"*{category}\">\r\n    <textarea th:field=\"*{body}\"><\/textarea>\r\n<\/form><\/code><\/pre>\n
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.<\/p>\n
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<\/b>.<\/p>\n
3. Using the th:field<\/em> Attribute<\/h2>\n
<\/div>\n
The quickest way to assign a value to a hidden input is to use the th:field<\/em> attribute:<\/p>\n
<input type=\"hidden\" th:field=\"*{blogId}\" id=\"blogId\"><\/code><\/pre>\n
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<\/strong>.<\/p>\n
4. Using the th:attr<\/em> Attribute<\/h2>\n
<\/div>\n
The next way we can use hidden inputs with Thymeleaf is using the built-in th:attr<\/em> attribute:<\/p>\n
<input type=\"hidden\" th:value=\"${blog.id}\" th:attr=\"name='blogId'\"\/><\/code><\/pre>\n
In this case, we have to reference the id<\/em> field using the blog<\/em> object.<\/p>\n
5. Using the name<\/em> Attribute<\/h2>\n
<\/div>\n
Another less verbose approach is to use the standard HTML name<\/em> attribute:<\/p>\n
<input type=\"hidden\" th:value=\"${blog.id}\" name=\"blogId\" \/><\/code><\/pre>\n
It solely relies on standard HTML attributes. In this case, we also must reference the id<\/em> field using the blog<\/em> object.<\/p>\n
6. Conclusion<\/h2>\n
<\/div>\n
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.<\/p>\n
As always, all the code examples used in this tutorial can be found over on Github<\/a>.<\/p>\n
The post Using Hidden Inputs with Spring and Thymeleaf<\/a> first appeared on Baeldung<\/a>.<\/p>\n
\"\"<\/p>\n
<\/a> <\/a> <\/a> <\/a> <\/a> <\/a> <\/a> <\/a> <\/div>\n\n
\\\"IT\u96fb\u8166\u88dc\u7fd2
\u7acb\u523b\u8a3b\u518a\u53ca\u5831\u540d\u96fb\u8166\u88dc\u7fd2\u8ab2\u7a0b\u5427!<\/figcaption><\/figure>\r\n<\/br>Find A Teacher Form:\r\n<\/br>https:\/\/docs.google.com\/forms\/d\/1vREBnX5n262umf4wU5U2pyTwvk9O-JrAgblA-wH9GFQ\/viewform?edit_requested=true#responses\r\n<\/br><\/br>Email:\r\n<\/br>public1989two@gmail.com






\r\nwww.itsec.hk<\/a>
\r\nwww.itsec.vip<\/a>
\r\nwww.itseceu.uk<\/a>
<\/p>","protected":false},"excerpt":{"rendered":"
Learn how to use hidden inputs with Thymeleaf.<\/p>\n
The post Using Hidden Inputs with Spring and Thymeleaf<\/a> first appeared on Baeldung<\/a>.<\/p>\n
<\/a> <\/a> <\/a> <\/a> <\/a> <\/a> <\/a> <\/a> <\/div>\n<\/div>","protected":false},"author":795,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"slim_seo":{"title":"Using Hidden Inputs with Spring and Thymeleaf - ITTeacherITFreelance.hk","description":"Learn how to use hidden inputs with Thymeleaf. The post Using Hidden Inputs with Spring and Thymeleaf first appeared on Baeldung .         &"},"footnotes":""},"categories":[6],"tags":[4976,4977],"_links":{"self":[{"href":"https:\/\/itteacheritfreelance.hk\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/66037"}],"collection":[{"href":"https:\/\/itteacheritfreelance.hk\/wordpress\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/itteacheritfreelance.hk\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/itteacheritfreelance.hk\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/795"}],"replies":[{"embeddable":true,"href":"https:\/\/itteacheritfreelance.hk\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=66037"}],"version-history":[{"count":9,"href":"https:\/\/itteacheritfreelance.hk\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/66037\/revisions"}],"predecessor-version":[{"id":70840,"href":"https:\/\/itteacheritfreelance.hk\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/66037\/revisions\/70840"}],"wp:attachment":[{"href":"https:\/\/itteacheritfreelance.hk\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=66037"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itteacheritfreelance.hk\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=66037"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itteacheritfreelance.hk\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=66037"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}