EnglishInput Group trong Bootstrap 5 là một thành phần mạnh mẽ giúp bạn kết hợp nhiều phần tử vào một ô nhập liệu, chẳng hạn như thêm biểu tượng, văn bản, hoặc nút vào trước hoặc sau trường nhập liệu. Điều này giúp các biểu mẫu trở nên gọn gàng, trực quan và dễ sử dụng. 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 thành phần Input Group trong Bootstrap 5, bao gồm các kiểu sử dụng với văn bản, nút, biểu tượng, dropdown, và hơn thế nữa.
1. Input Group cơ bản với văn bản
Để tạo một Input Group cơ bản với văn bản, bạn sử dụng class input-group và input-group-text. Các phần tử này sẽ được tự động căn chỉnh theo chiều ngang để trông gọn gàng và nhất quán.
Ví dụ Input Group với văn bản
<div class="input-group mb-3">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Tên người dùng" aria-label="Username">
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Số tiền" aria-label="Amount">
<span class="input-group-text">VNĐ</span>
</div>Trong ví dụ này:
- Văn bản
@được đặt trước ô nhập liệu để hiển thị ký tự đại diện cho tên người dùng. - Văn bản
VNĐđược đặt sau ô nhập để chỉ đơn vị tiền tệ.
2. Input Group với biểu tượng
Bạn có thể sử dụng các biểu tượng (icon) trong Input Group để làm cho giao diện trực quan và dễ nhận diện. Các biểu tượng thường được thêm bằng cách sử dụng thư viện icon như Font Awesome hoặc Bootstrap Icons.
Ví dụ Input Group với biểu tượng
<div class="input-group mb-3">
<span class="input-group-text"><i class="bi bi-envelope"></i></span>
<input type="email" class="form-control" placeholder="Email của bạn" aria-label="Email">
</div>
<div class="input-group mb-3">
<input type="password" class="form-control" placeholder="Mật khẩu" aria-label="Password">
<span class="input-group-text"><i class="bi bi-eye"></i></span>
</div>Trong ví dụ trên:
- Biểu tượng phong bì (envelope) được đặt trước ô nhập liệu để đại diện cho trường email.
- Biểu tượng mắt (eye) được đặt sau ô nhập liệu, có thể dùng làm nút để hiển thị mật khẩu.
3. Input Group với nút
Bootstrap 5 cho phép bạn kết hợp ô nhập liệu với các nút, cho phép người dùng thực hiện các thao tác như tìm kiếm, gửi dữ liệu hoặc xóa dữ liệu ngay trong ô nhập liệu.
Ví dụ Input Group với nút
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Tìm kiếm..." aria-label="Search">
<button class="btn btn-outline-secondary" type="button">Tìm kiếm</button>
</div>
<div class="input-group mb-3">
<button class="btn btn-primary" type="button">Gửi</button>
<input type="text" class="form-control" placeholder="Nhập nội dung" aria-label="Message">
</div>Trong ví dụ này:
- Nút “Tìm kiếm” được đặt sau ô nhập liệu, cho phép người dùng gửi yêu cầu tìm kiếm.
- Nút “Gửi” được đặt trước ô nhập, thích hợp cho các trường nhập liệu có liên quan đến tin nhắn hoặc bình luận.
4. Input Group với dropdown
Bạn cũng có thể thêm dropdown vào Input Group, giúp người dùng dễ dàng chọn từ các tùy chọn có sẵn ngay bên cạnh ô nhập liệu.
Ví dụ Input Group với dropdown
<div class="input-group mb-3">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Chọn</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Tùy chọn 1</a></li>
<li><a class="dropdown-item" href="#">Tùy chọn 2</a></li>
<li><a class="dropdown-item" href="#">Tùy chọn 3</a></li>
</ul>
<input type="text" class="form-control" placeholder="Nhập nội dung" aria-label="Input with dropdown">
</div>Trong ví dụ này, dropdown được đặt trước ô nhập liệu, cho phép người dùng chọn một tùy chọn từ menu trước khi nhập liệu.
5. Kích thước của Input Group
Bootstrap 5 cho phép bạn tùy chỉnh kích thước của Input Group với các class input-group-sm (nhỏ) và input-group-lg (lớn) để phù hợp với thiết kế giao diện của bạn.
Ví dụ thay đổi kích thước của Input Group
<div class="input-group input-group-sm mb-3">
<span class="input-group-text">Nhỏ</span>
<input type="text" class="form-control" aria-label="Small input">
</div>
<div class="input-group mb-3">
<span class="input-group-text">Bình thường</span>
<input type="text" class="form-control" aria-label="Default input">
</div>
<div class="input-group input-group-lg">
<span class="input-group-text">Lớn</span>
<input type="text" class="form-control" aria-label="Large input">
</div>Trong ví dụ trên:
input-group-smtạo Input Group nhỏ gọn.input-group-lgtạo Input Group lớn hơn, thích hợp khi bạn cần thiết kế ô nhập liệu lớn để làm nổi bật.
6. Input Group với nhiều thành phần
Bootstrap 5 cho phép bạn kết hợp nhiều thành phần trong một Input Group, như văn bản, biểu tượng và nút, để tạo ra các ô nhập liệu phức tạp và đa dạng.
Ví dụ Input Group với nhiều thành phần
<div class="input-group mb-3">
<span class="input-group-text">$</span>
<span class="input-group-text">0.00</span>
<input type="text" class="form-control" placeholder="Số tiền" aria-label="Dollar amount with two labels">
</div>
<div class="input-group">
<button class="btn btn-outline-secondary" type="button">Tìm kiếm</button>
<input type="text" class="form-control" placeholder="Nhập từ khóa" aria-label="Search">
<button class="btn btn-outline-secondary" type="button">Xóa</button>
</div>Trong ví dụ này:
- Hai phần tử
$và0.00được đặt trước ô nhập để chỉ định đơn vị tiền tệ. - Một nút “Tìm kiếm” và “Xóa” được đặt trước và sau ô nhập liệu để hỗ trợ người dùng thao tác nhanh chóng.
Kết luận
Input Group trong Bootstrap 5 là một công cụ mạnh mẽ giúp bạn dễ dàng tùy chỉnh và tạo các nhóm nhập liệu trực quan, từ các ô nhập cơ bản đến các ô nhập với biểu tượng, nút, hoặc dropdown. Sử dụng Input Group giúp biểu mẫu của bạn gọn gàng, dễ sử dụng và thân thiện với người dùng. Hãy áp dụng các ví dụ từ bài viết này để xây dựng các Input Group chuyên nghiệp và tối ưu trải nghiệm người dùng cho trang web của bạn!
