ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • Spring MVC - form 요소 - select, option, options, checkbox, checkboxs, radiobutton, radiobuttons
      Spring/Spring MVC 2021. 12. 27. 02:04
      반응형

       

      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>

       

      반응형

      'Spring > Spring MVC' 카테고리의 다른 글

      Spring MVC - requestScope  (0) 2021.12.27
      Spring MVC - Redirect와 Forward  (0) 2021.12.27
      Spring MVC - form 속성 - form, button, hidden, input, textarea  (0) 2021.12.27
      Spring MVC - 폼 커스텀 태그(Form Custom Tag)  (0) 2021.12.26
      Spring MVC - 커맨드 객체(Command Object)  (0) 2021.12.26

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바