How to Use Thymeleaf th:value: A Beginner-Friendly Guide for Spring Boot Forms

1. What Is Thymeleaf th:value?

Key Takeaway: Let's dive into the core concepts of "1. What Is Thymeleaf th:value?" cleanly and effectively.

1. What Is Thymeleaf th:value?

Thymeleaf th:value is an attribute used to set the value of an HTML form element dynamically. In a normal HTML file, you may write value="Apple" directly inside an input tag. That works when the value never changes. However, in a Spring Boot web application, the value often comes from Java code, a database, a search condition, a session object, or a form object. This is where Thymeleaf becomes useful.

For Java beginners learning Spring Boot and Thymeleaf, th:value is one of the most important form-related attributes. It helps connect Java data to HTML input fields. When the page is displayed in the browser, Thymeleaf reads the value from the model and writes it into the final HTML.

For example, if your controller sends a variable named keyword to the HTML page, you can use th:value="${keyword}" to show that keyword inside a search box. This makes the page easier to use because the user can see what they searched for.

<input type="text" name="keyword" th:value="${keyword}" class="form-control">

After Thymeleaf processes the page, the browser receives normal HTML. If the keyword is Java, the final output becomes an input field whose value is Java. This is a basic but very practical idea in Spring Boot form handling.

<input type="text" name="keyword" value="Java" class="form-control">

2. Basic Syntax of Thymeleaf th:value

2. Basic Syntax of Thymeleaf th:value

The basic syntax of th:value is simple. You place it inside an HTML form element and write a Thymeleaf expression as the value. The most common expression is ${...}, which reads a variable from the Spring MVC model.

In Spring Boot, the controller prepares data and sends it to the view. The Thymeleaf template receives that data and displays it inside HTML. This pattern is a core part of Java programming basics for web development.

@Controller
public class SearchController {

    @GetMapping("/search")
    public String search(Model model) {
        model.addAttribute("keyword", "Spring Boot");
        return "search";
    }
}

In the Thymeleaf HTML file, you can display that value inside an input field like this.

<form action="/search" method="get" class="mb-3">
    <label for="keyword" class="form-label">Search keyword</label>
    <input type="text" id="keyword" name="keyword" th:value="${keyword}" class="form-control">
    <button type="submit" class="btn btn-primary mt-3">
        <i class="bi bi-search"></i> Search
    </button>
</form>

When the page opens, the input box already contains Spring Boot. This is helpful because users can understand what value is currently being used. It also improves usability for search pages, edit screens, admin pages, and data entry forms.

3. Using th:value in a Search Form

3. Using th:value in a Search Form

One of the easiest ways to understand th:value is a search form. Many websites have a search box where users type a keyword. After the search result appears, it is common to keep the keyword inside the input field. Without this, the user may forget what they searched for.

In a Spring Boot application, the controller can receive the search keyword with @RequestParam. Then it can send the same keyword back to the Thymeleaf template by using model.addAttribute. This is a very common pattern in Spring Boot MVC.

@Controller
public class ProductController {

    @GetMapping("/products")
    public String products(@RequestParam(name = "keyword", required = false) String keyword, Model model) {
        model.addAttribute("keyword", keyword);
        return "products";
    }
}

The HTML form can use th:value to keep the search keyword on the screen.

<form action="/products" method="get" class="row g-2 mb-4">
    <div class="col-md-8">
        <input type="text" name="keyword" th:value="${keyword}" class="form-control" placeholder="Search products">
    </div>
    <div class="col-md-4">
        <button type="submit" class="btn btn-success w-100">
            <i class="bi bi-search"></i> Search Products
        </button>
    </div>
</form>

If the user searches for notebook, the search result page can still show notebook in the input field. This small detail makes the page feel more professional. For Java beginners, this is also a good way to understand how request parameters, model attributes, and Thymeleaf templates work together.

4. Using th:value in an Edit Form

Key Takeaway: Let's dive into the core concepts of "4. Using th:value in an Edit Form" cleanly and effectively.

4. Using th:value in an Edit Form

Another common use case for th:value is an edit form. For example, imagine a product management screen. When an administrator opens the edit page, the product name, price, and description should already be displayed in the form. The user can then change only the necessary fields.

This is different from a new registration form. A new form starts with empty input fields. An edit form starts with existing data. In Thymeleaf, th:value is often used to place that existing data into each input field.

@Controller
public class ProductEditController {

    @GetMapping("/products/edit")
    public String editProduct(Model model) {
        Product product = new Product();
        product.setId(1);
        product.setName("Java Beginner Book");
        product.setPrice(2500);

        model.addAttribute("product", product);
        return "product-edit";
    }
}

The Thymeleaf template can read each property of the product object. For example, ${product.name} reads the name property, and ${product.price} reads the price property.

<form action="/products/update" method="post" class="card p-4">
    <input type="hidden" name="id" th:value="${product.id}">

    <div class="mb-3">
        <label class="form-label">Product name</label>
        <input type="text" name="name" th:value="${product.name}" class="form-control">
    </div>

    <div class="mb-3">
        <label class="form-label">Price</label>
        <input type="number" name="price" th:value="${product.price}" class="form-control">
    </div>

    <button type="submit" class="btn btn-primary">
        <i class="bi bi-save"></i> Save Changes
    </button>
</form>

The hidden input is also important. It sends the product ID to the server when the form is submitted. The user does not need to see the ID, but the server needs it to know which product should be updated. This is a practical example of using th:value with both visible and hidden form fields.

5. Difference Between value and th:value

5. Difference Between value and th:value

Beginners often wonder about the difference between normal value and Thymeleaf th:value. The normal HTML value attribute is static. It is written directly in the HTML and does not change unless you edit the file. On the other hand, th:value is processed by Thymeleaf on the server side.

When Thymeleaf renders the page, it replaces th:value with a normal HTML value attribute. This means the browser does not understand Thymeleaf directly. The browser only receives standard HTML after Spring Boot and Thymeleaf finish processing the template.

<input type="text" value="Static text" class="form-control">
<input type="text" th:value="${dynamicText}" class="form-control">

The first input always shows Static text. The second input changes depending on the value of dynamicText sent from the controller. This is why th:value is better when the value comes from Java code.

6. Using th:value with Hidden Inputs

6. Using th:value with Hidden Inputs

Hidden inputs are often used in Spring Boot forms. A hidden input is not displayed on the screen, but its value is sent to the server when the form is submitted. This is useful for IDs, page numbers, category IDs, return URLs, and other values that the server needs.

For example, when updating a user profile, the user may edit the name and email address. However, the application also needs the user ID to update the correct database record. Instead of showing the ID on the screen, you can send it with a hidden input.

<form action="/users/update" method="post" class="card p-4">
    <input type="hidden" name="userId" th:value="${user.id}">

    <div class="mb-3">
        <label class="form-label">User name</label>
        <input type="text" name="name" th:value="${user.name}" class="form-control">
    </div>

    <div class="mb-3">
        <label class="form-label">Email address</label>
        <input type="email" name="email" th:value="${user.email}" class="form-control">
    </div>

    <button type="submit" class="btn btn-warning">
        <i class="bi bi-pencil-square"></i> Update Profile
    </button>
</form>

Hidden inputs are convenient, but beginners should remember that hidden does not mean secret. Users can still inspect the HTML in the browser. Do not put passwords, private tokens, or sensitive security information in hidden fields. Use hidden inputs for ordinary form values that are needed for processing.

7. Using th:value with Number, Date, and Email Inputs

Key Takeaway: Let's dive into the core concepts of "7. Using th:value with Number, Date, and Email Inputs" cleanly and effectively.

7. Using th:value with Number, Date, and Email Inputs

The th:value attribute is not limited to text boxes. You can also use it with number inputs, date inputs, email inputs, and other form elements that support the value attribute. This makes it useful for many types of Spring Boot form screens.

For number inputs, Thymeleaf can display an integer or decimal value from a Java object. For email inputs, it can display a string value. For date inputs, the value usually needs to be formatted in a browser-friendly format such as yyyy-MM-dd.

<form action="/members/save" method="post" class="card p-4">
    <div class="mb-3">
        <label class="form-label">Age</label>
        <input type="number" name="age" th:value="${member.age}" class="form-control">
    </div>

    <div class="mb-3">
        <label class="form-label">Email</label>
        <input type="email" name="email" th:value="${member.email}" class="form-control">
    </div>

    <div class="mb-3">
        <label class="form-label">Birthday</label>
        <input type="date" name="birthday" th:value="${member.birthday}" class="form-control">
    </div>

    <button type="submit" class="btn btn-primary">
        <i class="bi bi-send"></i> Submit
    </button>
</form>

If the date does not appear correctly, check the Java data type and the date format. Browser date inputs are strict about format. Many beginners think Thymeleaf is broken, but the actual cause is often that the date value is not in the format expected by the browser.

8. Common Mistakes When Using th:value

8. Common Mistakes When Using th:value

A common mistake is forgetting to add the model attribute in the controller. If the HTML uses th:value="${keyword}", but the controller never adds keyword to the model, the input field may become empty. Always check that the controller and template use the same variable name.

Another mistake is mixing up name and th:value. The name attribute is the key sent to the server when the form is submitted. The th:value attribute is the value displayed inside the input field. They have different roles, and both are important.

<input type="text" name="title" th:value="${article.title}" class="form-control">

In this example, the submitted parameter name is title. The displayed value comes from article.title. If the form is submitted, Spring Boot receives a parameter named title.

Beginners also sometimes use th:text instead of th:value for input fields. The th:text attribute is used to display text between tags, such as inside a paragraph or span. For input fields, use th:value.

<p th:text="${message}"></p>
<input type="text" th:value="${message}" class="form-control">

The first line displays the message as page text. The second line places the message inside an input box. Understanding this difference helps you write cleaner Thymeleaf templates.

9. th:value and th:field

9. th:value and th:field

When learning Thymeleaf forms, you may also see th:field. Both th:value and th:field can place values into form fields, but they are used in slightly different situations.

The th:value attribute is simple and direct. You choose the value by writing an expression. It is easy to use for search forms, hidden values, simple edit screens, and independent input fields. The th:field attribute is often used with form-backing objects and Spring form binding.

<input type="text" name="keyword" th:value="${keyword}" class="form-control">
<input type="text" th:field="*{name}" class="form-control">

The first input is good for a simple keyword search. The second input is often used inside a form connected to an object, such as a user form or product form. For Java beginners, it is fine to start with th:value because it is easier to understand. After that, learning th:field will make Spring Boot form binding easier.

10. Practical Example of th:value in a Spring Boot Form

Key Takeaway: Let's dive into the core concepts of "10. Practical Example of th:value in a Spring Boot Form" cleanly and effectively.

10. Practical Example of th:value in a Spring Boot Form

Let us look at a practical example that combines several ideas. This example uses a product search form with a keyword and maximum price. The user can search products, and the input values stay on the screen after the search.

@Controller
public class ProductSearchController {

    @GetMapping("/product-search")
    public String searchProducts(
            @RequestParam(name = "keyword", required = false) String keyword,
            @RequestParam(name = "maxPrice", required = false) Integer maxPrice,
            Model model) {

        model.addAttribute("keyword", keyword);
        model.addAttribute("maxPrice", maxPrice);

        return "product-search";
    }
}

<form action="/product-search" method="get" class="card p-4 mb-4">
    <div class="mb-3">
        <label class="form-label">Keyword</label>
        <input type="text" name="keyword" th:value="${keyword}" class="form-control" placeholder="Example: Java book">
    </div>

    <div class="mb-3">
        <label class="form-label">Maximum price</label>
        <input type="number" name="maxPrice" th:value="${maxPrice}" class="form-control" placeholder="Example: 3000">
    </div>

    <button type="submit" class="btn btn-success">
        <i class="bi bi-search"></i> Search
    </button>
</form>

This example is simple, but it is very close to real web development. Search forms, edit forms, and admin screens often need this kind of value handling. Once you understand th:value, you can build more user-friendly Spring Boot applications.

For beginners learning Java web development, the key point is that Thymeleaf is a bridge between Java and HTML. Java prepares the data, Thymeleaf places the data into the template, and the browser displays the final HTML. The th:value attribute is one of the easiest ways to see that connection clearly.

Summary

Summary

Key Points About Thymeleaf th:value

In this beginner-friendly Java tutorial for beginners, we explored how to use the Thymeleaf th:value attribute in Spring Boot applications. Understanding how to bind values to HTML form elements is one of the most important skills when learning Java programming basics for web development. The th:value attribute plays a key role in connecting backend Java data with frontend HTML forms.

First, we learned that th:value is used to dynamically set the value of input fields such as text boxes, number inputs, and hidden fields. Unlike the standard HTML value attribute, which is static, th:value allows you to display data from a controller, database, or user input. This makes it essential for building dynamic and user-friendly web applications using Spring Boot and Thymeleaf.

Next, we saw how th:value works with the Spring MVC model. By using model.addAttribute in the controller, you can send values to the Thymeleaf template. Then, using expressions like ${keyword}, you can display those values inside input fields. This pattern is commonly used in search forms, edit forms, and data entry screens.

We also explored real-world use cases. In search forms, th:value helps keep the search keyword visible after submitting the form. This improves usability because users can clearly see what they searched for. In edit forms, th:value allows you to display existing data so users can update only the necessary fields. This is especially useful in admin panels and CRUD applications.

Another important concept is the use of hidden inputs. With th:value, you can send important data such as IDs without displaying it on the screen. This is useful when updating records in a database. However, we also learned that hidden inputs are not secure, so sensitive data should never be stored in them.

We compared th:value with the standard value attribute and also discussed the difference between th:value and th:field. While th:value is simple and flexible, th:field is often used for form binding with objects. Beginners should start with th:value to understand the basics before moving on to more advanced features.

Additionally, we looked at how th:value can be used with different input types such as number, email, and date. Handling different data types correctly is important for creating reliable web forms. For example, date inputs require a specific format, and understanding this helps avoid common errors.

Finally, we reviewed common mistakes, such as forgetting to add attributes to the model or confusing th:value with th:text. Avoiding these mistakes will make your Thymeleaf templates cleaner and easier to maintain.

Sample Program: Basic th:value Usage

@Controller
public class SampleController {

    @GetMapping("/sample")
    public String sample(Model model) {
        model.addAttribute("message", "Hello Thymeleaf");
        return "sample";
    }
}

<input type="text" name="message" th:value="${message}" class="form-control">

<input type="text" name="message" value="Hello Thymeleaf" class="form-control">

This simple example demonstrates how data flows from the Java controller to the HTML view. It is one of the easiest ways to understand how Spring Boot and Thymeleaf work together.