선택(Select)

분류: 폼 요소

여러 옵션 중 하나 또는 여러 개를 고르는 드롭다운 선택 상자 예제입니다. <select> 요소에 .form-select 클래스만 붙이면 Tabler 스타일이 적용되며, multiple 속성을 추가하면 목록 형태의 다중 선택 상자로 바뀝니다.

소스

<div class="mb-3">
    <div class="form-label">선택</div>
    <select class="form-select">
        <option value="1">옵션 1</option>
        <option value="2">옵션 2</option>
        <option value="3">옵션 3</option>
    </select>
</div>

<div class="mb-3">
    <div class="form-label">다중 선택</div>
    <select class="form-select" multiple="">
        <option value="1">옵션 1</option>
        <option value="2">옵션 2</option>
        <option value="3">옵션 3</option>
    </select>
</div>

사용된 주요 클래스

클래스	역할
form-label	선택 상자 위에 붙는 라벨 텍스트 스타일
form-select	<select> 요소에 적용하는 기본 드롭다운 스타일
mb-3	필드 그룹 사이 아래쪽 여백(margin-bottom)

참고 자료

• Form elements

실전 예제 페이지

HandStack 웹 호스트(wwwroot 모듈)를 기동한 뒤 /sample/ui-library/폼-요소-선택-select.html 경로에서 렌더링 결과를 확인할 수 있습니다.

미리보기새 창에서 열기 ↗