EnglishForm (biểu mẫu) là một phần quan trọng trong mọi trang web, giúp người dùng tương tác và gửi dữ liệu. Bootstrap 5 cung cấp một loạt các công cụ và thành phần để tạo form chuyên nghiệp, dễ sử dụng và thân thiện với mọi loại thiết bị. Trong bài viết này, CodeTutHub sẽ giới thiệu tổng quan về các thành phần chính trong form của Bootstrap 5, gồm Form control, Select, Checks & radios, Range, Input group, Floating labels, Layout, và Validation.
1. Form Control
Form control là các thành phần cơ bản của form như các ô nhập liệu (input), ô nhập văn bản dài (textarea), và các phần tử cho phép người dùng nhập dữ liệu. Bootstrap 5 cung cấp class form-control giúp định dạng form control, tạo nên giao diện đồng nhất và dễ đọc.
Ví dụ
<div class="container">
<div class="mb-3">
<label for="exampleInput" class="form-label">Địa chỉ Email</label>
<input type="email" class="form-control" id="exampleInput" placeholder="Nhập email của bạn">
</div>
<div class="mb-3">
<label for="exampleTextarea" class="form-label">Ghi chú</label>
<textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
</div>
</div>2. Select (Danh sách chọn)
Bootstrap 5 cung cấp class form-select để dễ dàng tạo các danh sách chọn (dropdown). Class này định dạng cho select một giao diện đồng bộ với các thành phần khác của form.
Ví dụ
<div class="container">
<div class="mb-3">
<label for="exampleSelect" class="form-label">Chọn quốc gia</label>
<select class="form-select" id="exampleSelect">
<option>Việt Nam</option>
<option>Hoa Kỳ</option>
<option>Nhật Bản</option>
<option>Pháp</option>
</select>
</div>
</div>3. Checks & Radios (Checkbox và Radio)
Checkbox và Radio là những thành phần quan trọng giúp người dùng lựa chọn các tùy chọn trong form. Bootstrap 5 cung cấp các class form-check, form-check-input, và form-check-label để tạo checkbox và radio với kiểu dáng nhất quán.
Ví dụ
<div class="container">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="check1">
<label class="form-check-label" for="check1">Đồng ý với điều khoản</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="radioOptions" id="radio1" checked>
<label class="form-check-label" for="radio1">Lựa chọn 1</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="radioOptions" id="radio2">
<label class="form-check-label" for="radio2">Lựa chọn 2</label>
</div>
</div>4. Range (Thanh trượt)
Range là thành phần giúp người dùng chọn một giá trị trong một khoảng nhất định bằng cách kéo một thanh trượt. Bootstrap 5 hỗ trợ thành phần này với class form-range.
Ví dụ
<div class="container">
<div class="mb-3">
<label for="rangeInput" class="form-label">Chọn khoảng giá trị</label>
<input type="range" class="form-range" id="rangeInput">
</div>
</div>5. Input Group
Input Group trong Bootstrap 5 giúp kết hợp nhiều phần tử khác nhau vào một ô nhập liệu, chẳng hạn như thêm biểu tượng, nút hoặc văn bản vào trước hoặc sau ô nhập. Class input-group tạo ra các nhóm nhập liệu chuyên nghiệp và gọn gàng.
Ví dụ
<div class="container">
<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="Nhập số tiền" aria-label="Amount">
<span class="input-group-text">VND</span>
</div>
</div>6. Floating Labels
Bootstrap 5 giới thiệu Floating Labels để tạo nhãn nổi bên trong ô nhập liệu. Khi người dùng bắt đầu nhập, nhãn sẽ tự động di chuyển lên trên, giúp tiết kiệm không gian và tạo giao diện gọn gàng, hiện đại.
Ví dụ
<div class="container">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">Email</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="floatingPassword" placeholder="Mật khẩu">
<label for="floatingPassword">Mật khẩu</label>
</div>
</div>7. Layout (Bố cục của form)
Bootstrap 5 cung cấp các lựa chọn bố cục form đa dạng để giúp tổ chức form trên trang một cách hợp lý. Có ba kiểu bố cục chính là:
- Form ngang (Horizontal Form): Các thành phần của form được xếp ngang.
- Form cột (Column Form): Form với các phần tử được đặt trong các cột khác nhau.
- Form dạng Inline (Inline Form): Form được xếp ngang và gọn gàng.
Ví dụ Form ngang
<div class="container">
<form>
<div class="row mb-3">
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="staticEmail" placeholder="email@example.com">
</div>
</div>
<div class="row mb-3">
<label for="inputPassword" class="col-sm-2 col-form-label">Mật khẩu</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Nhập mật khẩu">
</div>
</div>
</form>
</div>8. Validation (Xác thực dữ liệu)
Validation giúp kiểm tra tính hợp lệ của dữ liệu trong form trước khi gửi đi. Bootstrap 5 cung cấp các class is-valid và is-invalid để hiển thị thông báo xác thực cho từng phần tử trong form.
Ví dụ Validation
<div class="container">
<form class="needs-validation" novalidate>
<div class="mb-3">
<label for="validationInput" class="form-label">Email</label>
<input type="email" class="form-control is-invalid" id="validationInput" required>
<div class="invalid-feedback">
Vui lòng nhập địa chỉ email hợp lệ.
</div>
</div>
<button class="btn btn-primary" type="submit">Gửi</button>
</form>
</div>Trong ví dụ trên, khi người dùng không nhập địa chỉ email đúng định dạng, hệ thống sẽ hiển thị thông báo lỗi với class invalid-feedback.
Kết luận
Với các thành phần mạnh mẽ và đa dạng của form trong Bootstrap 5 như Form control, Select, Checks & radios, Range, Input group, Floating labels, Layout, và Validation, bạn có thể tạo ra các biểu mẫu đẹp mắt và thân thiện với người dùng. Hãy áp dụng những thành phần này để xây dựng form chuyên nghiệp và tối ưu hóa trải nghiệm người dùng trên website của bạn!
