目次5属性値の設定
この章では、マークアップで属性値を設定（または変更）する方法について説明します。
5.1属性の値の設定
私たちのサイトがニュースレターを発行しており、ユーザーが購読できるようにしたいので、次の形式でテンプレート/WEB-INF/templates/subscribe.htmlを作成します。
<form action="subscribe.html"> <fieldset> <input type="text" name="email" /> <input type="submit" value="Subscribe!" /> </fieldset> </form>
Thymeleafと同様に、このテンプレートは、Webアプリケーションのテンプレートというよりも静的なプロトタイプとして始まります。 まず、フォームのアクション属性はテンプレートファイル自体に静的にリンクされているため、便利なURL書き換えの余地はありません。 第二に、送信ボタンのvalue属性を使用すると、英語のテキストを表示できますが、国際化を希望します。
次に、インストールされているタグ属性の値を変更できる
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は、実行する式を受け入れ、値を属性に割り当てます。 適切なコントローラーおよびメッセージファイルを作成すると、ファイル処理の結果は次のようになります。
<form action="/gtvg/subscribe"> <fieldset> <input type="text" name="email" /> <input type="submit" value="¡Suscríbe!"/> </fieldset> </form>
前の章で説明したように、新しい属性値に加えて、アプリケーションコンテキスト名が/ gtvg / subscribeのURLベースに自動的に追加されたことも確認できます。
しかし
、一度に複数の属性を設定したい場合はどうでしょうか？ XMLルールでは、タグに属性を2回設定することは許可されていないため、
th：attrは、コンマ区切りの割り当てリストを受け取ります。次に例を示します。
<img src="../../images/gtvglogo.png" th:attr="src=@{/images/gtvglogo.png},title=#{logo},alt=#{logo}" />
必要なメッセージファイルが与えられると、これは出力します。
<img src="/gtgv/images/gtvglogo.png" title="Logo de Good Thymes" alt="Logo de Good Thymes" />
5.2特定の属性の値の設定
今では、次のように考えるかもしれません：
<input type="submit" value="Subscribe!" th:attr="value=#{subscribe.submit}"/>
...かなりupいマークアップです。 属性値内で宛先を指定することは非常に実用的ですが、常にこれを行う必要がある場合、テンプレートを作成する最もエレガントな方法ではありません。
Thymeleafはあなたに同意します。そのため、
th：attrはテンプレートでほとんど使用されません。 通常、他の
th：*属性を使用します。そのタスクは、タグの特定の属性を構成することです（th：attrなどの属性だけではありません）。
たとえば、値属性を設定するには、値
th：valueを使用し
ます 。
<input type="submit" value="Subscribe!" th:value="#{subscribe.submit}"/>
それはずっと良く見えます！ formタグの
action属性で同じことを試してみましょう：
<form action="subscribe.html" th:action="@{/subscribe}">
そして、前にhome.htmlに入れたこれらの
th：hrefを覚えていますか？ これらはまったく同じ属性です。
<li><a href="product/list.html" th:href="@{/product/list}">Product List</a></li>
そのような属性は数多くあり、それぞれが特定のHTML5属性を対象としています。
th:abbr | th:accept | th:accept-charset |
th:accesskey | th:action | th:align |
th:alt | th:archive | 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: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 |
5.3一度に複数の値を設定する
th：alt-titleと
th：lang-xmllangという2つのかなり特殊な属性があり、これらを使用して2つの属性を同時に設定できます。 特に：
th：alt-titleは
altおよび
titleに設定されます。
th：lang-xmllangは
langと
xml：langをインストールします
GTVGホームページの場合、これによりこれを置き換えることができます。
<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}" />
...これに：
<img src="../../images/gtvglogo.png" th:src="@{/images/gtvglogo.png}" th:alt-title="#{logo}" />
5.4前後に追加
Thymeleafは
th：attrappendおよび
th：attrprepend属性も提供します
。これらの属性は 、既存の属性値に結果を追加（サフィックス）または追加（プレフィックス）します。
たとえば、ボタンの1つに追加するCSSクラスの名前をコンテキスト変数に保持したい場合があります。使用する特定のCSSクラスは、ユーザーが以前に行ったことに依存するためです。
<input type="button" value="Do it!" class="btn" th:attrappend="class=${' ' + cssStyle}" />
cssStyle変数を「警告」に設定してこのテンプレートを処理すると、次の結果が得られます。
<input type="button" value="Do it!" class="btn warning" />
標準の方言には、2つの特別な追加属性があります：
th：classappendおよび
th：styleappend属性は、既存のものを上書きせずにCSSクラスまたはスタイルフラグメントを要素に追加するために使用されます。
<tr th:each="prod : ${prods}" class="row" th:classappend="${prodStat.odd}? 'odd'">
（
th：eachの値については心配しないでください。これは反復の属性です。これについては後で説明します）。
5.5固定値を持つブール属性
HTMLには、値がtrueの場合にのみアクティブ化される論理属性の概念があります。 XHTMLでは、これらの属性は値を1つだけ取ります。
たとえば、次を確認します。
<input type="checkbox" name="option2" checked /> <input type="checkbox" name="option1" checked="checked" />
標準的な方言には、条件によってこれらの属性を設定できる属性が含まれています。そのため、値が「true」の場合、属性は固定値に設定され、「false」の場合、属性は設定されません。
<input type="checkbox" name="active" th:checked="${user.active}" />
標準の方言には、次の固定値を持つ論理属性があります。
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 |
5.6属性の値の設定（デフォルトの属性プロセッサ）
Thymeleafは、
th：*が定義されていない場合でも、属性の値を設定できるデフォルトの属性プロセッサを提供します
;標準的な方言の特定のプロセッサ。
このようなもの：
<span th:whatever="${user.name}">...</span>
結果は次のようになります。
<span whatever="John Apricot">...</span>
5.7属性、HTML5フレンドリ、および要素名のサポート
完全に異なる構文を使用して、HTML5のより便利な方法でプロセッサをテンプレートに適用することもできます。
<table> <tr data-th-each="user : ${users}"> <td data-th-text="${user.login}">...</td> <td data-th-text="${user.name}">...</td> </tr> </table>
data- {prefix}-{name}構文は、開発者がth：*などの名前空間を使用する必要なく、HTML5でカスタム属性を記述する標準的な方法です。 Thymeleafは、この構文を（標準だけでなく）すべての方言で自動的に使用可能にします。
カスタムタグを指定する構文もあります：
{prefix}-{name} 。これは、W3Cカスタム要素仕様（大きなW3C Webコンポーネント仕様の一部）に準拠しています。 これは、たとえば、次のセクションで説明する
th：block （または
th-block ）要素に使用できます。
重要 ：この構文は名前空間付きth：*に追加され、置き換えられません。 将来、名前空間構文を放棄するつもりはまったくありません。