[Bootstrap] Form Floating Labels

1. 기본 개념

• `.form-floating` 클래스를 사용하면 라벨이 input 안쪽에 있다가, 사용자가 입력하거나 클릭할 경우 위로 떠오름 (애니메이션 효과)
• label은 반드시 input 뒤에 위치해야 하며, `placeholder` 속성도 필수

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="email" placeholder="name@example.com">
  <label for="email">Email address</label>
</div>

---

2. 비밀번호 필드 예시

<div class="form-floating mb-3">
  <input type="password" class="form-control" id="password" placeholder="Password">
  <label for="password">Password</label>
</div>

---

3. Textarea (텍스트 영역)

• textarea도 floating label을 적용
• 반드시 `placeholder`를 입력해야 작동

<div class="form-floating mb-3">
  <textarea class="form-control" placeholder="Leave a comment here" id="comment" style="height: 100px"></textarea>
  <label for="comment">Comments</label>
</div>

---

4. Select 메뉴 (주의사항 있음)

• select에 floating label을 적용할 수 있지만, 애니메이션 효과는 없음
• label이 상단 왼쪽에 고정

<div class="form-floating">
  <select class="form-select" id="selectMenu" aria-label="Floating label select example">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <label for="selectMenu">Select an option</label>
</div>