Thymeleaf common syntax: HTML attribute settings

Use Thymeleaf attributes to set HTML attributes.
(1) Use the th:attr attribute to modify the attributes of the original HTML node;
(2) The th:attr attribute can set multiple attributes at the same time;
(3) Each HTML attribute has a corresponding Thymeleaf attribute, such as th:attr=" value='value'" can be changed to th:value="value"
(4) HTML type is checkbox, readonly, required, disabled, Thymeleaf attribute can be written as th:checked="true/false";
(5) ) Use th:attrappend and th:attrprepend to add data after or before HTML attributes;
(6) Use th:styleappend and th:classappend to add styles to the original style and class attributes respectively;
(7) HTML5 custom attributes start with " As a prefix, Thymeleaf also supports custom attributes. For example, you can use "data-th-text" instead of "th:text" and
"data-th-each" instead of "th:each";

Development environment: IntelliJ IDEA 2019.2.2
Spring Boot version: 2.1.8

Create a new Spring Boot project named demo.

1.
Add the Thymeleaf dependency to pom.xml

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

2、src/main/java/com/example/demo/TestController.java

package com.example.demo;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class TestController {
    @RequestMapping("/")
    public String test(){
        return "test";
    }
}

3、src/main/resources/templates/test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form th:id="form1" th:attr="method='post',action=@{/user/save}">
    <input type="text" value="值1" th:value="值2" />
    <input type="text" th:readonly="true" />
    <input type="text" th:disabled="true" />
    <input type="checkbox" th:checked="true" />
    <input type="checkbox" th:checked="false" />
    <div id="div1" th:attrappend="id='-data'" style="text-align: center;"  th:styleappend="'color:#ccc'"></div>
    <div id="div2" th:attrprepend="id='data-'" class="class1" th:classappend="class2"></div>

    <input id="user" type="text" data-person-name="lc" data-age="30"/>
    <div data-th-text="hello"></div>

    <script>
        var obj = document.getElementById("user");
        //获取HTML5属性值的2种方式，用dataset方式时，如果名称带连字符则使用时需驼峰化
        var s = obj.dataset.personName + "," + obj.getAttribute("data-age");
        alert(s);
    </script>

</form>

</body>
</html>

Browser access: http://localhost:8080
page pops up: lc,30
right click to view the source code of the webpage, the generated HTML source code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form id="form1" method="post" action="/user/save">
    <input type="text" value="值2" />
    <input type="text" readonly="readonly" />
    <input type="text" disabled="disabled" />
    <input type="checkbox" checked="checked" />
    <input type="checkbox" />
    <div id="div1-data" style="text-align: center; color:#ccc"></div>
    <div id="data-div2" class="class1 class2"></div>

    <input id="user" type="text" data-person-name="lc" data-age="30"/>
    <div>hello</div>

    <script>
        var obj = document.getElementById("user");
        //获取HTML5属性值的2种方式，用dataset方式时，如果名称带连字符则使用时需驼峰化
        var s = obj.dataset.personName + "," + obj.getAttribute("data-age");
        alert(s);
    </script>

</form>

</body>
</html>

Thymeleaf common syntax: HTML attribute settings

Guess you like