Spring/Spring MVC

Spring MVC - form 요소 - select, option, options, checkbox, checkboxs, radiobutton, radiobuttons

jddng 2021. 12. 27. 02:04
728x90
반응형

 

form 요소 - select, option, options, checkbox, checkboxs,

                 radiobutton, radiobuttons

 

 

공통부분

DataBean.java 와 MapBean.java

public class DataBean {
	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 길어서 생략 */
	
}
public class MapBean {
	private String key;
	private String value;

	.../* getter setter 길어서 생략 */
}

<form:select>

  • path - 설정한 문자열은 id와 name 속성으로 지정되며 model의 값을 추출해 값과
    동일한 value속성의 option 태그를 선택

 

<form:option> 이용한 select

 

 option을 이용하여 select를 만들어 보자.

<form:options> - select 태그의 option 들을 생성 ( items 속성 사용 )

items - option 태그들을 생성할 때 필요한 데이터가 담긴 list나 배열

testController.java

@Controller
public class testController {
	
	@GetMapping("/test1")
	public String test1(DataBean bean, Model model) {
    
		bean.setA1("data2");

		return "test1";
	}
}

 

test1.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>test1</h1>
	<form:form modelAttribute="dataBean" action='result'>
		<form:select path="a1">
			<form:option value="data1">항목1</form:option>
			<form:option value="data2">항목2</form:option>
			<form:option value="data3">항목3</form:option>
		</form:select>
	</form:form>
</body>
</html>
<form:form modelAttribute="dataBean" action='result'>
 - dataBean에 저장되어있는 property 사용

<form:select path="a1">
 - Controller에서 a1이 "data2"으로 저장되었으므로 select는 default로 data2을 선택한다.

<form:option value="data1">항목1</form:option>
<form:option value="data2">항목2</form:option>
<form:option value="data3">항목3</form:option>
 - select의 옵션을 넣어준다. 총 3개지의 옵션이 생성되고, value값이 "data2"인 옵션이 default로 선택된다.
 - 선택된 데이터를 Controller에서 주입받고 싶으면 id값을 정해주면 된다.

출력 결과

 

 

배열을 이용한 <form:options>
  •  배열은 options 태그를 이용해 배열에 들어있는 데이터만큼 option을 만들 수 있다.
  • items 속성 : option 태그들을 생성할 때 필요한 데이터가 담긴 list나 배열

 

testController.java

@Controller
public class testController {
	
	@GetMapping("/test1")
	public String test1(DataBean bean, Model model) {

		bean.setA1("data2");
	
		String [] data_list1 = {"data1", "data2", "data3"};
		model.addAttribute("data_list1", data_list1);

		return "test1";
	}
}

 

test1.jsp

	<form:form modelAttribute="dataBean" action='result'>
		<form:select path="a1">
			<form:options items="${requestScope.data_list1 }"/>
		</form:select>
	</form:form>
<form:select path="a1">
 - Controller에서 a1이 "data2"으로 저장되었으므로 select는 default로 data2을 선택한다.

<form:options items="${requestScope.data_list1 }"/>
 - options를 이용하면 배열 데이터를 옵션으로 만들 수 있다.
 - 배열 data_list1은 data1, data2, data3 데이터가 있으므로 옵션은 3개 만들어진다.
 - default로 data2가 선택된다.

결과 화면

 

List, Map을 이용한 <form:options>

 배열과 마찬가지로 List, Map 또한 options 태그를 이용해 option들을 만들어 줄 수 있다.

 

 

testController.java

@Controller
public class testController {
	
	@GetMapping("/test1")
	public String test1(DataBean bean, Model model) {
    
		bean.setA1("data2");
		bean.setA2("data2");

		ArrayList<String> data_list1 = new ArrayList<String>();
		data_list1.add("data1");
		data_list1.add("data2");
		data_list1.add("data3");
		model.addAttribute("data_list1", data_list1);
		
		MapBean map_bean1 = new MapBean();
		MapBean map_bean2 = new MapBean();
		MapBean map_bean3 = new MapBean();
		
		map_bean1.setKey("항목1");
		map_bean1.setValue("data1");
		map_bean2.setKey("항목2");
		map_bean2.setValue("data2");
		map_bean3.setKey("항목3");
		map_bean3.setValue("data3");
		
		ArrayList<MapBean> data_map = new ArrayList<MapBean>();
		data_list3.add(map_bean1);
		data_list3.add(map_bean2);
		data_list3.add(map_bean3);
		
		model.addAttribute("data_map", data_map);
		
		
		return "test1";
	}
}

 

test1.jsp

	<form:form modelAttribute="dataBean" action='result'>
		<form:select path="a1">
			<form:options items="${requestScope.data_list1 }"/>
		</form:select>
		<hr/>
		<form:select path="a2">
			<form:options items="${requestScope.data_map }" itemLabel="key" itemValue="value"/>
		</form:select>
		<hr/>
	</form:form>
<form:select path="a1">
 - Controller에서 a1이 "data2"으로 저장되었으므로 select는 default로 data2을 선택한다.

<form:options items="${requestScope.data_list2 }"/>
 - options를 이용하면 List 데이터를 옵션으로 만들 수 있다.
 - 리스트 data_list1은 data1, data2, data3 데이터가 있으므로 옵션은 3개 만들어진다.
 - default로 data2가 선택된다.

<form:select path="a2">
 - Controller에서 a2이 "data2"으로 저장되었으므로 select는 default로 data2을 선택한다.

<form:options items="${requestScope.data_list3 }" itemLabel="key" itemValue="value"/>
 - options를 이용하면 Map 데이터를 옵션으로 만들 수 있다.
 - Map인 data_map은 data1, data2, data3 데이터가 있으므로 옵션은 3개 만들어진다.
 - default로 data2가 선택된다.
 - itemLabel : key, itemValue : value로 설정하면 된다.
 - key는 화면에 보여주는 데이터, value는 옵션에 저장되는 값이다. 

 

 여기서 알아야 할 점은 배열, 리스트로 넘긴 값은 데이터를 화면에 출력하는 값과 실제 저장되는 값이 같다. 하지만 Map으로 값을 넘겨 itemLabel 속성과 itemValue 속성을 설정하면 실제 출력되는 값과 실제 저장되는 데이터 값을 다르게 설정할 수 있다. 

결과 화면

<form:checkbox>, <form:checkboxs>

 checkbox는 select와는 달리 여러 데이터를 선택할 수 있다. 즉, 다중 선택이 가능하다.

select 방식과 거의 유사하므로 설명은 생략하겠다.

 

<form:checkbox>, <form:checkboxs>
  • <form:checkbox> - checkbox 하나를 생성 ( value 속성 사용 )
  • <form:checkboxs> - checkbox 들을 생성 ( items 속성 사용 )
  • items : checkbox들을 생성하기 위해 필요한 정보가 담겨있는 list나 배열

 

 

testController.java

@Controller
public class testController {
	
	@GetMapping("/test1")
	public String test1(DataBean bean, Model model) {

		String [] check_list = {"data1", "data2"};
		bean.setA5(check_list);
		bean.setA6(check_list);
		bean.setA7(check_list);
		bean.setA8(check_list);
		
		//options를 이용하여 select 만들기 - 배열 이용
		String [] data_list1 = {"data1", "data2", "data3"};
		model.addAttribute("data_list1", data_list1);
		
		//options를 이용하여 select 만들기 - List 이용
		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);
		
		//options를 이용하여 select 만들기 - map 이용
		MapBean map_bean1 = new MapBean();
		MapBean map_bean2 = new MapBean();
		MapBean map_bean3 = new MapBean();
		
		map_bean1.setKey("항목1");
		map_bean1.setValue("data1");
		map_bean2.setKey("항목2");
		map_bean2.setValue("data2");
		map_bean3.setKey("항목3");
		map_bean3.setValue("data3");
		
		ArrayList<MapBean> data_list3 = new ArrayList<MapBean>();
		data_list3.add(map_bean1);
		data_list3.add(map_bean2);
		data_list3.add(map_bean3);
		
		model.addAttribute("data_list3", data_list3);
		
		
		return "test1";
	}
}

 

test1.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>test1</h1>
	<form:form modelAttribute="dataBean" action='result'>
		<form:checkbox path="a5" value="data1"/>항목1
		<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:form>
</body>
</html>

 

 

 

<form:radiobutton>, <form:radiobuttons>

 radiobutton은 checkbox와 동일 형식이지만 중복 선택이 안된다.

이것 또한 코드가 유사하므로 설명은 생략하겠다.

<form:radiobutton>, <form:radiobuttons>
  • <form:radiobutton> - radiobutton 하나를 생성 ( value 속성 사용 )
  • <form:radiobuttons> - radiobutton 들을 생성 ( items 속성 사용 )
  • items - radiobutton 들을 생성하기 위해 필요한 정보가 담겨있는 list나 배열

 

testController.java

@Controller
public class testController {
	
	@GetMapping("/test1")
	public String test1(DataBean bean, Model model) {

		bean.setA9("data2");
		bean.setA10("data2");
		bean.setA11("data2");
		bean.setA12("data2");
		
		//options를 이용하여 select 만들기 - 배열 이용
		String [] data_list1 = {"data1", "data2", "data3"};
		model.addAttribute("data_list1", data_list1);
		
		 //options를 이용하여 select 만들기 - List 이용
		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);
		
		//options를 이용하여 select 만들기 - map 이용
		MapBean map_bean1 = new MapBean();
		MapBean map_bean2 = new MapBean();
		MapBean map_bean3 = new MapBean();
		
		
		map_bean1.setKey("항목1");
		map_bean1.setValue("data1");
		map_bean2.setKey("항목2");
		map_bean2.setValue("data2");
		map_bean3.setKey("항목3");
		map_bean3.setValue("data3");
		
		ArrayList<MapBean> data_list3 = new ArrayList<MapBean>();
		data_list3.add(map_bean1);
		data_list3.add(map_bean2);
		data_list3.add(map_bean3);
		
		model.addAttribute("data_list3", data_list3);
		
		
		return "test1";
	}
}

 

test1.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>test1</h1>
	<form:form modelAttribute="dataBean" action='result'>
    
		<form:radiobutton path="a9" value="data1" />항목1
		<form:radiobutton path="a9" value="data2" />항목2
		<form:radiobutton path="a9" value="data3" />항목3
		<hr/>
		<form:radiobuttons items="${requestScope.data_list1 }" path="a10"/>
		<hr/>
		<form:radiobuttons items="${requestScope.data_list2 }" path="a11"/>
		<hr/>
		<form:radiobuttons items="${requestScope.data_list3 }" path="a12" itemLabel="key" itemValue="value"/>
		<hr/>

	</form:form>
</body>
</html>

 

728x90
반응형