Spring Boot

Springフォーム初期化完全ガイド

 

 

📹 Spring超入門 #09

form初期化(value属性・th:field属性・type属性=hidden)【初心者向け】

🌸 Springフォーム初期化完全ガイド

この記事で学べること：
フォームでリクエストパラメーターを送る際に、入力前にその値を初期化しておく方法を習得できます。実際のWebアプリケーション開発で必須となる技術です。

📋 今回のメニュー

  1. フォームコントロール初期化
  2. th:field属性
  3. type属性=hidden
  4. サンプルプログラム構成
  5. サンプルプログラム作成

1️⃣ フォームコントロール初期化

基本概念

一般的なHTMLコントロールでは、value属性に値を設定してフォームを初期化します。

<input type=”text” name=”restaurantId” value=”1″ />
結果：
• リクエストパラメーター名：restaurantId
• テキストボックスの初期値：1
• 入力前に「1」が設定されていて編集可能
ポイント： まずはvalue属性で初期値が設定されることを押さえておきましょう。

2️⃣ th:field属性

Thymeleaf用の属性

Thymeleaf用の属性の1つで、フォームクラスのフィールドを指定すると自動的に展開されます。

展開される属性：

  • id属性：フィールド名
  • name属性：フィールド名
  • value属性：フィールド値

使用例

モデル内にreviewRegistFormというオブジェクトが格納されていて、その中のフィールドrestaurantIdが1だった場合：

<form th:object=”${reviewRegistForm}”>
<input type=”text” th:field=”*{restaurantId}” />
</form>
👆 Thymeleafが以下のように展開：
<input type=”text” id=”restaurantId” name=”restaurantId” value=”1″ />
重要： th:fieldを設定することにより、フィールド名（リクエストパラメーター名）と初期値が同時に設定されることを押さえておきましょう。

3️⃣ type属性=hidden

画面に表示せずパラメーターを送信

フォーム内のinputタグでtype="hidden"を指定すると、画面には表示せずにパラメーターが送れます。

<input type=”hidden” th:field=”*{restaurantId}” />
展開結果：
<input type=”hidden” id=”restaurantId” name=”restaurantId” value=”1″ />
活用場面： 画面には表示せずにリクエストパラメーターをサーバーに送ることができるので、便利に使える場面があります。

4️⃣ サンプルプログラム構成

飲食店5段階評価フォーム

今回は飲食店を5段階評価するフォームを作成して、サーバーにデータを送ります。

送信データ（5項目）：

  • レストランID
  • ユーザーID
  • 来店日（visitDate）
  • 評価（rating）
  • コメント

画面遷移フロー

1
入力画面 → 5項目のデータを入力
2
確認画面 → 入力内容を表示・確認
3
完了画面 または 入力画面に戻る
重要なポイント： 確認画面から「戻る」ボタンで入力画面に戻る際、入力中の値が入力画面の各項目の初期値として設定されます。

URLパターン

機能 URLパターン 説明
入力画面表示 /show/review/form 初期表示用
入力画面に戻る /show/review/form/ret 確認画面からの戻り
評価送信 /regist/review レビュー評価送信用
評価確認 /confirm/regist/review レビュー評価確認用

5️⃣ 動作イメージ

初期表示時の流れ

1. クライアントからGETリクエスト（/show/review/form）
2. ReviewControllerのshowReviewFormメソッド呼び出し
3. 引数にフォームクラスReviewRegistFormを指定することで、モデルに規定の初期値でオブジェクトが格納
4. HTMLテンプレート（regist/review.html）でレスポンス返却

確認画面から戻る時の流れ

1. 確認画面で「戻る」ボタンクリック
2. 入力中の5項目の値がtype="hidden"の形でリクエストパラメーターとして送信
3. showReviewFormRetメソッドで受け取り
4. モデルに入力中のデータを初期値として格納し、入力画面を表示

6️⃣ プログラム構成

必要なファイル構成

  1. SpringBootプロジェクト： SpringStart09
  2. フォームクラス： ReviewRegistForm.java
  3. コントローラー： ReviewController.java（4つのハンドラーメソッド）
  4. HTMLテンプレート： 3つのHTMLファイル
  5. CSSファイル： style.css

ハンドラーメソッド一覧

メソッド名 用途 リクエスト種別
showReviewForm 入力画面の初期表示 GET
showReviewFormRet 入力画面へ戻る POST
registReview 入力データ受信 POST
confirmRegistReview 確認画面から登録実行 POST

7️⃣ 重要なポイントまとめ

フォーム初期化の3つの方法

  1. value属性： 一般的なHTMLコントロールで値を設定
  2. th:field属性： Thymeleafでフォームクラスのフィールドを指定し、id/name/value属性に自動展開
  3. type=”hidden”： 画面に表示せずにパラメーターを送信
実践的な活用：
• 入力画面 ⇄ 確認画面の往復で入力値を保持
• フォームクラスを活用した効率的なデータバインディング
• ユーザビリティの向上（入力内容の保持）
次のステップ：
この技術をマスターすることで、本格的なWebアプリケーション開発に近づくことができます。フォームの初期化は実際の開発現場でも頻繁に使われる重要な技術です。

🎯 まとめ

今回学習したフォーム初期化の技術により、ユーザーフレンドリーなWebアプリケーションを構築できるようになりました。特にth:field属性を活用することで、SpringとThymeleafの連携によるスマートなフォーム処理が実現できます。！

参考動画

 

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

CAPTCHA


最近のコメント