[Thymeleaf] 라디오 버튼, 셀렉트 박스

라디오 버튼은 여러 선택지 중에 하나를 선택할 때 사용할 수 있다.

1. EnumType을 활용한 라디오 버튼

public enum ItemType {
    BOOK("도서"), FODD("음식"), ETC("기타");

    private final String description;

    ItemType(String description) {
        this.description = description;
    }

    public String getDescription() {
        return description;
    }
}

//Controller
@ModelAttribute("itemTypes")
public ItemType[] itemTypes() {
    return ItemType.values();
}

• ItemType.values()를 사용하면 해당 ENUM의 모든 정보를 배열로 반환한다.
  • [BOOK, FOOD, ETC]

<!-- HTML -->
<div th:each="type : ${itemTypes}" class="form-check form-check-inline">
    <input type="radio" th:field="${item.itemType}" th:value="${type.name()}"
           class="form-check-input">
    <label th:for="${#ids.prev('itemType')}" th:text="${type.description}"
           class="form-check-label">
        BOOK
    </label>
</div>

• 라디오 버튼은 이미 선택이 되어 있다면, 수정 시에도 항상 하나의 선택하도록 되어 있으므로 체크박스와 달리 별도의 히든 필드를 사용할 필요가 없다.

<!-- 렌더링 결과 -->
<div>
    <div>상품 종류</div>
    <div class="form-check form-check-inline">
        <input type="radio" value="BOOK"
               class="form-check-input" id="itemType1" name="itemType">
        <label for="itemType1" class="form-check-label">도서</label>
    </div>
    <div class="form-check form-check-inline">
        <input type="radio" value="FODD"
               class="form-check-input" id="itemType2" name="itemType">
        <label for="itemType2" class="form-check-label">음식</label>
    </div>
    <div class="form-check form-check-inline">
        <input type="radio" value="ETC"
               class="form-check-input" id="itemType3" name="itemType">
        <label for="itemType3" class="form-check-label">기타</label>
    </div>
</div>

출력 화면

 

2. 자바 객체를 활용한 셀렉트 박스

셀렉트 박스는 여러 선택지 중에 하나를 선택할 때 사용할 수 있다.

//Controller
@ModelAttribute("deliveryCodes")
public List<DeliveryCode> deliveryCodes() {
    List<DeliveryCode> deliveryCodes = new ArrayList<>();
    deliveryCodes.add(new DeliveryCode("FAST", "빠른 배송"));
    deliveryCodes.add(new DeliveryCode("NORMAL", "일반 배송"));
    deliveryCodes.add(new DeliveryCode("SLOW", "느린 배송"));
    return deliveryCodes;
}

• @ModelAtrribute가 있는 deliveryCodes() 메서드는 컨트롤러가 호출될 때마다 사용되므로 deliveryCodes 객체도 계속 생성된다.

<!-- HTML -->
<select th:field="${item.deliveryCode}" class="form-select">
    <option value="">==배송 방식 선택==</option>
    <option th:each="deliveryCode : ${deliveryCodes}" th:value="${deliveryCode.code}"
            th:text="${deliveryCode.displayName}">FAST</option>
</select>

<!-- 렌더링 후 결과 -->
<div>
    <div>배송 방식</div>
    <select class="form-select" id="deliveryCode" name="deliveryCode">
        <option value="">==배송 방식 선택==</option>
        <option value="FAST">빠른 배송</option>
        <option value="NORMAL">일반 배송</option>
        <option value="SLOW">느린 배송</option>
    </select>
</div>