Spring MVC 4.1 No. 043 form:labelタグ
form:labelタグは、HTMLの<label>タグを生成します。
その要素の内、単純にHTMLの属性に置き換えられるものは、以下の属性です。cssClassやcssStyleはそれぞれclass、style属性に置き換えられます。
属性 | 説明 |
---|---|
cssClass | HTML標準のclass属性 |
cssStyle | HTML標準のsytle属性 |
dir | HTML標準のdir属性 |
for | HTML標準のfor属性 |
id | HTML標準のid属性 |
lang | HTML標準のlang属性 |
tabindex | HTML標準のtabindex |
title | HTML標準のtitle属性 |
その他、JavaScriptのDOMレベル0イベントとして以下の属性が用意されています。それぞれ同名の属性になります。
属性 |
---|
onclick |
ondblclick |
onkeydown |
onkeypress |
onkeyup |
onmousedown |
onmousemove |
onmouseout |
onmouseover |
onmouseup |
残りがSpring用の属性になります。
属性 | 説明 |
---|---|
cssErrorClass | Validationのエラー時のclass属性 |
htmlEscape | HTMLのエスケープをするかどうか。デフォルトはtrue |
path | 関連付けるModelの名前 |
コントローラで使用するモデルです。
package com.example.spring.controller.c043; public class C043Model { private String isbn; private String name; // setter、getterは省略 }
サンプルのコントローラです。
package com.example.spring.controller.c043; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; @Controller @RequestMapping("/c043") public class C043Controller { @RequestMapping("/label") public String label(Model model) { C043Model c043Model = new C043Model("123", "よく分かるSpring"); model.addAttribute("c043Model", c043Model); return "c043/label"; } }
コントローラではformで利用する値をModelに格納しています。
カスタムタグを使用しているJSPです。
<%@page contentType="text/html; charset=utf-8" %><%-- --%><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>サンプル</title> </head> <body> <form:label path="c043Model.name">書名:</form:label> <form:input path="c043Model.name" /> </body> </html>
実際に動作させ、出力されるHTMLは以下のようになります(見やすくするために改行を入れています)。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>サンプル</title> </head> <body> <label for="name">書名:</label> <input id="name" name="name" type="text" value="よく分かるSpring"/> </body> </html>
ソースは https://github.com/kuwalab/spring-mvc41 にあります。タグ043が今回のサンプルです。
まとめ http://kuwalab.hatenablog.jp/entry/spring
最初 http://kuwalab.hatenablog.jp/entry/spring_mvc41/001
前回 http://kuwalab.hatenablog.jp/entry/spring_mvc41/042
次回 http://kuwalab.hatenablog.jp/entry/spring_mvc41/044
Spring MVC 4.1 No. 042 form:optionsタグ
form:optionsタグは、HTMLの<option>タグを生成します。このタグは、form:selectタグの中に書く必要があります。
その要素の内、単純にHTMLの属性に置き換えられるものは、以下の属性です。cssClassやcssStyleはそれぞれclass、style属性に置き換えられます。
属性 | 説明 |
---|---|
cssClass | HTML標準のclass属性 |
cssStyle | HTML標準のsytle属性 |
dir | HTML標準のdir属性 |
disabled | HTML標準のdisabled属性 |
id | HTML標準のid属性 |
lang | HTML標準のlang属性 |
tabindex | HTML標準のtabindex |
title | HTML標準のtitle属性 |
その他、JavaScriptのDOMレベル0イベントとして以下の属性が用意されています。それぞれ同名の属性になります。
属性 |
---|
onblur |
onchange |
onclick |
ondblclick |
onfocus |
onkeydown |
onkeypress |
onkeyup |
onmousedown |
onmousemove |
onmouseout |
onmouseover |
onmouseup |
残りがSpring用の属性になります。
属性 | 説明 |
---|---|
cssErrorClass | Validationのエラー時のclass属性 |
htmlEscape | HTMLのエスケープをするかどうか。デフォルトはtrue |
itemLabel | labelを出力するitemsで指定したクラスのプロパティ名 |
items | radioボタンを作るための配列やMap |
itemValue | valueを出力するitemsで指定したクラスのプロパティ名 |
実際の例を見ていきます。まずは選択されたの要素の初期値を設定するモデルです。
package com.example.spring.controller.c042; public class C042Form { private String selectedIsbn; // setter、getterは省略 }
書籍データを格納するモデルです。このクラスの一つのインスタンスが1つのoption要素に相当します。
package com.example.spring.controller.c042; public class C042Model { private String isbn; private String name; // setter、getterは省略 }
サンプルのコントローラです。
package com.example.spring.controller.c042; 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; @Controller @RequestMapping("/c042") public class C042Controller { @RequestMapping("/options") public String options(Model model) { List<C042Model> c042ModelList = new ArrayList<>(); c042ModelList.add(new C042Model("123", "よく分かるSpring")); c042ModelList.add(new C042Model("456", "よく分かるJava")); c042ModelList.add(new C042Model("789", "よく分かるSpring MVC")); model.addAttribute("c042ModelList", c042ModelList); C042Form c042Form = new C042Form(); c042Form.setSelectedIsbn(""); model.addAttribute("c042Form", c042Form); return "c042/options"; } }
コントローラではformで利用する値をModelに格納しています。
カスタムタグを使用しているJSPです。
<%@page contentType="text/html; charset=utf-8" %><%-- --%><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>サンプル</title> </head> <body> <form:select path="c042Form.selectedIsbn"> <form:options items="${c042ModelList}" itemLabel="name" itemValue="isbn" /> </form:select> </body> </html>
実際に動作させ、出力されるHTMLは以下のようになります(見やすくするために改行を入れています)。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>サンプル</title> </head> <body> <select id="selectedIsbn" name="selectedIsbn"> <option value="123">よく分かるSpring</option> <option value="456">よく分かるJava</option> <option value="789">よく分かるSpring MVC</option> </select> </body> </html>
ソースは https://github.com/kuwalab/spring-mvc41 にあります。タグ042が今回のサンプルです。
まとめ http://kuwalab.hatenablog.jp/entry/spring
最初 http://kuwalab.hatenablog.jp/entry/spring_mvc41/001
前回 http://kuwalab.hatenablog.jp/entry/spring_mvc41/041
次回 http://kuwalab.hatenablog.jp/entry/spring_mvc41/043
Spring MVC 4.1 No. 041 form:optionタグ
form:optionタグは、HTMLの<option>タグを生成します。このタグは、form:selectタグの中に書く必要があります。
その要素の内、単純にHTMLの属性に置き換えられるものは、以下の属性です。cssClassやcssStyleはそれぞれclass、style属性に置き換えられます。
属性 | 説明 |
---|---|
cssClass | HTML標準のclass属性 |
cssStyle | HTML標準のsytle属性 |
dir | HTML標準のdir属性 |
disabled | HTML標準のdisabled属性 |
id | HTML標準のid属性 |
lang | HTML標準のlang属性 |
tabindex | HTML標準のtabindex |
title | HTML標準のtitle属性 |
value | HTML標準のvalue属性 |
その他、JavaScriptのDOMレベル0イベントとして以下の属性が用意されています。それぞれ同名の属性になります。
属性 |
---|
onblur |
onchange |
onclick |
ondblclick |
onfocus |
onkeydown |
onkeypress |
onkeyup |
onmousedown |
onmousemove |
onmouseout |
onmouseover |
onmouseup |
残りがSpring用の属性になります。
属性 | 説明 |
---|---|
cssErrorClass | Validationのエラー時のclass属性 |
htmlEscape | HTMLのエスケープをするかどうか。デフォルトはtrue |
label | HTMLのlabel要素を作成し、チェックボックスと関連付ける |
コントローラで使用するモデルです。
package com.example.spring.controller.c041; public class C041Model { private String selectedIsbn; public String getSelectedIsbn() { return selectedIsbn; } public void setSelectedIsbn(String selectedIsbn) { this.selectedIsbn = selectedIsbn; } }
サンプルのコントローラです。
package com.example.spring.controller.c041; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; @Controller @RequestMapping("/c041") public class C041Controller { @RequestMapping("/option") public String option(Model model) { C041Model c041Model = new C041Model(); c041Model.setSelectedIsbn(""); model.addAttribute("c041Model", c041Model); return "c041/option"; } }
コントローラではformで利用する値をModelに格納しています。
カスタムタグを使用しているJSPです。
<%@page contentType="text/html; charset=utf-8" %><%-- --%><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>サンプル</title> </head> <body> <form:select path="c041Model.selectedIsbn"> <form:option value="123" label="よく分かるSpring"/> <form:option value="456" label="よく分かるJava"/> <form:option value="789" label="よく分かるSpring MVC"/> </form:select> </body> </html>
実際に動作させ、出力されるHTMLは以下のようになります(見やすくするために改行を入れています)。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>サンプル</title> </head> <body> <select id="selectedIsbn" name="selectedIsbn"> <option value="123">よく分かるSpring</option> <option value="456">よく分かるJava</option> <option value="789">よく分かるSpring MVC</option> </select> </body> </html>
ソースは https://github.com/kuwalab/spring-mvc41 にあります。タグ041が今回のサンプルです。
まとめ http://kuwalab.hatenablog.jp/entry/spring
最初 http://kuwalab.hatenablog.jp/entry/spring_mvc41/001
前回 http://kuwalab.hatenablog.jp/entry/spring_mvc41/040
次回 http://kuwalab.hatenablog.jp/entry/spring_mvc41/042
Spring MVC 4.1 No. 040 form:selectタグ
form:selectタグは、HTMLの<select>タグとその子要素のoptionタグを生成します。
その要素の内、単純にHTMLの属性に置き換えられるものは、以下の属性です。cssClassやcssStyleはそれぞれclass、style属性に置き換えられます。
属性 | 説明 |
---|---|
accesskey | HTML標準のaccesskey属性 |
cssClass | HTML標準のclass属性 |
cssStyle | HTML標準のsytle属性 |
dir | HTML標準のdir属性 |
disabled | HTML標準のdisabled属性 |
id | HTML標準のid属性 |
lang | HTML標準のlang属性 |
multiple | HTML標準のmultiple要素。trueかfalseを指定する |
size | HTML標準のsize属性 |
tabindex | HTML標準のtabindex |
title | HTML標準のtitle属性 |
その他、JavaScriptのDOMレベル0イベントとして以下の属性が用意されています。それぞれ同名の属性になります。
属性 |
---|
onblur |
onchange |
onclick |
ondblclick |
onfocus |
onkeydown |
onkeypress |
onkeyup |
onmousedown |
onmousemove |
onmouseout |
onmouseover |
onmouseup |
残りがSpring用の属性になります。
属性 | 説明 |
---|---|
cssErrorClass | Validationのエラー時のclass属性 |
delimiter | チェックボックスの間の区切り文字。デフォルトはなし |
element | それぞれのradioボタンを囲む要素。デフォルトはspan |
htmlEscape | HTMLのエスケープをするかどうか。デフォルトはtrue |
itemLabel | labelを出力するitemsで指定したクラスのプロパティ名 |
items | radioボタンを作るための配列やMap |
itemValue | valueを出力するitemsで指定したクラスのプロパティ名 |
path | 関連付けるModelの名前 |
実際の例を見ていきます。まずは選択されたの要素の初期値を設定するモデルです。
package com.example.spring.controller.c040; public class C040Form { private String selectedIsbn; // setter、getterは省略 }
書籍データを格納するモデルです。このクラスの一つのインスタンスが1つのoption要素に相当します。
package com.example.spring.controller.c040; public class C040Model { private String isbn; private String name; public C040Model(String isbn, String name) { this.isbn = isbn; this.name = name; } // setter、getterは省略 }
サンプルのコントローラです。
package com.example.spring.controller.c040; 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; @Controller @RequestMapping("/c040") public class C040Controller { @RequestMapping("/select") public String select(Model model) { List<C040Model> c040ModelList = new ArrayList<>(); c040ModelList.add(new C040Model("123", "よく分かるSpring")); c040ModelList.add(new C040Model("456", "よく分かるJava")); c040ModelList.add(new C040Model("789", "よく分かるSpring MVC")); model.addAttribute("c040ModelList", c040ModelList); C040Form c040Form = new C040Form(); c040Form.setSelectedIsbn("456"); model.addAttribute("c040Form", c040Form); return "c040/select"; } }
optionメソッドではラジオボタンとして表示するためにC040Modelクラスのオブジェクトのリストを作成しています。また、ラジオボタンの初期値として、C040FormクラスのselectedIsbnに選択状態とするisbn(value)を指定します。
カスタムタグを使用しているJSPです。
<%@page contentType="text/html; charset=utf-8" %><%-- --%><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>サンプル</title> </head> <body> <form action="selectRecv"> <form:select path="c040Form.selectedIsbn" items="${c040ModelList}" itemLabel="name" itemValue="isbn" delimiter=" " /><br> <form:select path="c040Form.selectedIsbn" multiple="true" size="3" items="${c040ModelList}" itemLabel="name" itemValue="isbn" delimiter=" " /><br> </form> </body> </html>
JSPではラジオボタンのリストをitems属性で指定します。itemLabelとitemValueでチェックボックスのラベルとvalueを取得するフィールド名を指定します。
実際に動作させ、出力されるHTMLは以下のようになります(見やすくするために改行を入れています)。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>サンプル</title> </head> <body> <form action="selectRecv"> <select id="selectedIsbn" name="selectedIsbn"> <option value="123">よく分かるSpring</option> <option value="456" selected="selected">よく分かるJava</option> <option value="789">よく分かるSpring MVC</option> </select><br> <select id="selectedIsbn" name="selectedIsbn" multiple="multiple" size="3"> <option value="123">よく分かるSpring</option> <option value="456" selected="selected">よく分かるJava</option> <option value="789">よく分かるSpring MVC</option> </select> <input type="hidden" name="_selectedIsbn" value="1"/><br> </form> </body> </html>
ソースは https://github.com/kuwalab/spring-mvc41 にあります。タグ040が今回のサンプルです。
まとめ http://kuwalab.hatenablog.jp/entry/spring
最初 http://kuwalab.hatenablog.jp/entry/spring_mvc41/001
前回 http://kuwalab.hatenablog.jp/entry/spring_mvc41/039
次回 http://kuwalab.hatenablog.jp/entry/spring_mvc41/041
Spring MVC 4.0 No. 039 form:radiobuttonsタグ
form:radiobuttonsタグは、HTMLの複数の<input type="radio">タグを生成します。
その要素の内、単純にHTMLの属性に置き換えられるものは、以下の属性です。cssClassやcssStyleはそれぞれclass、style属性に置き換えられます。
属性 | 説明 |
---|---|
accesskey | HTML標準のaccesskey属性 |
cssClass | HTML標準のclass属性 |
cssStyle | HTML標準のsytle属性 |
dir | HTML標準のdir属性 |
disabled | HTML標準のdisabled属性 |
id | HTML標準のid属性 |
lang | HTML標準のlang属性 |
tabindex | HTML標準のtabindex |
title | HTML標準のtitle属性 |
その他、JavaScriptのDOMレベル0イベントとして以下の属性が用意されています。それぞれ同名の属性になります。
属性 |
---|
onblur |
onchange |
onclick |
ondblclick |
onfocus |
onkeydown |
onkeypress |
onkeyup |
onmousedown |
onmousemove |
onmouseout |
onmouseover |
onmouseup |
残りがSpring用の属性になります。
属性 | 説明 |
---|---|
cssErrorClass | Validationのエラー時のclass属性 |
delimiter | チェックボックスの間の区切り文字。デフォルトはなし |
element | それぞれのradioボタンを囲む要素。デフォルトはspan |
htmlEscape | HTMLのエスケープをするかどうか。デフォルトはtrue |
itemLabel | labelを出力するitemsで指定したクラスのプロパティ名 |
items | radioボタンを作るための配列やMap |
itemValue | valueを出力するitemsで指定したクラスのプロパティ名 |
path | 関連付けるModelの名前 |
実際の例を見ていきます。まずは、radioボタンの初期値を設定するモデルです。
package com.example.spring.controller.c039; public class C039Form { private String selectedIsbn; // getter、setterは省略 }
書籍データを格納するモデルです。このクラスの一つのインスタンスが1つのラジオボタンに相当します。
package com.example.spring.controller.c039; public class C039Model { private String isbn; private String name; public C039Model(String isbn, String name) { this.isbn = isbn; this.name = name; } // setter、getterは省略 }
サンプルのコントローラーです。
package com.example.spring.controller.c039; 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("/c039") public class C039Controller { @RequestMapping("/radiobuttons") public String radiobuttons(Model model) { List<C039Model> c039ModelList = new ArrayList<>(); c039ModelList.add(new C039Model("123", "よく分かるSpring")); c039ModelList.add(new C039Model("456", "よく分かるJava")); c039ModelList.add(new C039Model("790", "よく分かるSpring MVC")); model.addAttribute("c039ModelList", c039ModelList); C039Form c039Form = new C039Form(); c039Form.setSelectedIsbn("456"); model.addAttribute("c039Form", c039Form); return "c039/radiobuttons"; } @RequestMapping("/radiobuttonsRecv") public String radiobuttonsRecv( @RequestParam(required = false) String selectedIsbn, Model model) { model.addAttribute("isbn", selectedIsbn); return "c039/radiobuttonsRecv"; } }
radiobuttonsメソッドではラジオボタンとして表示するためにC039Modelクラスのオブジェクトのリストを作成しています。また、ラジオボタンの初期値として、C039FormクラスのselectedIsbnに選択状態とするラジオボタンのisbn(value)を指定します。
カスタムタグを使用しているJSPです。
<%@page contentType="text/html; charset=utf-8" %><%-- --%><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>サンプル</title> </head> <body> <form action="radiobuttonsRecv"> <form:radiobuttons path="c039Form.selectedIsbn" items="${c039ModelList}" itemLabel="name" itemValue="isbn" delimiter=" " /><br> <input type="submit" value="送信"> </form> </body> </html>
JSPではラジオボタンのリストをitems属性で指定します。itemLabelとitemValueでチェックボックスのラベルとvalueを取得するフィールド名を指定します。
受信するradiobuttonsRecv.jspです。
<%@page contentType="text/html; charset=utf-8" %><%-- --%><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>サンプル</title> </head> <body> チェックされた項目は<c:out value="${isbn}" /> </body> </html>
path属性で、モデルの値とタグを関連付けます。
実際に動作させ、出力されるHTMLは以下のようになります(見やすくするために改行を入れています)。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>サンプル</title> </head> <body> <form action="radiobuttonsRecv"> <span><input id="selectedIsbn1" name="selectedIsbn" type="radio" value="123"/> <label for="selectedIsbn1">よく分かるSpring</label></span> <span> <input id="selectedIsbn2" name="selectedIsbn" type="radio" value="456" checked="checked"/> <label for="selectedIsbn2">よく分かるJava</label></span> <span> <input id="selectedIsbn3" name="selectedIsbn" type="radio" value="790"/> <label for="selectedIsbn3">よく分かるSpring MVC</label></span><br> <input type="submit" value="送信"> </form> </body> </html>
label属性を指定していると、HTMLのlabel要素が出力されます。
ソースは https://github.com/kuwalab/spring-mvc40 にあります。タグ039が今回のサンプルです。
まとめ http://kuwalab.hatenablog.jp/entry/spring
最初 http://kuwalab.hatenablog.jp/entry/spring_mvc/001
前回 http://kuwalab.hatenablog.jp/entry/spring_mvc/038
次回 http://kuwalab.hatenablog.jp/entry/spring_mvc/040
Spring MVC 4.1 No. 038 form:radiobuttonタグ
form:radiobuttonタグは、HTMLの<input type="radio">タグを生成します。
その要素の内、単純にHTMLの属性に置き換えられるものは、以下の属性です。cssClassやcssStyleはそれぞれclass、style属性に置き換えられます。
属性 | 説明 |
---|---|
accesskey | HTML標準のaccesskey属性 |
cssClass | HTML標準のclass属性 |
cssStyle | HTML標準のsytle属性 |
dir | HTML標準のdir属性 |
disabled | HTML標準のdisabled属性 |
id | HTML標準のid属性 |
lang | HTML標準のlang属性 |
tabindex | HTML標準のtabindex |
title | HTML標準のtitle属性 |
value | HTML標準のvalue属性 |
その他、JavaScriptのDOMレベル0イベントとして以下の属性が用意されています。それぞれ同名の属性になります。
属性 |
---|
onblur |
onchange |
onclick |
ondblclick |
onfocus |
onkeydown |
onkeypress |
onkeyup |
onmousedown |
onmousemove |
onmouseout |
onmouseover |
onmouseup |
残りがSpring用の属性になります。
属性 | 説明 |
---|---|
cssErrorClass | Validationのエラー時のclass属性 |
htmlEscape | HTMLのエスケープをするかどうか。デフォルトはtrue |
label | HTMLのlabel要素を作成し、チェックボックスと関連付ける |
path | 関連付けるModelの名前 |
使用するモデルです。ラジオボタンの初期値として利用します。
package com.example.spring.controller.c038; public class C038Model { private String tel; // setter、getterは省略 }
サンプルのコントローラです。
package com.example.spring.controller.c038; 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("/c038") public class C038Controller { @RequestMapping("/radiobutton") public String radiobutton(Model model) { C038Model c038Model = new C038Model(); c038Model.setTel("mobile"); model.addAttribute("c038Model", c038Model); return "c038/radiobutton"; } @RequestMapping("/radiobuttonRecv") public String radiobuttonRecv(@RequestParam String tel, Model model) { model.addAttribute("recvData", tel); return "c038/radiobuttonRecv"; } }
コントローラではformで利用する値をModelに格納しています。
カスタムタグを使用しているJSPです。
<%@page contentType="text/html; charset=utf-8" %><%-- --%><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>サンプル</title> </head> <body> <form action="radiobuttonRecv"> <form:radiobutton path="c038Model.tel" label="固定電話" value="home" /><br> <form:radiobutton path="c038Model.tel" label="携帯電話" value="mobile" /><br> <form:radiobutton path="c038Model.tel" label="なし" value="nothing" /><br> <input type="submit" value="送信"> </form> </body> </html>
受信するradiobuttonRecv.jspです。
<%@page contentType="text/html; charset=utf-8" %><%-- --%><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>サンプル</title> </head> <body> 受信データ: <c:out value="${recvData}" /><br> </body> </html>
path属性で、モデルの値とタグを関連付けます。
実際に動作させ、出力されるHTMLは以下のようになります(見やすくするために改行を入れています)。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>サンプル</title> </head> <body> <form action="radiobuttonRecv"> <input id="tel1" name="tel" type="radio" value="home"/><label for="tel1">固定電話</label><br> <input id="tel2" name="tel" type="radio" value="mobile" checked="checked"/><label for="tel2">携帯電話</label><br> <input id="tel3" name="tel" type="radio" value="nothing"/><label for="tel3">なし</label><br> <input type="submit" value="送信"> </form> </body> </html>
label属性を指定していると、HTMLのlabel要素が出力されます。
ソースは https://github.com/kuwalab/spring-mvc41 にあります。タグ036が今回のサンプルです。
まとめ http://kuwalab.hatenablog.jp/entry/spring
最初 http://kuwalab.hatenablog.jp/entry/spring_mvc41/001
前回 http://kuwalab.hatenablog.jp/entry/spring_mvc41/037
次回 http://kuwalab.hatenablog.jp/entry/spring_mvc41/039
Spring MVC 4.1 No. 037 form:checkboxesタグ
form:checkboxesタグは、HTMLの<input type="checkbox">タグのまとまりを生成します。
その要素の内、単純にHTMLの属性に置き換えられるものは、以下の属性です。cssClassやcssStyleはそれぞれclass、style属性に置き換えられます。
属性 | 説明 |
---|---|
accesskey | HTML標準のaccesskey属性 |
cssClass | HTML標準のclass属性 |
cssStyle | HTML標準のsytle属性 |
dir | HTML標準のdir属性 |
disabled | HTML標準のdisabled属性 |
id | HTML標準のid属性 |
lang | HTML標準のlang属性 |
tabindex | HTML標準のtabindex |
title | HTML標準のtitle属性 |
その他、JavaScriptのDOMレベル0イベントとして以下の属性が用意されています。それぞれ同名の属性になります。
属性 |
---|
onblur |
onchange |
onclick |
ondblclick |
onfocus |
onkeydown |
onkeypress |
onkeyup |
onmousedown |
onmousemove |
onmouseout |
onmouseover |
onmouseup |
残りがSpring用の属性になります。
属性 | 説明 |
---|---|
cssErrorClass | Validationのエラー時のclass属性 |
delimiter | チェックボックスの間の区切り文字。デフォルトはなし |
element | それぞれのcheckboxを囲む要素。デフォルトはspan |
htmlEscape | HTMLのエスケープをするかどうか。デフォルトはtrue |
itemLabel | labelを出力するitemsで指定したクラスのプロパティ名 |
items | checkboxを作るための配列やMap |
itemValue | valueを出力するitemsで指定したクラスのプロパティ名 |
path | 関連付けるModelの名前 |
実際の例を確認していきます。まずは、一つのチェックボックスを表すモデルクラスです。isbnをvalue、nameをラベルに使用します。
package com.example.spring.controller.c037; public class C037Model { private String isbn; private String name; // setter、getterは省略 }
サンプルのコントローラです。
package com.example.spring.controller.c037; 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("/c037") public class C037Controller { @RequestMapping("/checkboxes") public String checkboxes(Model model) { List<C037Model> c037ModelList = new ArrayList<>(); c037ModelList.add(new C037Model("123", "よく分かるSpring")); c037ModelList.add(new C037Model("456", "よく分かるJava")); c037ModelList.add(new C037Model("789", "よく分かるSpring MVC")); model.addAttribute("c037ModelList", c037ModelList); C037Form c037Form = new C037Form(); c037Form.setSelectedIsbn(new String[] { "456" }); model.addAttribute("c037Form", c037Form); return "c037/checkboxes"; } @RequestMapping("/checkboxesRecv") public String checkboxesRecv( @RequestParam(required = false) String[] selectedIsbn, Model model) { model.addAttribute("isbns", selectedIsbn); return "c037/checkboxesRecv"; } }
checkboxesメソッドではチェックボックスとして表示するためにBookクラスのオブジェクトのリストを作成しています。また、チェックボックスの初期値として、BookFormクラスのselectedIsbnに選択状態にするチェックボックスのisbn(value)を指定します。初期値を設定しない場合には、nullか空のString配列を渡してください。
カスタムタグを使用しているJSPです。
<%@page contentType="text/html; charset=utf-8" %><%-- --%><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>サンプル</title> </head> <body> <form action="checkboxesRecv"> <form:checkboxes path="c037Form.selectedIsbn" items="${c037ModelList}" itemLabel="name" itemValue="isbn" delimiter=" " /><br> <input type="submit" value="送信"> </form> </body> </html>
JSPではチェックボックスのリストをitems属性で指定します。itemLabelとitemValueでチェックボックスのラベルとvalueを取得するフィールド名を指定します。
受信するcheckboxesRecv.jspです。
<%@page contentType="text/html; charset=utf-8" %><%-- --%><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>サンプル</title> </head> <body> チェックされた項目は<br> <c:forEach items="${isbns}" var="isbn"> <c:out value="${isbn}" /> </c:forEach> </body> </html>
path属性で、モデルの値とタグを関連付けます。
実際に動作させ、出力されるHTMLは以下のようになります(見やすくするために改行を入れています)。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>サンプル</title> </head> <body> <form action="checkboxesRecv"> <span><input id="selectedIsbn1" name="selectedIsbn" type="checkbox" value="123"/> <label for="selectedIsbn1">よく分かるSpring</label></span> <span> <input id="selectedIsbn2" name="selectedIsbn" type="checkbox" value="456" checked="checked"/> <label for="selectedIsbn2">よく分かるJava</label></span><span> <input id="selectedIsbn3" name="selectedIsbn" type="checkbox" value="789"/> <label for="selectedIsbn3">よく分かるSpring MVC</label></span><input type="hidden" name="_selectedIsbn" value="on"/><br> <input type="submit" value="送信"> </form> </body> </html>
label属性を指定していると、HTMLのlabel要素が出力されます。
ソースは https://github.com/kuwalab/spring-mvc41 にあります。タグ037が今回のサンプルです。
まとめ http://kuwalab.hatenablog.jp/entry/spring
最初 http://kuwalab.hatenablog.jp/entry/spring_mvc41/001
前回 http://kuwalab.hatenablog.jp/entry/spring_mvc41/036
次回 http://kuwalab.hatenablog.jp/entry/spring_mvc41/038