这次我们学习给属性赋值或修改值。

给任何属性赋值 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:* 取代。