Spring / Thymeleaf 라디오 버튼 & 셀렉트 박스 정리

 

라디오 버튼

 

- 여러 값 중 하나만 선택된다.

- name이 같아야 하나만 선택된다.

- 타임리프에서는 th:field를 사용하면 바인딩 및 checked가 자동 처리된다.

// Enum을 사용한 라디오 버튼
 
// Enum
 
public Enum Gender {
    MALE, FEMALE
}
 
// Controller
 
model.addAttribute("genders", Gender.values());
 
// HTML
 
<form th:object="${member}">
    <div th:each="gender : ${genders}">
        <input type="radio"
               th:field="*{gender}" /* 이 입력값은 Member.gender랑 연결한다.*/
               th:value="${gender}"> /* 이 라디오 버튼이 대표하는 실제 값 */
    </div>
</form>

 

셀렉트 박스

 

- 드롭다운 형태

- 하나 또는 여러 개 선택 가능

- option 태그와 함께 사용

// List / Map을 이용한 셀렉트 박스
 
// Controller
 
Map<String, String> jobMap = new LinkedHashMap<>();
jobMap.put("STUDENT", "학생");
jobMap.put("DEV", "개발자");
jobMap.put("DESIGN", "디자이너");
 
model.addAttribute("jobs", jobMap);
 
 
// HTML
 
<select th:field="*{job}">
    <option value="">-- 직업 선택 --</option>
    <option th:each="job : ${jobs}"
            th:value="${job.key}"
            th:text="${job.value}">
    </option>
</select>