1. Overview

1.概述

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.

在本教程中，我们看一下如何使用Thymeleaf在HTML5标签中定义自定义属性。它是一个模板引擎框架，允许使用普通的HTML来显示动态数据。

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

关于Thymeleaf或其与Spring集成的介绍性文章，请参考此链接。

2. Custom Attributes in HTML5

2.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.

现在，让我们看看如何使用Thymeleaf的默认方言来定义这些属性。

3. Custom HTML Attributes in Thymeleaf

3.Thymeleaf中的自定义HTML属性

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

我们可以使用语法在HTML标签中指定一个自定义属性：。

th:data-<attribute_name>=""

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>
    <table>
        <tr>
            <td>
                <label th:text="#{msg.courseName}+': '"></label>
            </td>
            <td>
                <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>
                </select></td>
        </tr>
        <tr>
            <td><input type="submit" value="Submit" /></td>
        </tr>
    </table>
</form>

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.

我们可以将错误信息保存为select标签中的一个自定义属性，并创建一个JavaScript函数，在提交表单时验证其值。

The updated select tag looks something like this:

更新后的select标签看起来像这样。

<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:

现在，当用户提交表单而没有选择有效的选项时，这个JavaScript函数将向用户显示一个错误信息。

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.

同样，我们可以通过为每个标签定义th:data-*属性来为HTML标签添加多个自定义属性。

3. Conclusion

3.总结

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

在这篇快速文章中，我们探讨了如何利用Thymeleaf的支持，在HTML5模板中添加自定义属性。

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

像往常一样，该代码的工作版本可在Github上获得。