質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
ラジオボタン

ラジオボタンはフォームに使われる要素のひとつであり、ユーザに限られた選択肢からひとつの答えを選んでもらうというものです。

Thymeleaf

Thymeleaf(タイムリーフ)とは、Java用のテンプレートエンジンで、特定のフレームワークに依存せず使用することが可能です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

2194閲覧

thymeleafの簡単な入力フォーム

k-kenta

総合スコア2

ラジオボタン

ラジオボタンはフォームに使われる要素のひとつであり、ユーザに限られた選択肢からひとつの答えを選んでもらうというものです。

Thymeleaf

Thymeleaf(タイムリーフ)とは、Java用のテンプレートエンジンで、特定のフレームワークに依存せず使用することが可能です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/07/27 09:03

編集2020/07/28 09:22

前提・実現したいこと

Thymeleaf初心者です。
名前・性別・生年月日・電話番号を入力する入力フォームを作りたいと思っています。
(名前・電話番号はテキストボックス、性別はラジオボタン、生年月日はプルダウン)

【実現したいこと】
・入力画面においてプルダウンで生年月日を入力できるようになる
・確認画面において入力した生年月日を表示できるようにする
・ただし、1月~12月をhtmlで直書きするのではなく、javaでリストに設定してthymeleafのth:each属性で表示するようにする

【ソースコード】
<入力画面>

<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>登録フォーム</title> </head> <body> <h1>お客様情報の入力</h1> <form method="POST" action="output.html" th:action="@{output}"> <p>お名前</p><input type="text" name="name"> <br> <p>性別</p> <input type="radio" name="sex" value="male">男 <input type="radio" name="sex" value="female">女 <br> <p>生年月日</p> <select name="year"><option></option></select>年 <select name="month"><option></option></select>月 <select name="day"><option></option></select>日 <p>電話番号</p><input type="text" name="tel"> <br> <input type="submit" name="登録"> </form> </body> </html>

<確認画面>

<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>確認画面</title> </head> <body> <h1>ご入力の確認</h1> <p>お名前:<span th:text="${name}"> 100</span></p> <p>性別:<div th:switch="${sex}"> <p th:case ="1">男</p> <p th:case ="2">女</p> </div> <p>生年月日:</p> <p>電話番号:<span th:text="${tel}"> テスト</span></p> <a href="index.html" th:href="@{input}"> 顧客の入力に戻る</a> </body> </html>

【コントローラー】
package com.example.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

@Controller
public class ClientController {

@RequestMapping("/input")
public String index() {
return "index.html";
}

@RequestMapping("/output")
public String result(@RequestParam("name")String name,
@RequestParam("tel") String tel,
@RequestParam("sex") String sex,Model model) {
model.addAttribute("name", name);
model.addAttribute("tel", tel);
if("male".equals(sex)){
model.addAttribute("sex", 1);
}else if("female".equals(sex)){
model.addAttribute("sex", 2);
}
return "output.html";
}
}

【DemoApplication.java】
package com.example.demo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class DemoApplication {

public static void main(String[] args) {
SpringApplication.run(DemoApplication.class, args);
}

}

未熟な故、回答の表現があいまいになり、ご理解いただけない部分があるかもしれませんが
できるだけお伝えさせていただきます。よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

A-pZ

2020/07/27 09:58

実装されているThymeleafテンプレート(HTML)のラジオボタンの部分と、それを受け取るControllerの実装があると回答が得られるかもしれません。
退会済みユーザー

退会済みユーザー

2020/07/27 16:21 編集

上記コメントにもございますが、現行で作成しているソースの掲載をした方がいいです。 あと確認画面に表示したいとのことですが、表示の方法についても色々あると思います。 ・ラジオで選択された要素のラベルを確認画面で表示したい ・ラジオ要素全てを確認画面で表示した上で、選択された要素が何かわかるように表示したい 等 質問の表現が曖昧なので、わかりません。 せめて入力画面と確認画面のhtmlソースの掲載をした方が良いかと思われます。 もしくは、addObjectやaddAttributeの理屈がわからないのでしょうか?
k-kenta

2020/07/28 08:47

ご返信ありがとうございます。 すいませんラジオボタンは解決いたしました。 しかし、生年月日はわからないので質問させていただければと思います。 【実現したいこと】 ・入力画面においてプルダウンで生年月日を入力できるようになる ・確認画面において入力した生年月日を表示できるようにする ・ただし、1月~12月をhtmlで直書きするのではなく、javaでリストに設定してthymeleafのth:each属性で表示するようにする 【ソースコード】 <入力画面> <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>登録フォーム</title> </head> <body> <h1>お客様情報の入力</h1> <form method="POST" action="output.html" th:action="@{output}"> <p>お名前</p><input type="text" name="name"> <br> <p>性別</p> <input type="radio" name="sex" value="male">男 <input type="radio" name="sex" value="female">女 <br> <p>生年月日</p> <select name="year"><option></option></select>年 <select name="month"><option></option></select>月 <select name="day"><option></option></select>日 <p>電話番号</p><input type="text" name="tel"> <br> <input type="submit" name="登録"> </form> </body> </html> <確認画面> <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>確認画面</title> </head> <body> <h1>ご入力の確認</h1> <p>お名前:<span th:text="${name}"> 100</span></p> <p>性別:<div th:switch="${sex}"> <p th:case ="1">男</p> <p th:case ="2">女</p> </div> <p>生年月日:</p> <p>電話番号:<span th:text="${tel}"> テスト</span></p> <a href="index.html" th:href="@{input}"> 顧客の入力に戻る</a> </body> </html> 【コントローラー】 package com.example.demo.controller; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; @Controller public class ClientController { @RequestMapping("/input") public String index() { return "index.html"; } @RequestMapping("/output") public String result(@RequestParam("name")String name, @RequestParam("tel") String tel, @RequestParam("sex") String sex,Model model) { model.addAttribute("name", name); model.addAttribute("tel", tel); if("male".equals(sex)){ model.addAttribute("sex", 1); }else if("female".equals(sex)){ model.addAttribute("sex", 2); } return "output.html"; } } 【DemoApplication.java】 package com.example.demo; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; @SpringBootApplication public class DemoApplication { public static void main(String[] args) { SpringApplication.run(DemoApplication.class, args); } } 未熟な故、回答の表現があいまいになり、ご理解いただけない部分があるかもしれませんが できるだけお伝えさせていただきます。よろしくお願いいたします。
退会済みユーザー

退会済みユーザー

2020/07/28 08:53

なるほど。 確認しましたところ、ラジオはth:caseで判定しているのですね。 男・女どちらしか表示しないのであれば、${tel}と同じようにmodel.addAttributeで"男"という値をセットすればよいかと思います。 質問欄が修正可能ですので、できれば質問の修正やソースの追記は質問を修正する形でお願い致します。
退会済みユーザー

退会済みユーザー

2020/07/28 08:54

あと、th:eachの存在までご存じでしたら、もうちょっとで完成すると思われるのですが、 th:eachの書き方がわからないということでしょうか?
k-kenta

2020/07/28 09:27

ご回答ありがとうございます。 質問修正させていただきました。 ラジオボタンについてもありがとうございます。 おっしゃる通りでth:eachの書き方がわかりません。 名前や電話番号であれば 「入力画面でテキストボックス表示→入力する→その値をコントローラで確認画面へ→確認画面に表示」 という順序だと認識しているのですが プルダウンの場合 「入力画面にプルダウンを表示(プルダウンに選択肢が入っている)」 「その値をコントローラで確認画面へ」 という二つの手順のやり方がわからないという状態です。 ご質問への回答がずれていたら申し訳ございません。 よろしくお願いいたします。
退会済みユーザー

退会済みユーザー

2020/07/28 09:34

別の方が回答してくださったので、書き方はそちらを参考にしてください。 プルダウンでも基本的にはテキストボックスと同様で、選択された値がコントローラーに渡されます。 確認画面は別にプルダウンにしなくてもいいので、 ${tel}と同じようにmodel.addAttributeでJava側から値のセットを行えばよいかと思います。
k-kenta

2020/07/29 04:31

ありがとうございます。 今現状、プルダウンのListでの作り方がわからなくなっています。 確認画面への表示の仕方はおっしゃっていただいたように参考にさせて頂ければと思います。
退会済みユーザー

退会済みユーザー

2020/07/29 04:39

th:eachの属性にはcollectionを設定します。 その際javaでArrayListを生成してそのインスタンスをaddAttributeで設定してあげればいいです。 回答者様のリンク先で例えるなら、 th:each="job : ${jobList}" th:value="${job.id}" [[${job.name}]] と書かれているので、idとnameのフィールドを持つBeanを定義して、そのListを生成すればいいです。 Listの作成方法は分かりますか?
k-kenta

2020/07/29 05:28

ご丁寧にありがとうございます。 回答者様が送信されたURLをもとに、まずプルダウンの中に選択肢を表示させるように Listを作成してみたのですが、エラーが発生します。 <入力画面>(エラーなし) <p>生年月日</p> <select name="year"><option th:each="year : ${yearList}" th:text="${year.number}"> </option></select>年 <select name="month"><option th:each="month : ${monthList}" th:text="${month.number}"></option></select>月 <select name="day"><option th:each="day : ${dayList}" th:text="${day.number}"></option></select>日 <DemoApplication.java>(エラーあり) List<Year> yearList = new ArrayList<Year>(); for(int i = 1; i <= 12; i++){ yearList.add(i); } エラー内容:型 List<Year> のメソッド add(int, Year) は引数 (int) に適用できません そしてBeanについてURLも送っていただき、本当にありがとうございます。 現状Beanが何に使うかもあまりわかっていない状態で 検索してみたのですが「DIをする」などと出て 「入力フォームを作るのにどう役に立つかわからない」となっている状態です。 理解が悪くて申し訳ございません。 よろしくお願いいたします。
k-kenta

2020/07/30 04:50

また、回答1件頂いたソースコードを入力してました。 エラーは出ませんでしたが、プルダウンに何も表示されない状態でした。 自分の環境の問題等もあるのでしょうか? Controllerに入力すればよいのかjavaに入力すればよいのかなど 小さいこともわかっていなくて申し訳ありません。
退会済みユーザー

退会済みユーザー

2020/07/30 05:04

List<Integer>のやり方でやると、エラーにならずにドロップダウンに何も表示されなかったという事ですか? 他の方の回答がなかった場合は、今夜私が環境作って動作確認したソース掲載します。
k-kenta

2020/07/30 05:08

おっしゃる通りで、List<Integer>のやり方でやると、エラーにならずにドロップダウンに何も表示されませんでした
k-kenta

2020/07/30 05:16

<Controller> package com.example.demo.controller; import java.time.Month; import java.util.ArrayList; import java.util.List; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; @Controller @RequestMapping("/input") public class ClientController { public String index() { return "index.html"; List<Month> monthList = new ArrayList<Month>(); for(int i = 1; i <= 12; i++){ //ここでListに追加するインスタンスを生成 Month month = new Month(); // そのインスタンスのnumberに値をセット month.setNumber(i); // そのインスタンスをリストに追加 monthList.add(month); } } @RequestMapping("/output") public String result(@RequestParam("name")String name, @RequestParam("year")String year, @RequestParam("tel") String tel, @RequestParam("sex") String sex, @RequestParam("mail") String mail, @RequestParam("comment") String comment,Model model) { model.addAttribute("name", name); model.addAttribute("year", year); model.addAttribute("tel", tel); if("male".equals(sex)){ model.addAttribute("sex", 1); }else if("female".equals(sex)){ model.addAttribute("sex", 2); } model.addAttribute("mail",mail); model.addAttribute("comment",comment); return "output.html"; } } エラー:型 Month のインスタンスを生成できません     メソッド setNumber(int) は型 Month で未定義です となっております。
退会済みユーザー

退会済みユーザー

2020/07/30 05:24

Monthクラスをjava.time.Monthでimportしてますが、自作したクラスではないですよね? public class Month{ private int number; // getter, setter } みたいな感じで作らないと、エラーになりますよ。 java.time.MonthクラスにはsetNumber(int)というメソッドは存在しないので
退会済みユーザー

退会済みユーザー

2020/07/30 05:27

ちなみに、Integerのやり方ででないとのことですが、多分質問者様のソースがおかしい箇所があります。
退会済みユーザー

退会済みユーザー

2020/07/30 05:37

とりあえず、クラスとメソッドという基本を理解した方が今後のためだと思います。 import文は、そのクラスをインポートしますよという意味なので、自作のMonthクラスを作ったら、importの所をそのクラスに変えるのをお忘れなく。
退会済みユーザー

退会済みユーザー

2020/07/30 05:42

よくよく見たらいろいろおかしいですね。 例えばindex()メソッド内では、 ・for文よりも前にreturn してあるため、そもそもfor文が動かない ・monthListをaddAttributeしていない
guest

回答1

0

ベストアンサー

Thymeleafでセレクトボックスを使う が参考になるでしょうか。

例えば、月を入力させたいのであれば、

Controllerの実装:

java

1import java.util.Arrays; 2import java.util.List; 3 4import org.springframework.stereotype.Controller; 5import org.springframework.web.bind.annotation.GetMapping; 6import org.springframework.web.bind.annotation.RequestMapping; 7import org.springframework.web.servlet.ModelAndView; 8 9@Controller 10@RequestMapping("wheel") 11public class SampleController { 12 @GetMapping("") 13 public ModelAndView display(ModelAndView mnv) { 14 15 List<Integer> months = Arrays.asList(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12); 16 mnv.addObject("targetMonth", 7); 17 mnv.addObject("months", months); 18 mnv.setViewName("wheel"); 19 return mnv; 20 } 21 22}

ここから表示する wheel.html にて、Controllerで定義した years の内容を繰り返し表示する方法は、
※ targetMonth は 初期表示させる月の値

html

1<!DOCTYPE html> 2<html xmlns:th="http://www.thymeleaf.org"> 3<head> 4<meta charset="UTF-8"> 5<title>Insert title here</title> 6</head> 7<body> 8<select name="month"> 9 <option th:each="month : ${months}" 10 th:value="${month}" 11 th:selected="${month == targetMonth}" 12 th:text="${month}"></option> 13</select> 14</body> 15</html>

投稿2020/07/28 09:27

編集2020/07/29 10:26
A-pZ

総合スコア12011

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

k-kenta

2020/07/29 04:29

申し訳ございません。知識がなく、それだけでは理解できていない現状です。 とりあえず真似してみたのですがエラーが発生します。 <入力画面>(エラーなし) <p>生年月日</p> <select name="year"><option th:each="year : ${yearList}" th:text="${year.number}"> </option></select>年 <select name="month"><option th:each="month : ${monthList}" th:text="${month.number}"></option></select>月 <select name="day"><option th:each="day : ${dayList}" th:text="${day.number}"></option></select>日 <DemoApplication.java>(エラーあり) List<Year> yearList = new ArrayList<Year>(); for(int i = 1; i <= 12; i++){ yearList.add(i); } エラー内容:型 List<Year> のメソッド add(int, Year) は引数 (int) に適用できません 無知で本当に申し訳ないのですが、エラーの解決法を調べても出てこないので 教えて頂ければ幸いです。 また、このような進め方で会っているのでしょうか? よろしくお願いいたします。
退会済みユーザー

退会済みユーザー

2020/07/29 04:55

java.time.Year クラスは int からアウトボクシングできないから
退会済みユーザー

退会済みユーザー

2020/07/29 05:54 編集

基本的なListの使い方を学んでください。 Listというのは、ざっくり説明すると可変長の配列です。 Stringの配列の場合ですと、[String, String, String...]という風に値が入っていくと思うのですが、 Listも同様です。 今回の場合ですと、 <option th:each="year : ${yearList}" th:text="${year.number}"> </option> と書かれているので、 numberというプロパティを持ったYearクラスを作成してください。 その後、ループ内では // Yearクラスの配列のようなもの List<Year> yearList = new ArrayList<Year>(); for(int i = 1; i <= 12; i++){   // ここでListに追加するインスタンスを生成   Year year = new Year();   // そのインスタンスのnumberに値をセット   year.setNumber(i);   // そのインスタンスをリストに追加   yearList.add(year); } と記述すればいいです。([注]上記ソースはインデントのため、全角スペース入れてます。) 配列で例えると、[Year, Year, Year...]みたいになっている状態です。 中のYearはそれぞれnumberのプロパティを持っているような感じです。
k-kenta

2020/07/29 06:52

現状を理解しました。 わかりやすく教えて頂きありがとうございます。 ただ「numberというプロパティを持ったYearクラスを作成してください。」という意味が 理解できないです。 わかりやすく教えて頂いているのに申し訳ございません。 Listの使い方は検索して少し理解することができました。
退会済みユーザー

退会済みユーザー

2020/07/29 10:47

numberというプロパティを持ったYearクラスを作成してください。 説明がざっくりしていてすみません。 環境がないものでソースの掲載ができませんが、説明すると Yearクラスを定義して、その中で変数としてintのnumberを定義します。(numberというプロパティを持ったYearクラスを作成) そしてメソッドとしては、基本的なgetter, setterを実装します。(lombok使うと便利です。) これでnumberというプロパティを持ったYearクラスを作成完了です。 今回numberの1つしか持っていないため回答者様のList<Integer>で実装可能ですが、例えばプルダウンの表示値とvalue値を2つの持たせたい時は、別の変数(フィールド)を追加すれば対応できます。
退会済みユーザー

退会済みユーザー

2020/07/29 14:32 編集

実際にソース書いてなくて恐縮ですが、例としてidとnameのフィールドを持つSampleBeanを作成すると public class SampleBean { private String id; private String name; // getter, setter } みたいな感じです。(エラー出たらすみません。)
k-kenta

2020/07/30 04:45

ご回答いただきありがとうございます。 lombokをインストールしました。 送っていただいた通り実行してみたのですが エラーが出てしまいます。 おそらく自分がBeanの必要性、使い方を理解できていないからだと思います。 教えて頂いたのに申し訳ござません。 送っていただいた // Yearクラスの配列のようなもの List<Year> yearList = new ArrayList<Year>(); for(int i = 1; i <= 12; i++){   // ここでListに追加するインスタンスを生成   Year year = new Year();   // そのインスタンスのnumberに値をセット   year.setNumber(i);   // そのインスタンスをリストに追加   yearList.add(year); } については「yearListに1~12を格納した」と認識しております。 もし、この認識が合っていれば、input画面でyearListをそのまま使うことができないのでしょうか? 「.javaで設定したiの値を、そのままinput.htmlで使用できればよいのではないのか?」というものが ずっと頭の中にあるので、getter,setter,Beanなどの使い方がわからないのだと感じます。 何度も何度も検索したのですが、自分の理解力がないのか、ヒントになるものはなく、 これだけ皆さんに丁寧に教えて頂いているのに理解できない自分が嫌になります。 本当にお手数おかけして申し訳ございませんが よろしくお願いいたします。
退会済みユーザー

退会済みユーザー

2020/07/30 04:59 編集

エラーはなんと出ているのでしょうか? 質問のソースを質問者様が現在作成しているソースコードに修正してください。 その際、ソースを```で囲う(コードの挿入)をしてください。 あと、自分がjavaといっているのはControllerのことですよ。
k-kenta

2020/07/30 06:58

いろいろとお手伝いいただきまして本当にありがとうございました。 回答者様のソースコードを少し変えて 希望通りに表示・出力することができました。 ただし、言ってくださったとおり、知識が乏しすぎるので もっと勉強していろんな方法でできるようになります。 本当にありがとうございました。
退会済みユーザー

退会済みユーザー

2020/07/30 07:38

解決して良かったです。 ちなみに、Integerの方法で解決したのでしょうか?
k-kenta

2020/07/30 08:02

そうです。Integerの方法で解決いたしました。
退会済みユーザー

退会済みユーザー

2020/07/30 09:52

そうですか。 現状問題ないようですが、また時間があればgetter, setterのみのBeanの使い方も覚えておくと良いですよ! 解決お疲れ様です。
k-kenta

2020/07/31 07:10

本当にありがとうございました。。。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問