목차
Select 메뉴 - 단일 선택
Select 메뉴 - 복수 선택
Select 메뉴 - 크기 조정
Select 메뉴 - 비활성화
Datalist 메뉴 (= 입력 가능 데이터 표시)
Select 메뉴 - 단일 선택
<form action="/action_page.php">
<label for="hz" class="form-label ">단일 선택 Select 메뉴</label>
<select class="form-select " id="hz" name="hz">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<button type="submit" class="btn btn-primary mt-3">Submit</button>
</form>
Select 메뉴 - 복수 선택
※ SELECT 태그에 multiple 속성 추가.
<form action="/action_page.php">
<label for="hz" class="form-label ">복수 선택 Select 메뉴</label>
<select multiple class="form-select " id="hz" name="hz">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<button type="submit" class="btn btn-primary mt-3">Submit</button>
</form>
PS. 복수 선택 방법 3가지
Ctrl 키 누른 채 선택
Shift 키 누른 채 선택
마우스로 드래그 선택
Select 메뉴 - 크기 조정
※ SELECT 태그에 (.form-select-lg / .form-select-sm) 클래스 추가.
대: <select class="form-select form-select-lg ">
중: <select class="form-select">
소: <select class="form-select form-select-sm ">
Select 메뉴 - 비활성화
※ SELECT 태그에 disabled 속성 추가.
<select class="form-select" id="hz" name="hz" disabled >
Datalist 메뉴 (= 입력 가능 데이터 표시)
※ INPUT 태그에 입력 예시 데이터 리스트를 꾸밀 때 사용.
※ (하늘색은 하늘색끼리, 핑크색은 핑크색끼리) 같아야 함.
<form action="/action_page.php">
<label for="hz " class="form-label ">예시한 데이터 중 선택</label>
<input class="form-control " list="code " name="hz" id="hz ">
<datalist id="code ">
<option value="HTML">
<option value="CSS">
<option value="JavaScript">
<option value="PHP">
<option value="SQL">
</datalist>
<button type="submit" class="btn btn-primary mt-3">Submit</button>
</form>
주소 복사
랜덤 이동