Bài 36: Form Floating Label trong Bootstrap 5

Thứ sáu - 09/12/2022 23:09

Floating labels là phần tử cho bạn cách tạo những nhãn biểu mẫu đơn giản, nổi lên trên các trường nhập. Dưới đây là cách tạo floating label trong Bootstrap 5.

Cách tạo label nổi và động

Mặc định, khi dùng label, chúng thường xuất hiện ở phía trên cùng của trường nhập:

Với các nhãn nổi, bạn có thể chèn label bên trong trường nhập, khiến chúng nổi/chuyển động khi click vào trường nhập. Code mẫu:

<div class="form-floating mb-3 mt-3">
<input type="text" class="form-control" id="email" placeholder="Enter 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="Enter password" name="pswd">
<label for="pwd">Password</label>
</div>

Ví dụ:

Nhãn nổi cho trường nhập dữ liệu

Lưu ý trên các nhãn nổi: Các phần tử <label> phải nằm sau <input>, và thuộc tính placeholder cần cho phần tử <input> (dù nó không hiển thị).

Trường văn bản

Nó cũng hoạt động với vùng nhập văn bản. Code mẫu:

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

Ví dụ:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Floating Label</h2>
  <p>Click vào bên trong trường nhập để thấy hiệu ứng nhãn nổi:</p>
  <form action="/action_page.php">
    <div class="form-floating mb-3 mt-3">
      <textarea class="form-control" id="comment" name="text" placeholder="Comment goes here"></textarea>
      <label for="comment">Bình luận</label>
    </div>
    <button type="submit" class="btn btn-primary">Gửi</button>
  </form>
</div>

</body>
</html>

Nhãn nổi cho trường văn bản trong Bootstrap

Menu lựa chọn

Bạn cũng có thể dùng “floating-labels” trên menu lựa chọn. Tuy nhiên, chúng sẽ không nổi hay chuyển động. Nhãn dán này sẽ luôn hiện ở góc trái phía trên cùng, bên trong menu lựa chọn. Code mẫu:

<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">Select list (select one):</label>
</div>

Ví dụ:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Floating Label - Lựa chọn</h2>
  <p>Bạn cũng có thể dùng "floating-labels" trên menu lựa chọn. Tuy nhiên, chúng sẽ không nổi hay động mà chỉ luôn xuất hiện ở góc trái phía trên trong menu lựa chọn:</p>
  <form action="/action_page.php">
    <div class="form-floating mb-3 mt-3">
      <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">Danh sách lựa chọn trong Quantrimang.com (chọn một):</label>
    </div>
    <button type="submit" class="btn btn-primary">Gửi</button>
  </form>
</div>

</body>
</html>

Nhãn nổi cho menu lựa chọn