Bài 36: Form Floating Label trong Bootstrap 5
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ụ:
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>
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>
Trên đây là cách tạo nhãn nổi cho web, ứng dụng bằng Bootstrap 5. Hi vọng bài viết hữu ích với các bạn.
Bạn nên đọc
-
Bài 31: Tạo Form trong Bootstrap 5
-
Bài 4: Typography trong Bootstrap 5
-
Bài 2: Tìm hiểu về Container trong Bootstrap 5
-
Bài 7: Ảnh trong Bootstrap 5
-
Bài 5: Màu sắc trong Bootstrap 5
-
Bài 1: Bootstrap 5 là gì? Bắt đầu như thế nào?
-
Bài 6: Bảng trong Bootstrap 5
-
Bài 32: Menu lựa chọn trong Bootstrap 5
-
Bài 33: Checkbox và Radio Button trong Bootstrap 5
Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:


Cũ vẫn chất
-
9 công cụ tạo video AI tốt nhất
Hôm qua -
Cách sửa lỗi gõ tiếng Việt trên Word, Excel
Hôm qua -
Cách khóa và mở khóa file Powerpoint để chỉnh sửa
Hôm qua -
Toán tử trong SQL
Hôm qua -
‘Từ điển’ tiếng Huế thông dụng
Hôm qua -
5 cách mở cài đặt âm thanh trên PC Windows
Hôm qua 2 -
Cách xem số thẻ MBBank trên ứng dụng
Hôm qua -
Cách kiểm tra số dư tài khoản Sacombank rất đơn giản
Hôm qua -
Cách hiện file ẩn, thư mục ẩn trên Windows 10/8/7
Hôm qua -
Bluestacks