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 4: Typography trong Bootstrap 5
-
Bài 31: Tạo Form trong Bootstrap 5
-
Bài 33: Checkbox và Radio Button trong Bootstrap 5
-
Bài 1: Bootstrap 5 là gì? Bắt đầu như thế nào?
-
Bài 2: Tìm hiểu về Container trong Bootstrap 5
-
Bài 6: Bảng trong Bootstrap 5
-
Bài 35: Input Group trong Bootstrap 5
-
Bài 32: Menu lựa chọn trong Bootstrap 5
-
Bài 10: 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
-
45 câu đố vui cho trẻ về nghề nghiệp
Hôm qua -
Đội hình Định Mệnh DTCL mùa 11, cách chơi, lên đồ
Hôm qua -
Code Roblox mới nhất tháng 10 và cách nhập Roblox Promo Code 2025
Hôm qua 6 -
Hàm trong Python là gì? Các hàm trong Python
Hôm qua 2 -
Cách tính BHXH 1 lần, hưởng BHXH 1 lần mới nhất
Hôm qua -
Giải phương trình bậc 2 một ẩn bằng Python
Hôm qua 3 -
Game luyện chuột, game nhanh tay lẹ mắt trên máy tính
Hôm qua 3 -
Hướng dẫn đóng dấu ngoặc số âm trong Excel
Hôm qua 1 -
Cách thiết lập VPN trên iPhone hoặc iPad
Hôm qua 3 -
Firmware là gì? Firmware khác Software như thế nào?
Hôm qua