[form] BS5 - Select Menu (실렉트메뉴) / Datalist (데이터리스트)

1. Select 메뉴 - 단일 선택
2. Select 메뉴 - 복수 선택
3. Select 메뉴 - 크기 조정
4. Select 메뉴 - 비활성화
5. 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>