Floating Labels là một tính năng mới trong Bootstrap 5, cho phép bạn tạo nhãn (label) nổi cho các trường nhập liệu (input). Khi người dùng bắt đầu nhập, nhãn sẽ tự động di chuyển lên trên, giúp tiết kiệm không gian và tạo giao diện hiện đại, gọn gàng cho biểu mẫu. Trong bài viết này, CodeTutHub sẽ hướng dẫn bạn cách sử dụng và tùy chỉnh Floating Labels trong Bootstrap 5 với các ví dụ chi tiết.

1. Floating Labels cơ bản

Floating Labels trong Bootstrap 5 được tạo bằng cách đặt nhãn (label) và trường nhập liệu (input hoặc textarea) bên trong một thẻ form-floating. Khi người dùng tương tác với trường nhập, nhãn sẽ tự động di chuyển lên trên, tạo thành nhãn nổi.

Ví dụ Floating Label cơ bản với input

<div class="form-floating mb-3">
    <input type="email" class="form-control" id="floatingEmail" placeholder="name@example.com">
    <label for="floatingEmail">Địa chỉ Email</label>
</div>
<div class="form-floating">
    <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
    <label for="floatingPassword">Mật khẩu</label>
</div>

Trong ví dụ này:

• form-floating tạo một khối nhãn nổi cho từng ô nhập liệu.
• placeholder cần có trong mỗi ô nhập liệu để kích hoạt hiệu ứng nhãn nổi.

2. Floating Labels với textarea

Bạn cũng có thể sử dụng Floating Labels với các trường nhập liệu dạng textarea bằng cách thêm class form-control vào <textarea>. Điều này giúp người dùng dễ dàng nhập nội dung dài hơn trong một không gian hiển thị mở rộng.

Ví dụ Floating Label với textarea

<div class="form-floating">
    <textarea class="form-control" placeholder="Nội dung tin nhắn" id="floatingTextarea" style="height: 100px"></textarea>
    <label for="floatingTextarea">Tin nhắn</label>
</div>

Ở đây, trường textarea được thiết lập độ cao (style="height: 100px") để tạo không gian nhập liệu vừa đủ.

3. Floating Labels với các kiểu input khác

Floating Labels có thể được sử dụng với nhiều kiểu dữ liệu khác nhau như text, email, password, number, v.v. Điều này giúp bạn dễ dàng áp dụng nhãn nổi cho nhiều trường nhập liệu khác nhau trong cùng một biểu mẫu.

Ví dụ với các kiểu dữ liệu khác

<div class="form-floating mb-3">
    <input type="text" class="form-control" id="floatingUsername" placeholder="Username">
    <label for="floatingUsername">Tên người dùng</label>
</div>
<div class="form-floating mb-3">
    <input type="number" class="form-control" id="floatingAge" placeholder="Age">
    <label for="floatingAge">Tuổi</label>
</div>

Trong ví dụ này, nhãn nổi được sử dụng với các loại input khác nhau, bao gồm text cho tên người dùng và number cho tuổi.

4. Floating Labels với các trạng thái validation

Bootstrap 5 hỗ trợ xác thực cho Floating Labels với các class is-valid và is-invalid, cho phép bạn dễ dàng hiển thị trạng thái hợp lệ hoặc không hợp lệ.

Ví dụ với validation

<div class="form-floating mb-3">
    <input type="text" class="form-control is-valid" id="floatingValidInput" placeholder="Valid input">
    <label for="floatingValidInput">Trường hợp hợp lệ</label>
</div>
<div class="form-floating mb-3">
    <input type="text" class="form-control is-invalid" id="floatingInvalidInput" placeholder="Invalid input">
    <label for="floatingInvalidInput">Trường hợp không hợp lệ</label>
    <div class="invalid-feedback">Vui lòng nhập đúng thông tin.</div>
</div>

Trong ví dụ này:

• Class is-valid hiển thị trạng thái hợp lệ cho input.
• Class is-invalid hiển thị trạng thái không hợp lệ, kèm với thông báo lỗi bằng invalid-feedback.

5. Floating Labels với Input Group

Bạn cũng có thể kết hợp Floating Labels với Input Group để thêm các phần tử bổ sung như nút, văn bản hoặc biểu tượng bên cạnh trường nhập liệu. Tuy nhiên, cần đảm bảo cấu trúc và CSS phù hợp để duy trì giao diện nhất quán.

Ví dụ Floating Label với Input Group

<div class="form-floating mb-3">
    <div class="input-group">
        <span class="input-group-text">@</span>
        <input type="text" class="form-control" id="floatingInputGroup" placeholder="Username">
    </div>
    <label for="floatingInputGroup">Tên người dùng</label>
</div>

Trong ví dụ này, một biểu tượng @ được thêm vào trước ô nhập liệu để đại diện cho tên người dùng.

6. Floating Labels và kích thước

Bootstrap 5 không hỗ trợ các kích thước như form-control-sm và form-control-lg cho Floating Labels, vì vậy các trường nhập liệu sẽ luôn có kích thước mặc định khi sử dụng với nhãn nổi. Nếu bạn cần các trường nhập liệu lớn hơn hoặc nhỏ hơn, bạn nên cân nhắc sử dụng các thành phần form khác.

Kết luận

Floating Labels trong Bootstrap 5 là một công cụ hiệu quả và thẩm mỹ giúp biểu mẫu của bạn gọn gàng và dễ sử dụng. Từ các trường nhập liệu cơ bản đến các trường với nhiều kiểu dữ liệu khác nhau, Floating Labels giúp tạo nên giao diện hiện đại và thân thiện với người dùng. Hãy thử áp dụng các ví dụ từ bài viết này để tạo các nhãn nổi cho biểu mẫu của bạn, giúp cải thiện trải nghiệm người dùng và tăng tính thẩm mỹ cho trang web.