1. Overview
Thymeleaf is a popular server-side Java template engine that allows us to create dynamic web pages. It provides several attributes to bind data from the model to the view.
In this short tutorial, we’ll look at the key differences between th:text and th:value attributes in Thymeleaf.
2. Attribute th:text
The th:text attribute in Thymeleaf is used to set the text content of an element.
Furthermore, it replaces the standard HTML text attribute. Therefore, we can put it within any HTML element supporting text content, such as headings, paragraphs, labels, etc.
Additionally, we can use the attribute to display dynamic text content, for instance, the headings on the web page.
Suppose we’d like to show the title attribute provided by the controller on the HTML page.
First, let’s create a controller class and a method where we’ll specify the model attribute:
@GetMapping
public String show(Model model) {
model.addAttribute("title", "Baeldung");
return "attributes/index";
}
Next, we’ll display the value in the heading element:
<h1 th:text="${title}"/>
Here, the Thymeleaf evaluates the expression “${title}” and inserts the value into the heading element.
We’ll get the resulting HTML:
<h1>Baeldung</h1>
Furthermore, unlike the standard HTML text attribute, the th:text attribute supports expressions. Besides variables, these expressions might include operators and functions.
For example, let’s specify the default value in case the title attribute isn’t provided:
<h1 th:text="${title} ?: 'Default title'"/>
3. Attribute th:value
On the other hand, the th:value attribute is used to set the value of an element that usually requires the user’s input. Elements such as input fields, checkboxes, radio buttons, and dropdowns fall under this category.
We can use this attribute instead of the standard HTML value attribute in any element with a value attribute. Therefore, adding such an attribute to an element that doesn’t support it – for example, a paragraph – won’t have any effect.
First, let’s create a simple form containing one input field for an email:
<form th:action="@{/attributes}" method="post">
<input type="email" th:value="${email}">
<input type="submit" value="Submit"/>
</form>
Next, let’s modify our method in the controller and add the email attribute:
@GetMapping
public String show(Model model) {
model.addAttribute("title", "Baeldung");
model.addAttribute("email", "[email protected]");
return "attributes/index";
}
Finally, Thymeleaf will show the value inside the input element:
<input type="email" value="[email protected]">
Since we use the th:value within input fields, it’s more likely that we want to pass the value, on form submission, back to the controller. To pass the value, we need to specify the th:name of an input field in a way that matches the variable name:
<input th:name="email" type="email" th:value="${email}">
Now, we can add a POST method to our controller to read the user’s input:
@PostMapping
public String submit(String email) {
logger.info("Email: {}", email);
return "attributes/index";
}
The attribute supports expressions as well:
<input type="email" th:value:"${email} ?: '[email protected]'"/>
4. Conclusion
In this article, we looked at the differences between the th:text and th:value Thymeleaf attributes. We use the th:text attribute to specify the text content of an element and the th:value attribute to set the value of an element.
As always, the entire source code is available on GitHub.
