Bootstrap 5 양식 풍선 레이아웃

浮动 레이블/애니메이션 레이블

기본적으로 레이블(label)을 사용할 때, 레이블은 일반적으로 입력 필드의 상단에 나타납니다：

浮动 레이블을 사용하여 입력 필드 내에 레이블을 삽입하고 입력 필드를 클릭할 때 레이블을 부는/애니메이션화할 수 있습니다：

實例

<div class="form-floating mb-3 mt-3">
  <input type="text" class="form-control" id="email" placeholder="이메일 주소를 입력하세요" name="email">
  <label for="email">電郵</label>
</div>
<div class="form-floating mt-3 mb-3">
  <input type="text" class="form-control" id="pwd" placeholder="請輸入密碼" name="pswd">
  <label for="pwd">密碼</label>
</div>

親自試一試

關於浮動標籤的注意事項：

<label> 元素必须在 <input> 元素之後，並且每個 <input> 元素都需要 placeholder 屬性（即使未顯示）。

Textarea

也適用於文本域：

實例

<div class="form-floating">
  <textarea class="form-control" id="comment" name="text" placeholder="Comment goes here"></textarea>
  <label for="comment">評論</label>
</div>

親自試一試

選擇菜單

您還可以在選擇菜單上使用“浮動標籤”。但是，它們不會浮動/動畫化。標籤將始終出現在左上角的选择菜單內：

實例

<div class="form-floating">
  <select class="form-select" id="sel1" name="sellist">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
  <label for="sel1" class="form-label">選擇列表（選擇一项）：</label>
</div>

親自試一試