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 33: Checkbox và Radio Button trong Bootstrap 5
-
Bài 6: Bảng trong Bootstrap 5
-
Bài 10: Button trong Bootstrap 5
-
Bài 1: Bootstrap 5 là gì? Bắt đầu như thế nào?
-
Bài 34: Range trong Bootstrap 5
-
Bài 32: Menu lựa chọn trong Bootstrap 5
-
Bài 31: Tạo Form trong Bootstrap 5
-
Bài 3: Hệ thống lưới Grid System 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
-
Cách thức tỉnh trái ác quỷ Blox Fruit
2 ngày -
Code Wuthering Waves mới nhất 18/05/2025 và hướng dẫn đổi code
3 ngày -
Tổng hợp 1001+ thuật ngữ trong Liên Quân Mobile
2 ngày 7 -
Hình nền trắng, ảnh nền trắng đẹp
3 ngày -
Khối D01 thi môn nào, học ngành nào?
Hôm qua -
Tại sao khởi động lại router có thể khắc phục được nhiều vấn đề?
Hôm qua -
Cách tìm tài khoản liên kết với địa chỉ email
Hôm qua -
19/5 là ngày gì? Ngày 19 tháng 5 năm 1890 là ngày gì?
Hôm qua 6 -
Cách kích hoạt Windows Subsystem for Linux trên Windows
Hôm qua -
Outlook là gì? Cách sử dụng Outlook cho người mới
2 ngày