[ HTML ] <select>, <option> 태그

환경 : Spring Tool Suite 4

 

<select> 태그

• <select> 태그는 말그대로 선택하는 태그이다.
• <select> 태그 안에서 <option>태그를 활용하여 <option> 태그 중에 원하는 항목을 선택할 수 있다. 

속성

속성명	설명
label	<option> 태그에 표시할 글자 속성을 정함 <option> 태그 내부의 글자보다 우선 적용됨
name	<select>에 작성하여 <form> 제출 시 전송될 파라미터의 이름을 지정
value	실제 선택된 값을 처리 <form>이 제출될 경우 value값이 전송됨
size	<option> 개수 지정  size 속성보다 많은 개수의 <option>이 존재할 경우 스크롤이 생김
multiple	특수 키를 이용하여 다중선택 가능
required	값이 무조건 존재해야 함
disabled	비활성화. 사용자가 조작할 수 없음
optgroup	복잡한 <select> 구조 구현

---

 

[ 메뉴 등록 페이지를 활용한 예시 - 전체코드 ]

 

   - MenuController.java

@Controller
@RequestMapping("/menu")
public class MenuController {
	
	@Autowired
	public MenuDao dao;
	
	@GetMapping("/insert")
	public String insert1() {
		return "/WEB-INF/views/menu/insert.jsp";
	}
	
	@PostMapping("/insert")
	public String insert2(@ModelAttribute MenuDto dto) {
		dao.insert(dto);
		return "redirect:insertComplete";
	}
	
	@RequestMapping("/insertComplete")
	public String insertComplete() {
		return "/WEB-INF/views/menu/insertComplete.jsp";
	}
}

 

  - insert.jsp

<select name="...">
	<option value="...">...</option>
	<option value="...">...</option>
	<option value="...">...</option>
</select>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<h1>메뉴 등록</h1>
<form action="insert" method="post">
	메뉴명 (한글) <input type="text" name="menuNameKor" required> <br><br>
	메뉴명 (영어) <input type="text" name="menuNameEng" required> <br><br>
	메뉴유형

	<select name="menuType" required>
		<option value="">선택하세요</option>
		<option value="커피">커피</option>
		<option value="스무디">스무디</option>
		<option value="에이드">에이드</option>
		<option value="디저트">디저트</option>
	</select>
	<br><br>
	메뉴가격 <input type="number" name="menuPrice" required> <br><br>
	<button>메뉴등록</button>
</form>

 

   - 출력 결과

출력 결과

---

[ 설명 ]

<select name="menuType" required>
	<option value="">선택하세요</option>
	<option value="커피">커피</option>
	<option value="스무디">스무디</option>
	<option value="에이드">에이드</option>
	<option value="디저트">디저트</option>
</select>

    (+) name 속성에 데이터베이스로 전송할 수 있는 해당 변수명을 적어준다. 

    (+) required="required"를 생략하여 required라고 적을 수 있다.

    (+) value 값을 주지 않고 ""로 둔다면 선택하지 못하는 <option> 태그가 된다.

         따라서 "선택하세요"와 같이 사용자에게 정보를 제공해야하는 경우 등에 사용된다. 

 

 

 

 

 

 

 

 

 

 

 

개인 공부 기록용입니다:)