这次我们学习给属性赋值或修改值。
给任何属性赋值 th:attr
现在有一个订阅服务用来推送网站更新消息，并且可通过 /localhost:8080/subscribe 链接跳转到订阅界面进行订阅。主要有一个表单来获取订阅的邮件。
<form action="subscribe.html">
<fieldset>
<input type="text" name="email" />
<input type="submit" value="subscribe!" />
</fieldset>
</form>
action 属性指定了 subscribe 模板本身，“subscribe!” 会显示在按钮上。如果订阅的人看不懂英文，或者不希望发送表单数据到 subscribe.html 上，这就一点都不方便了！
通过 th:attr 动态的给属性赋值，再创建对应的控制器和配置文件就行！
<form action="subscribe.html" th:attr="action=@{/subscribe}">
<fieldset>
<input type="text" name="email" />
<input type="submit" value="Subscribe!" th:attr="value=#{subscribe.submit}"/>
</fieldset>
</form>
th:attr 还可以动态的给多个属性赋值，不同属性之间用逗号隔开。
<img src="../../images/gtvglogo.png"
th:attr="src=@{/images/gtvglogo.png},title=#{logo},alt=#{logo}" />
此时有聪明的小伙伴可能会提出疑问，我直接用 th:* 的格式对特定的属性进行赋值不更方便吗？Thymeleaf 官方也同意你的想法，且给出了例子：
<input type="submit" value="Subscribe!" th:value="#{subscribe.submit}"/>
<form action="subscribe.html" th:action="@{/subscribe}">
这里有大量像这样的属性，每一种都针对一个 HTML5 的属性：
| th:abbr | th:accept | th:accept-charset | th:accesskey | th:action |
|---|---|---|---|---|
| th:align | th:alt | th:acrchive | th:audio | th:autocomplete |
| th:axis | ||||
| th:background | th:bgcolor | th:border | ||
| th:cellpadding | th:cellspacing | th:challenge | th:charset | th:cite |
| th:class | th:classid | th:codebase | th:codetype | th:cols |
| th:colspan | th:compact | th:content | th:contenteditable | th:contextmenu |
| th:data | th:datetime | th:dir | th:draggable | th:dropzone |
| th:enctype | ||||
| th:for | th:form | th:formaction | th:formenctype | th:formmethod |
| th:formtarget | th:fragment | th:frame | th:frameborder | |
| th:headers | th:height | th:high | th:href | th:hreflang |
| th:hspace | th:http-equiv | th:icon | th:id | th:inline |
| th:keytype | th:kind | |||
| th:label | th:lang | th:list | th:longdesc | th:low |
| th:manifest | th:marginheight | th:marginwidth | th:max | th:maxlength |
| th:media | th:method | th:min | ||
| th:name | ||||
| th:onabort | th:onafterprint | th:onbeforeprint | th:onbeforeunload | th:onblur |
| th:oncanplay | th:oncanplaythrough | th:onchange | th:onclick | th:oncontextmenu |
| th:ondblclick | th:ondrag | th:ondragend | th:ondragenter | th:ondragleave |
| th:ondragover | th:ondragstart | th:ondrop | th:ondurationchange | th:onemptied |
| th:onended | th:onerror | th:onfocus | th:onformchange | th:onforminput |
| th:onhashchange | th:oninput | th:oninvalid | th:onkeydown | th:onkeypress |
| th:onkeyup | th:onload | th:onloadeddata | th:onloadedmetadata | th:onloadstart |
| th:onmessage | th:onmousedown | th:onmousemove | th:onmouseout | th:onmouseover |
| th:onmouseup | th:onmousewheel | th:onoffline | th:ononline | th:onpause |
| th:onplay | th:onplaying | th:onpopstate | th:onprogress | th:onratechange |
| th:onreadystatechange | th:onredo | th:onreset | th:onresize | th:onscroll |
| th:onseeked | th:onseeking | th:onselect | th:onshow | th:onstalled |
| th:onstorage | th:onseeking | th:onsubmit | th:onsuspend | th:ontimeupdate |
| th:onundo | th:onunload | th:onvolumechange | th:onwaiting | th:optimum |
| th:pattern | th:placeholder | th:poster | th:preload | |
| th:radiogroup | th:rel | th:rev | th:rows | th:rowspan |
| th:rules | ||||
| th:sandbox | th:scheme | th:scope | th:scrolling | th:size |
| th:sizes | th:span | th:spellcheck | th:src | th:srclang |
| th:standby | th:start | th:step | th:style | th:summary |
| th:tabindex | th:target | th:title | th:type | |
| th:usemap | ||||
| th:value | th:valuetype | th:vspace | ||
| th:width | th:wrap | |||
| th:xmlbase | th:xmllang | th:xmlspace |
之前讲到了用 th:attr 给多个属性赋值
<img src="../../images/gtvglogo.png"
th:attr="src=@{/images/gtvglogo.png},title=#{logo},alt=#{logo}" />
我们再来看看怎么用表格中的语法完成赋值
<img src="../../images/gtvglogo.png"
th:src="@{/images/gtvglogo.png}" th:title="#{logo}" th:alt="#{logo}" />
接下来用更简洁的方法 (th:alt-title)
<img src="../../images/gtvglogo.png"
th:src="@{/images/gtvglogo.png}" th:alt-title="#{logo}" />
th:alt-title 是一个相当特殊的语法，和它一样特殊的还有 th:lang-xmllang ，它们可以同时给两个属性赋值：
th:alt-title 同时给 alt 和 title 赋值；
th:lang-xmllang 同时给 lang 和 xml:lang 赋值。
到现在为止，学到的动态赋值的方法都是直接将原值覆盖掉，不过 Thylemeaf 官方还提供了附加值的方法：
th:attrappend（在现有值后面附加） 和 th:attrprepend（在现有值前附加） 属性。
如果一个网页的渲染需要用户提前选择样式，那代码就可以这么写：
<input type="button" value="Do it!" class="btn"
th:attrappend="class=${' ' + cssStyle}" />
当用户选择了 cssStyle=warning 的样式，这份代码就相当于：
<input type="button" value="Do it!" class="btn warning" />
附加值的方法同样提供了针对某一个 HTML5 属性的属性：
th:classappend 和 th:styleappend 属性。 给 class 属性值后附加值就可以这样写：
<tr th:each="prod : ${prods}" class="row"
th:classappend="${prodStat.odd}? 'odd'">
固定值布尔属性
倘若用户在订阅网站的更新消息时需要勾选是否有 英文名、中文名，普通的做法是创建三个复选框或单选框：
<p>
<input type="checkbox" name="isenname" />是否有英文名
</p>
<p>
<input type="checkbox" name="iscnname" />是否有中文名
</p>
<p>
<input type="checkbox" name="isname" />是否佚名
</p>
然后由用户自行选择。
但是用户在网站注册账号时就已经提供了相关信息，名字都已记录在数据库中，我们是否可以先去数据库中查询相关信息，再预先帮用户选择呢？完全可以。
<p>
<input type="checkbox" name="isenname" th:checked="${user.enname}" />是否有英文名
</p>
<p>
<input type="checkbox" name="iscnname" th:checked="${user.cnname}" />是否有中文名
</p>
<p>
<input type="checkbox" name="isname" th:checked="${user.nname}" />是否佚名
</p>
如果没有名字，user.nname 值为 true ，th:check 属性的值为 true 或不为 null 或 是非零数字 时，浏览器都会预先勾选上选择框（即设置成固定值）；否则，值为 false 或为 null 或为 0 或为 off 或为 no 时 ，不会勾选。 （除了 0 和 null ，其它都可被单引号围住）
固定值布尔属性还有：
| th:async | th:autofocus | th:autoplay | |
|---|---|---|---|
| th:checked | th:controls | ||
| th:declare | th:default | th:defer | th:disabled |
| th:formnovalidate | |||
| th:hidden | |||
| th:ismap | |||
| th:loop | |||
| th:multiple | |||
| th:novalidate | th:nowrap | ||
| th:open | |||
| th:pubdate | |||
| th:readonly | th:required | th:reversed | |
| th:scoped | th:seamless | th:selected |
可以承包任何属性值的 th:whatever
th:whatever 可以被设置成任何属性值，即使没有通过 th:* 指定具体的属性。
最后：要完成属性赋值或修改值的操作，同样可以用 HTML5 的语法：data-th-* ，或者用 W3C 规范的 th-* ，这些语法在将来都不会被 th:* 取代。
— 【参考资料 —— Thymeleaf文档20181029 - 29 October 2018】
已同步更新至个人博客：田超杰的个人网站-一个传播计算机知识和人生哲理的博客
