EnglishTrong thiết kế web, form (biểu mẫu) là công cụ giúp người dùng nhập dữ liệu và tương tác với trang web. Bootstrap 5 cung cấp nhiều Form Controls (thành phần kiểm soát form) để định dạng và tối ưu hóa biểu mẫu một cách dễ dàng. Các thành phần như các ô nhập liệu, textarea, và các trường chọn được thiết kế để tạo trải nghiệm người dùng nhất quán và đẹp mắt. Trong bài viết này, CodeTutHub sẽ hướng dẫn bạn cách sử dụng các Form Controls chính trong Bootstrap 5, bao gồm các ô nhập liệu, trường chọn, checkbox, radio, và nhiều hơn nữa.
1. Form Control cơ bản: Input và Textarea
Bootstrap 5 cung cấp class form-control để định dạng các thành phần input và textarea, giúp tạo nên giao diện đồng nhất và dễ nhìn.
Ví dụ Input và Textarea
<div class="mb-3">
<label for="emailInput" class="form-label">Địa chỉ Email</label>
<input type="email" class="form-control" id="emailInput" placeholder="Nhập email của bạn">
</div>
<div class="mb-3">
<label for="messageTextarea" class="form-label">Nội dung tin nhắn</label>
<textarea class="form-control" id="messageTextarea" rows="3" placeholder="Nhập tin nhắn"></textarea>
</div>Trong ví dụ này, class form-control giúp tạo ô nhập liệu và textarea với phong cách thống nhất, đảm bảo trải nghiệm nhất quán cho người dùng.
2. Input với kiểu dữ liệu khác nhau
Bootstrap 5 hỗ trợ nhiều loại input khác nhau để đáp ứng nhu cầu nhập liệu đa dạng. Các loại input phổ biến bao gồm:
text: Nhập văn bản cơ bản.email: Nhập địa chỉ email.password: Nhập mật khẩu.number: Nhập số.date: Nhập ngày.file: Nhập tập tin.
Ví dụ các kiểu dữ liệu input
<div class="mb-3">
<label for="passwordInput" class="form-label">Mật khẩu</label>
<input type="password" class="form-control" id="passwordInput" placeholder="Nhập mật khẩu">
</div>
<div class="mb-3">
<label for="numberInput" class="form-label">Số lượng</label>
<input type="number" class="form-control" id="numberInput" placeholder="Nhập số lượng">
</div>
<div class="mb-3">
<label for="fileInput" class="form-label">Tải lên tập tin</label>
<input type="file" class="form-control" id="fileInput">
</div>3. Select (Danh sách chọn)
Thành phần select giúp tạo danh sách chọn dạng dropdown. Class form-select trong Bootstrap giúp định dạng danh sách chọn một cách đồng bộ với các thành phần form khác.
Ví dụ Select
<div class="mb-3">
<label for="countrySelect" class="form-label">Chọn quốc gia</label>
<select class="form-select" id="countrySelect">
<option selected>Chọn quốc gia của bạn</option>
<option>Việt Nam</option>
<option>Hoa Kỳ</option>
<option>Nhật Bản</option>
<option>Pháp</option>
</select>
</div>4. Checks & Radios (Checkbox và Radio)
Bootstrap 5 cung cấp các class form-check, form-check-input, và form-check-label để tạo các checkbox và radio button đẹp mắt và dễ tùy chỉnh.
Ví dụ Checkbox và Radio
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="termsCheck">
<label class="form-check-label" for="termsCheck">Đồng ý với điều khoản</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="optionsRadios" id="option1" value="option1" checked>
<label class="form-check-label" for="option1">Lựa chọn 1</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="optionsRadios" id="option2" value="option2">
<label class="form-check-label" for="option2">Lựa chọn 2</label>
</div>5. Range (Thanh trượt)
Thanh trượt (Range) là thành phần cho phép người dùng chọn một giá trị trong một khoảng xác định. Class form-range của Bootstrap 5 giúp định dạng thanh trượt đơn giản và gọn gàng.
Ví dụ Range
<div class="mb-3">
<label for="customRange" class="form-label">Chọn giá trị</label>
<input type="range" class="form-range" id="customRange">
</div>6. Input Group
Bootstrap 5 cung cấp thành phần Input Group để kết hợp các phần tử, chẳng hạn như nút hoặc biểu tượng, vào trong ô nhập liệu. Class input-group giúp tạo input group chuyên nghiệp và hiện đại.
Ví dụ Input Group
<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>7. Floating Labels
Floating Labels giúp nhãn (label) tự động di chuyển lên trên khi người dùng nhập nội dung vào ô nhập liệu, tạo nên giao diện hiện đại và tiết kiệm không gian.
Ví dụ Floating Labels
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingEmail" placeholder="name@example.com">
<label for="floatingEmail">Địa chỉ email</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">Mật khẩu</label>
</div>8. Validation (Xác thực dữ liệu)
Bootstrap 5 hỗ trợ các class tiện ích như is-valid và is-invalid để giúp bạn xác thực dữ liệu trong form một cách nhanh chóng và dễ hiểu. Điều này giúp người dùng nhập liệu chính xác và cung cấp trải nghiệm tốt hơn.
Ví dụ Validation
<form class="needs-validation" novalidate>
<div class="mb-3">
<label for="validationEmail" class="form-label">Email</label>
<input type="email" class="form-control is-invalid" id="validationEmail" 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>Trong ví dụ này, khi người dùng nhập không đúng định dạng email, hệ thống sẽ hiển thị thông báo lỗi giúp người dùng sửa lỗi dễ dàng.
Kết luận
Bootstrap 5 cung cấp rất nhiều công cụ hữu ích để định dạng và kiểm soát các thành phần trong form. Từ các input cơ bản, checkbox, radio đến các thành phần nâng cao như Input Group và Floating Labels, Bootstrap 5 giúp bạn tạo nên các biểu mẫu chuyên nghiệp, nhất quán và thân thiện với người dùng. Hãy thử áp dụng các Form Controls trong bài viết này để xây dựng biểu mẫu hiệu quả và tối ưu trên trang web của bạn!
