Working With Custom HTML Attributes in Thymeleaf – 在Thymeleaf中使用自定义HTML属性

最后修改: 2018年 8月 30日

1. Overview


In this tutorial, we look at how we can define custom attributes in HTML5 tags using Thymeleaf. It is a template engine framework which allows plain HTML to be used to display dynamic data.


For an introductory article on Thymeleaf or its integration with Spring refer to this link.


2. Custom Attributes in HTML5


Sometimes we may require extra information in HTML pages to do some processing on the client-side. For instance, we may want to save additional data in form input tags so that we can use them while submitting the form using AJAX.

有时我们可能需要HTML页面中的额外信息,以便在客户端做一些处理。例如,我们可能想在form input标签中保存额外的数据,这样我们就可以在使用AJAX提交表单时使用它们。

Likewise, we may want to display custom validation error messages to a user filling a form.


In any case, we can supply this additional data by using HTML 5’s custom attributes. Custom attributes can be defined in an HTML tag using the data- prefix.

在任何情况下,我们可以通过使用HTML 5的自定义属性来提供这些额外的数据。自定义属性可以在HTML标签中使用data-前缀来定义。

Now, let’s see how we can define these attributes using the default dialect in Thymeleaf.


3. Custom HTML Attributes in Thymeleaf


We can specify a custom attribute in an HTML tag using the syntax:



Let’s create a simple form which allows a student to register for a course to see things in action:


<form action="#" th:action="@{/registerCourse}" th:object="${course}"
    method="post" onsubmit="return validateForm();">
    <span id="errormesg" style="color: red"></span> <span
      style="font-weight: bold" th:text="${successMessage}"></span>
                <label th:text="#{msg.courseName}+': '"></label>
                <select id="course" th:field="*{name}">
                    <option th:value="''" th:text="'Select'"></option>
                    <option th:value="'Mathematics'" th:text="'Mathematics'"></option>
                    <option th:value="'History'" th:text="'History'"></option>
            <td><input type="submit" value="Submit" /></td>

This form contains a single dropdown with the available courses and a submit button.


Let’s say we want to show a custom error message to the user if they click on submit without selecting a course.


We can save the error message as a custom attribute in the select tag and create a JavaScript function to validate its value on submitting the form.


The updated select tag looks something like this:


<select id="course" th:field="*{name}" th:data-validation-message="#{msg.courseName.mandatory}">

Here, we’re fetching the error message from the resource bundle.


Now, when the user submits the form without selecting a valid option, this JavaScript function will display an error message to the user:


function validateForm() {
    var e = document.getElementById("course");
    var value = e.options[e.selectedIndex].value;
    if (value == '') {
        var error = document.getElementById("errormesg");
        error.textContent = e.getAttribute('data-validation-message');
        return false;
    return true;

Similarly, we can add multiple custom attributes to HTML tags by defining th:data-* attribute for each one of them.


3. Conclusion


In this quick article, we explored how we can leverage Thymeleaf’s support to add custom attributes in HTML5 templates.


As always a working version of this code is available over on Github.