【Spring Boot×Thymeleaf】th:属性の仕組みと注意点をやさしく解説！

こんにちは。ゆうせいです。

HTMLテンプレートエンジン「Thymeleaf（タイムリーフ）」を使っていると、th:actionやth:href、th:valueといった「th:○○」という属性をよく見かけますよね。でも、正直「どう違うの？」「いつ、どう使えばいいの？」と思ったこと、ありませんか？

今回は、そんな疑問にお答えしながら、以下の点を丁寧に解説していきます！

th:actionとth:hrefの違いとは？

HTMLのactionとhrefの基本をおさらい

まずは基本のHTML属性から確認してみましょう。

つまり、どちらも「URLを指定する」という点は共通していますが、

• action → <form>タグ用（データを送信）
• href → <a>タグ用（ページに移動）

という違いがあります。

それをThymeleafで使うとどうなる？

Thymeleafでは、HTMLの属性を動的に扱えるようにするため、th:で始まる属性を使います。

• th:action → formの送信先を動的に指定
• th:href → aタグのリンク先を動的に指定

例：

<form th:action="@{/submit}" method="post">

<a th:href="@{/page}">ページへ</a>

@{}という構文は、Spring Bootのルーティングに対応して、URLを生成する仕組みです。@{/xxx}と書くと/xxxというURLが自動で入ります。

th:valueなど他のHTML属性にも「th:」は使えるの？

はい、基本的にHTML属性の多くに対してth:を付けて動的に指定することが可能です！

このように、よく使うHTML属性はだいたいth:をつければOKです。

th:valueを<button>タグに使ったのに動かなかった理由とは？

ここがよくある落とし穴です！

実は…<button>にはvalue属性は効きません（基本的に）

HTMLの<button>タグは、表示するテキストをタグの中に直接書くのが基本です。

<button type="submit">送信</button>

なので、以下のように書いても表示されません：

<button th:value="'送信'"></button>  ← 表示されない

正しい書き方はこれ！

<button type="submit" th:text="'送信'"></button>

つまり、ボタンのラベル（中身の文字）を変えたいときは、th:valueではなくth:textを使いましょう。

よくあるth属性の使い方まとめ

今後の学習の指針

今後は次の点を意識してThymeleafを使ってみましょう！

• 各HTMLタグにどんな属性が使えるかを把握する
• th:valueとth:textの使い分けを意識する
• @{}構文で動的にURLを作るクセをつける

さらに学びたい方は、「Thymeleafの公式ドキュメント」や「Spring BootのForm処理」などもチェックしてみると理解が深まりますよ！

分からないことがあれば、またどんどん質問してくださいね。

セイ・コンサルティング・グループの新人エンジニア研修のメニューへのリンク

投稿者プロフィール

山崎講師代表取締役

セイ・コンサルティング・グループ株式会社代表取締役。
岐阜県出身。
2000年創業、2004年会社設立。
IT企業向け人材育成研修歴業界歴20年以上。
すべての無駄を省いた費用対効果の高い「筋肉質」な研修を提供します！
この記事に間違い等ありましたらぜひお知らせください。

最新の投稿

• 山崎講師2025年11月15日あなたの「得意」は遺伝？それとも環境？新人エンジニアに贈る行動遺伝学の世界
• 山崎講師2025年11月15日「指示待ち」は卒業！4年目エンジニアが学ぶ「PMの視点」でチームの主役になる方法
• 山崎講師2025年11月15日データ分析の落とし穴？「平均への回帰」と「中心極限定理」の秘密
• 山崎講師2025年11月15日あなたのコードは「自由」を実装しているか？ 橘玲『テクノ・リバタリアニズム』入門