Bootstrap 5 Thẻ nhúng hình thức

Thẻ nổi/hoạt hình

Mặc định, khi sử dụng thẻ (label), chúng thường xuất hiện ở trên cùng của trường nhập liệu:

Bằng cách sử dụng thẻ nhúng, bạn có thể chèn thẻ vào trường nhập liệu và làm chúng nổi/hoạt hình khi nhấp vào trường nhập liệu:

Mô hình

<div class="form-floating mb-3 mt-3">
  <input type="text" class="form-control" id="email" placeholder="nhập địa chỉ email" name="email">
  <label for="email">Email</label>
</div>
<div class="form-floating mt-3 mb-3">
  <input type="text" class="form-control" id="pwd" placeholder="Vui lòng nhập mật khẩu" name="pswd">
  <label for="pwd">Mật khẩu</label>
</div>

Thử ngay

Lưu ý về thẻ浮动:

Thẻ <label> phải xuất hiện sau thẻ <input>, và mỗi thẻ <input> đều cần placeholder Thuộc tính (mặc dù không hiển thị).

Textarea

Cũng áp dụng cho trường văn bản:

Mô hình

<div class="form-floating">
  <textarea class="form-control" id="comment" name="text" placeholder="Phản hồi ở đây"></textarea>
  <label for="comment">Phản hồi</label>
</div>

Thử ngay

Menu chọn

Bạn cũng có thể sử dụng "thẻ浮动" trong menu chọn. Nhưng, chúng không浮动/hoạt hình. Thẻ sẽ luôn xuất hiện trong góc trên cùng bên trái của menu chọn:

Mô hình

<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">Chọn danh sách (chọn một mục):</label>
</div>

Thử ngay