고정 헤더 영역
상세 컨텐츠
본문
DataBean.java
private String a1;
private String a2;
private String a3;
private String a4;
private String[] a5;
private String[] a6;
private String[] a7;
private String[] a8;
private String a9;
private String a10;
private String a11;
private String a12;getter, setter 필수
KeyValueBean.java
private String key;
private String value;getter, setter 필수
TestController.java
@Controller
public class TestController { //17, 18강 Form 요소 다시보기
@GetMapping("/test1")
public String test1(DataBean bean, Model model) {
bean.setA1("data2");
bean.setA2("data2");
// bean.setA3("data2");
bean.setA4("data2");
String[] chekc_list = {"data1", "data3"};
bean.setA5(chekc_list);
bean.setA6(chekc_list);
bean.setA7(chekc_list);
bean.setA8(chekc_list);
bean.setA9("data2");
bean.setA10("data2");
bean.setA11("data2");
bean.setA12("data2");
String[] data_list1 = {"data1","data2","data3"};
model.addAttribute("data_list1",data_list1);
ArrayList<String> data_list2 = new ArrayList<String>();
data_list2.add("data1");
data_list2.add("data2");
data_list2.add("data3");
model.addAttribute("data_list2", data_list2);
KeyValueBean key_bean1 = new KeyValueBean();
KeyValueBean key_bean2 = new KeyValueBean();
KeyValueBean key_bean3 = new KeyValueBean();
key_bean1.setKey("항목1");
key_bean1.setValue("data1");
key_bean2.setKey("항목2");
key_bean2.setValue("data2");
key_bean3.setKey("항목3");
key_bean3.setValue("data3");
ArrayList<KeyValueBean> data_list3 = new ArrayList<KeyValueBean>();
data_list3.add(key_bean1);
data_list3.add(key_bean2);
data_list3.add(key_bean3);
model.addAttribute("data_list3", data_list3);
return "test1";
}그리고 test1.jsp
<h1>test1</h1>
<form:form action="result" modelAttribute="dataBean">
<form:select path="a1"> <!-- Contorller에서 a1에 세팅되어있는 값으로 가서 밑의 form태그의 value와 동일한 값이 있다면 그때 그것을 미리 체크해주게 된다 -->
<form:option value="data1">항목1</form:option>
<form:option value="data2">항목2</form:option>
<form:option value="data3">항목3</form:option>
</form:select>
<hr>
<form:select path="a2">
<form:options items="${requestScope.data_list1}"/>
</form:select>
<hr>
<form:select path="a3">
<form:options items="${requestScope.data_list2 }"/>
</form:select>
<hr>
<form:select path="a4">
<form:options items="${requestScope.data_list3 }" itemLabel="key" itemValue="value"/>
</form:select>
<hr>
<form:checkbox path="a5" value="data1"/>항목1 <!-- TestController에서 path값인 a5로 가서 해당 value값이 있으면 체크 없으면 체크안함 -->
<form:checkbox path="a5" value="data2"/>항목2
<form:checkbox path="a5" value="data3"/>항목3
<hr>
<form:checkboxes items="${requestScope.data_list1}" path="a6"/>
<hr>
<form:checkboxes items="${requestScope.data_list2 }" path="a7"/>
<hr>
<form:checkboxes items="${requestScope.data_list3 }" path="a8" itemLabel="key" itemValue="value"/>
<hr>
<form:radiobutton path="a9" value="data1"/>항목1
<form:radiobutton path="a9" value="data2"/>항목2
<form:radiobutton path="a9" value="data3"/>항목3
<hr>
<form:radiobuttons path="a10" items="${requestScope.data_list1 }"/>
<hr>
<form:radiobuttons path="a11" items="${requestScope.data_list2 }"/>
<hr>
<form:radiobuttons path="a12" items="${requestScope.data_list3 }" itemLabel="key" itemValue="value"/>
<hr>
</form:form>form태그로 인해 형성되는 html코드
<h1>test1</h1>
<form id="dataBean" action="result" method="post">
<select id="a1" name="a1"> <!-- Contorller에서 a1에 세팅되어있는 값으로 가서 밑의 form태그의 value와 동일한 값이 있다면 그때 그것을 미리 체크해주게 된다 -->
<option value="data1">항목1</option>
<option value="data2" selected="selected">항목2</option>
<option value="data3">항목3</option>
</select>
<hr>
<select id="a2" name="a2">
<option value="data1">data1</option><option value="data2" selected="selected">data2</option><option value="data3">data3</option>
</select>
<hr>
<select id="a3" name="a3">
<option value="data1">data1</option><option value="data2">data2</option><option value="data3">data3</option>
</select>
<hr>
<select id="a4" name="a4">
<option value="data1">항목1</option><option value="data2" selected="selected">항목2</option><option value="data3">항목3</option>
</select>
<hr>
<input id="a51" name="a5" type="checkbox" value="data1" checked="checked"/><input type="hidden" name="_a5" value="on"/>항목1 <!-- TestController에서 path값인 a5로 가서 해당 value값이 있으면 체크 없으면 체크안함 -->
<input id="a52" name="a5" type="checkbox" value="data2"/><input type="hidden" name="_a5" value="on"/>항목2
<input id="a53" name="a5" type="checkbox" value="data3" checked="checked"/><input type="hidden" name="_a5" value="on"/>항목3
<hr>
<span><input id="a61" name="a6" type="checkbox" value="data1" checked="checked"/><label for="a61">data1</label></span><span><input id="a62" name="a6" type="checkbox" value="data2"/><label for="a62">data2</label></span><span><input id="a63" name="a6" type="checkbox" value="data3" checked="checked"/><label for="a63">data3</label></span><input type="hidden" name="_a6" value="on"/>
<hr>
<span><input id="a71" name="a7" type="checkbox" value="data1" checked="checked"/><label for="a71">data1</label></span><span><input id="a72" name="a7" type="checkbox" value="data2"/><label for="a72">data2</label></span><span><input id="a73" name="a7" type="checkbox" value="data3" checked="checked"/><label for="a73">data3</label></span><input type="hidden" name="_a7" value="on"/>
<hr>
<span><input id="a81" name="a8" type="checkbox" value="data1" checked="checked"/><label for="a81">항목1</label></span><span><input id="a82" name="a8" type="checkbox" value="data2"/><label for="a82">항목2</label></span><span><input id="a83" name="a8" type="checkbox" value="data3" checked="checked"/><label for="a83">항목3</label></span><input type="hidden" name="_a8" value="on"/>
<hr>
<input id="a91" name="a9" type="radio" value="data1"/>항목1
<input id="a92" name="a9" type="radio" value="data2" checked="checked"/>항목2
<input id="a93" name="a9" type="radio" value="data3"/>항목3
<hr>
<span><input id="a101" name="a10" type="radio" value="data1"/><label for="a101">data1</label></span><span><input id="a102" name="a10" type="radio" value="data2" checked="checked"/><label for="a102">data2</label></span><span><input id="a103" name="a10" type="radio" value="data3"/><label for="a103">data3</label></span>
<hr>
<span><input id="a111" name="a11" type="radio" value="data1"/><label for="a111">data1</label></span><span><input id="a112" name="a11" type="radio" value="data2" checked="checked"/><label for="a112">data2</label></span><span><input id="a113" name="a11" type="radio" value="data3"/><label for="a113">data3</label></span>
<hr>
<span><input id="a121" name="a12" type="radio" value="data1"/><label for="a121">항목1</label></span><span><input id="a122" name="a12" type="radio" value="data2" checked="checked"/><label for="a122">항목2</label></span><span><input id="a123" name="a12" type="radio" value="data3"/><label for="a123">항목3</label></span>
<hr>
</form>그리고 결과적으로 나오는 화면
이렇게 흐름을 알 수 있다.
spring의
<form: > 태그 사용시
checkboxes, radiobutton, radiobuttons 등 다양한 버튼이 존재하므로
잘 활용해서 쓴다면 jsp작성시에 편하게 작성할수 있을것이다.
(html요소가 자동적으로 들어가는것이 많기때문에)
'Spring' 카테고리의 다른 글
| @ModelAttribute와 requestScope(request영역)에서의 forward 데이터활용법 예시 (0) | 2022.01.23 |
|---|---|
| model.getAttribute()와 request.getAttribute()의 주의점 (0) | 2022.01.23 |
| spring form tag <form:form> (0) | 2022.01.23 |
| Spring - form 커스텀태그 <form:form> 맨위 선언 필수 (0) | 2022.01.22 |
| spring @ModelAttribute(커멘드객체)를 이용해서 el ${}에서 사용하기! 예제 예시 설명 (0) | 2022.01.22 |
댓글 영역