Bootstrap Form
Trong hướng dẫn này, bạn sẽ học cách tạo bố cục biểu mẫu (form) đẹp mắt với Bootstrap.
Tạo biểu mẫu với Bootstrap
Biểu mẫu HTML (HTML Form) là một phần không thể thiếu của các trang web và ứng dụng, nhưng việc tạo bố cục biểu mẫu hoặc tạo kiểu cho các thành phần của biểu mẫu theo cách thủ công từng cái một bằng CSS thường rất nhàm chán và tẻ nhạt.
Bootstrap đơn giản hóa đáng kể quá trình tạo kiểu và căn chỉnh các thành phần của biểu mẫu như label, input, select box, text area, button, v.v. thông qua tập hợp các lớp được định nghĩa trước.
Bootstrap cung cấp ba loại bố cục biểu mẫu khác nhau:
- Biểu mẫu dọc (bố cục biểu mẫu mặc định)
- Biểu mẫu ngang.
- Biểu mẫu trên cùng một hàng.
Phần sau đây sẽ cung cấp cho bạn tổng quan chi tiết về tất cả các bố cục biểu mẫu này cũng như từng thành phần Bootstrap liên quan đến biểu mẫu khác nhau. Chúng ta hãy bắt đầu.
Tạo bố cục biểu mẫu dọc
Để tạo bố cục biểu mẫu dọc (vertical form layout), chỉ cần sử dụng các lớp tiện ích lề (margin) được định nghĩa trước để nhóm các nhãn, điều khiển biểu mẫu, văn bản biểu mẫu tùy chọn và thông báo xác thực biểu mẫu.
Đây là một ví dụ trong đó các điều khiển biểu mẫu được xếp chồng lên nhau theo chiều dọc với các nhãn ở trên cùng.
<form>
<div class="mb-3">
<label class="form-label" for="inputEmail">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
<div class="mb-3">
<label class="form-label" for="inputPassword">Password</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
<div class="mb-3">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="checkRemember">
<label class="form-check-label" for="checkRemember">Remember me</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>Kết quả của ví dụ trên sẽ giống như sau:
Bạn sẽ tìm hiểu về hộp kiểm tùy chỉnh và các điều khiển biểu mẫu tùy chỉnh khác trong chương tiếp theo.
Lưu ý: Tất cả các điều khiển biểu mẫu văn bản, chẳng hạn như
<input>và<textarea>yêu cầu lớp.form-control, trong khi<select>yêu cầu lớp.form-selectcho kiểu chung. Các lớp này cũng làm cho các biểu mẫu kiểm soát rộng 100%. Để thay đổi chiều rộng của chúng hoặc sử dụng chúng nội tuyến, bạn có thể sử dụng các lớp lưới được định nghĩa trước của Bootstrap.
Mẹo: Bạn nên sử dụng các lớp tiện ích căn lề dưới (ví dụ:
mb-2,mb-3, v.v.) để thêm khoảng cách dọc giữa các nhóm biểu mẫu. Và sử dụng lề một hướng xuyên suốt trong biểu mẫu ngăn chặn việc thu hẹp lề và tạo biểu mẫu nhất quán hơn.
Tạo bố cục biểu mẫu ngang
Bạn cũng có thể tạo bố cục biểu mẫu ngang (horizontal form layout) trong đó nhãn và điều khiển biểu mẫu được căn chỉnh cạnh nhau bằng cách sử dụng các lớp lưới Bootstrap.
Để tạo bố cục biểu mẫu ngang, hãy thêm lớp .row trên các nhóm biểu mẫu và sử dụng các lớp lưới .col-*-* để chỉ định chiều rộng của nhãn và điều khiển của bạn.
Ngoài ra, hãy đảm bảo áp dụng lớp .col-form-label trên các phần tử <label> để chúng được căn giữa theo chiều dọc với các điều khiển biểu mẫu được liên kết của chúng. Hãy xem một ví dụ:
<form>
<div class="row mb-3">
<label for="inputEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="row mb-3">
<label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="row mb-3">
<div class="col-sm-10 offset-sm-2">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="checkRemember">
<label class="form-check-label" for="checkRemember">Remember me</label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-10 offset-sm-2">
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</div>
</form>Kết quả của ví dụ trên sẽ giống như sau:
Tạo bố cục biểu mẫu trên cùng một hàng
Đôi khi bạn có thể muốn hiển thị một loạt các điều khiển biểu mẫu và các nút trong một hàng ngang để thu gọn bố cục. Bạn có thể làm điều này dễ dàng bằng cách sử dụng các lớp lưới của Bootstrap.
Hãy xem ví dụ sau và xem nó thực sự hoạt động như thế nào:
<form>
<div class="row align-items-center g-3">
<div class="col-auto">
<label class="visually-hidden" for="inputEmail">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
<div class="col-auto">
<label class="visually-hidden" for="inputPassword">Password</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
<div class="col-auto">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="checkRemember">
<label class="form-check-label" for="checkRemember">Remember me</label>
</div>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</div>
</form>Kết quả của ví dụ trên sẽ giống như sau:
Mẹo: Bạn nên bao gồm nhãn cho mọi input của biểu mẫu nếu không trình đọc màn hình sẽ gặp khó khăn với biểu mẫu của bạn. Tuy nhiên, trong trường hợp bố trí biểu mẫu trên cùng một hàng, bạn có thể ẩn các nhãn bằng cách sử dụng lớp
.visually-hiddenđể chỉ trình đọc màn hình có thể đọc nó.
Tạo bố cục biểu mẫu đáp ứng
Bạn cũng có thể làm cho các biểu mẫu của mình đáp ứng thông qua việc sử dụng các lớp lưới với các điểm ngắt cụ thể.
Ví dụ sau sẽ tạo một biểu mẫu được bố trí trên cùng một hàng trên các thiết bị trung bình trở lên (tức là chiều rộng khung nhìn ≥ 768px), nhưng sẽ trở nên xếp chồng theo chiều dọc trên các khung nhìn nhỏ hơn.
<form>
<div class="row align-items-center g-3">
<div class="col-md-auto col-12">
<label class="form-label d-md-none" for="inputEmail">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
<div class="col-md-auto col-12">
<label class="form-label d-md-none" for="inputPassword">Password</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
<div class="col-md-auto col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="checkRemember">
<label class="form-check-label" for="checkRemember">Remember me</label>
</div>
</div>
<div class="col-md-auto col-12">
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</div>
</form>Tạo điều khiển biểu mẫu tĩnh
Có thể xảy ra tình huống khi bạn chỉ muốn hiển thị giá trị văn bản thuần túy bên cạnh nhãn biểu mẫu thay vì điều khiển biểu mẫu đang hoạt động. Bạn có thể làm điều này dễ dàng bằng cách thay thế lớp .form-control bằng .form-control-plaintext và áp dụng thuộc tính readonly.
Lớp .form-control-plaintext loại bỏ kiểu mặc định khỏi trường biểu mẫu, nhưng vẫn giữ đúng lề và phần đệm. Hãy xem một ví dụ:
<form>
<div class="row mb-3">
<label for="inputEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" readonly class="form-control-plaintext" id="inputEmail" value="[email protected]">
</div>
</div>
<div class="row mb-3">
<label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="row mb-3">
<div class="col-sm-10 offset-sm-2">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="checkRemember">
<label class="form-check-label" for="checkRemember">Remember me</label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-10 offset-sm-2">
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</div>
</form>Kết quả của ví dụ trên sẽ giống như sau:
Định cỡ cột của điều khiển biểu mẫu
Bạn cũng có thể khớp kích thước của các input, các textarea và các hộp chọn với kích thước cột lưới Bootstrap. Đơn giản, hãy đặt các điều khiển biểu mẫu của bạn (tức là các phần tử <input>, <textarea> và <select>) trong các cột lưới.
Hãy thử ví dụ sau để hiểu về cơ bản nó hoạt động như thế nào:
<div class="row g-3">
<div class="col-6">
<input type="text" class="form-control" placeholder="City">
</div>
<div class="col-4">
<select class="form-select">
<option>State</option>
</select>
</div>
<div class="col-2">
<input type="text" class="form-control" placeholder="Zip">
</div>
</div>Kết quả của ví dụ trên sẽ giống như sau:
Đặt hộp kiểm và nút radio trên cùng một hàng
Theo mặc định, bất kỳ số hộp kiểm và nút radio tùy chỉnh nào ở gần nhau ngay lập tức sẽ được xếp chồng lên nhau theo chiều dọc và có khoảng cách thích hợp với lớp .form-check.
Tuy nhiên, bạn cũng có thể đặt các hộp kiểm và các nút radio tùy chỉnh này trong cùng một hàng bằng cách chỉ cần thêm lớp .form-check-inline vào phần tử .form-check, như sau:
<div class="row">
<div class="col-12">
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" name="hobbies" id="checkMusic">
<label class="form-check-label" for="checkMusic">Music</label>
</div>
<div class="form-check form-check-inline ms-3">
<input type="checkbox" class="form-check-input" name="hobbies" id="checkTravel" checked>
<label class="form-check-label" for="checkTravel">Travel</label>
</div>
<div class="form-check form-check-inline ms-3">
<input type="checkbox" class="form-check-input" name="hobbies" id="checkReading" checked>
<label class="form-check-label" for="checkReading">Reading</label>
</div>
</div>
</div>Kết quả của ví dụ trên sẽ giống như sau:
Tương tự, bạn có thể đặt các nút radio vào cùng một hàng, như được hiển thị trong ví dụ sau:
<div class="row">
<div class="col-12">
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" name="gender" id="radioMale" checked>
<label class="form-check-label" for="radioMale">Male</label>
</div>
<div class="form-check form-check-inline ms-3">
<input type="radio" class="form-check-input" name="gender" id="radioFemale">
<label class="form-check-label" for="radioFemale">Female</label>
</div>
</div>
</div>Kết quả của ví dụ trên sẽ giống như sau:
Thêm văn bản trợ giúp vào điều khiển biểu mẫu
Đặt văn bản trợ giúp cho các điều khiển biểu mẫu theo cách hiệu quả để hướng dẫn người dùng nhập dữ liệu chính xác vào biểu mẫu. Bạn có thể đặt khối văn bản trợ giúp cho một điều khiển biểu mẫu bằng cách sử dụng lớp .form-text. Khối văn bản trợ giúp thường được hiển thị ở cuối điều khiển. Đây là một ví dụ:
<label class="form-label" for="inputPassword">Password</label>
<input type="password" class="form-control" id="inputPassword">
<div class="form-text">
Must be 8-20 characters long, contain letters, numbers and special characters, but must not contain spaces.
</div>Kết quả của ví dụ trên sẽ giống như sau:
Tương tự, bạn cũng có thể đặt văn bản trợ giúp vào cùng một hàng bằng cách sử dụng phần tử <small>. Không cần sử dụng .form-text trong trường hợp này. Ví dụ sau đây cho thấy cách triển khai điều này:
<div class="row align-items-center g-3">
<div class="col-auto">
<label class="col-form-label" for="inputPassword">Password</label>
</div>
<div class="col-auto">
<input type="password" class="form-control" id="inputPassword">
</div>
<div class="col-auto">
<span class="form-text">Must be 8-20 characters long.</span>
</div>
</div>Kết quả của ví dụ trên sẽ giống như sau:
Tạo điều khiển biểu mẫu bị vô hiệu hóa
Để tắt các điều khiển biểu mẫu riêng lẻ, chẳng hạn như <input>, <textarea>, <select> chỉ cần thêm các thuộc tính cho chúng và Bootstrap sẽ thực hiện phần còn lại. Đây là một ví dụ:
<input type="text" class="form-control mb-3" placeholder="Disabled input" disabled>
<textarea class="form-control mb-3" placeholder="Disabled textarea" disabled></textarea>
<select class="form-select" disabled>
<option>Disabled select</option>
</select>Kết quả của ví dụ trên sẽ giống như sau:
Tuy nhiên, nếu bạn muốn vô hiệu hóa tất cả các điều khiển trong <form> cùng một lúc, hãy đặt chúng bên trong một phần tử <fieldset> và áp dụng thuộc tính disabled trên phần tử đó, như thể hiện trong ví dụ sau:
<form>
<fieldset disabled>
<div class="row mb-3">
<label for="inputEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="row mb-3">
<label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="row mb-3">
<div class="col-sm-10 offset-sm-2">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="checkRemember">
<label class="form-check-label" for="checkRemember">Remember me</label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-10 offset-sm-2">
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</div>
</fieldset>
</form>Kết quả của ví dụ trên sẽ giống như sau:
Tạo input chỉ đọc
Bạn cũng có thể thêm thuộc tính boolean readonly trên một phần tử input hoặc textarea để ngăn việc sửa đổi giá trị của nó. Các input chỉ đọc xuất hiện trong nền sáng hơn (giống như các input bị vô hiệu hóa), nhưng nó vẫn giữ lại con trỏ văn bản tiêu chuẩn. Hãy xem ví dụ sau để xem nó hoạt động như thế nào:
<input type="text" class="form-control mb-2" value="This input value cannot be changed." readonly>
<textarea rows="3" class="form-control" readonly>This textarea value cannot be changed.</textarea>Kết quả của ví dụ trên sẽ giống như sau:
Chiều cao của điều khiển biểu mẫu
Bạn có thể dễ dàng thay đổi chiều cao của đầu vào văn bản và chọn các hộp để phù hợp với kích thước nút.
Sử dụng các lớp định cỡ chiều cao của điều khiển biểu mẫu, chẳng hạn như .form-control-lg và .form-control-sm trên các phần tử input để tạo kích thước lớn hơn hoặc nhỏ hơn. Đây là một ví dụ:
<div class="row mb-3">
<label class="col-sm-2 col-form-label col-form-label-lg">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-lg" placeholder="Large input">
</div>
</div>
<div class="row mb-3">
<label class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" placeholder="Default input">
</div>
</div>
<div class="row">
<label class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-sm" placeholder="Small input">
</div>
</div>Kết quả của ví dụ trên sẽ giống như sau:
Mẹo: Đảm bảo áp dụng lớp
.col-form-label-lghoặc.col-form-label-smtrên các phần tử<label>hoặc<legend>để thay đổi kích thước nhãn một cách chính xác theo các điều khiển biểu mẫu.
Tương tự, bạn có thể tạo các biến thể lớn hơn và nhỏ hơn của các hộp chọn bằng cách sử dụng các lớp .form-select-lg và .form-select-sm trên phần tử <select>, như sau:
<div class="row mb-3">
<label class="col-sm-2 col-form-label col-form-label-lg">State</label>
<div class="col-sm-10">
<select class="form-select form-select-lg">
<option>Large select</option>
</select>
</div>
</div>
<div class="row mb-3">
<label class="col-sm-2 col-form-label">State</label>
<div class="col-sm-10">
<select class="form-select">
<option>Default select</option>
</select>
</div>
</div>
<div class="row">
<label class="col-sm-2 col-form-label col-form-label-sm">State</label>
<div class="col-sm-10">
<select class="form-select form-select-sm">
<option>Small select</option>
</select>
</div>
</div>Kết quả của ví dụ trên sẽ giống như sau:
Xác thực biểu mẫu Bootstrap
Bootstrap cung cấp một cách dễ dàng và nhanh chóng để xác thực các biểu mẫu web ở phía máy khách. Nó sử dụng API xác thực biểu mẫu gốc của trình duyệt để xác thực biểu mẫu. Các kiểu xác thực biểu mẫu được áp dụng thông qua các lớp CSS giả :invalid và :valid. Nó áp dụng cho các phần tử <input>, <select> và <textarea>.
Hãy thử ví dụ sau và xem nó thực sự hoạt động như thế nào:
<form class="needs-validation" novalidate>
<div class="mb-3">
<label class="form-label" for="inputEmail">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email" required>
<div class="invalid-feedback">Please enter a valid email address.</div>
</div>
<div class="mb-3">
<label class="form-label" for="inputPassword">Password</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Password" required>
<div class="invalid-feedback">Please enter your password to continue.</div>
</div>
<div class="mb-3">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="checkRemember">
<label class="form-check-label" for="checkRemember">Remember me</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>Lưu ý: Đối với thông báo xác thực biểu mẫu Bootstrap tùy chỉnh, bạn sẽ cần tắt chú giải công cụ phản hồi mặc định của trình duyệt bằng cách thêm thuộc tính boolean
novalidatevào phần tử<form>. Tuy nhiên, nó vẫn cung cấp quyền truy cập vào các API xác thực biểu mẫu trong JavaScript.
Đây là mã JavaScript tùy chỉnh hiển thị thông báo lỗi và vô hiệu hóa việc gửi biểu mẫu nếu có các trường không hợp lệ.
<script>
// Self-executing function
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>Kết quả của ví dụ trên sẽ giống như sau:
Mẹo: Để đặt lại giao diện của biểu mẫu như ban đầu, hãy xóa lớp
.was-validatedkhỏi phần tử<form>sau khi submit. Lớp này được Bootstrap áp dụng tự động trên biểu mẫu khi bạn nhấp vào nút submit.
Nếu bạn yêu cầu xác thực phía máy chủ, bạn có thể sử dụng các lớp thay thế là .is-invalid và .is-valid để chỉ ra các trường biểu mẫu không hợp lệ và hợp lệ. Các lớp .invalid-feedback và .valid-feedback cũng được sử dụng để hỗ trợ với các lớp này. Hãy xem ví dụ sau:
<form>
<div class="mb-3">
<label class="form-label" for="inputEmail">Email</label>
<input type="email" class="form-control is-valid" id="inputEmail" placeholder="Email" value="[email protected]" required>
<div class="valid-feedback">Good! Your email address looks valid.</div>
</div>
<div class="mb-3">
<label class="form-label" for="inputPassword">Password</label>
<input type="password" class="form-control is-invalid" id="inputPassword" placeholder="Password" required>
<div class="invalid-feedback">Opps! You have entered an invalid password.</div>
</div>
<div class="mb-3">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="checkRemember">
<label class="form-check-label" for="checkRemember">Remember me</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>Kết quả của ví dụ trên sẽ giống như sau:
Ngoài ra, bạn có thể bọc các lớp .{valid|invalid}-feedback với các lớp .{valid|invalid}-tooltip để hiển thị văn bản phản hồi xác thực theo kiểu chú giải công cụ.
Ngoài ra, hãy đảm bảo áp dụng kiểu position: relative hoặc lớp .position-relative trên phần tử cha để định vị tooltip phản hồi thích hợp. Đây là một ví dụ:
<form>
<div class="mb-3 position-relative">
<label class="form-label" for="inputEmail">Email</label>
<input type="email" class="form-control is-valid" id="inputEmail" placeholder="Email" value="[email protected]" required>
<div class="valid-tooltip">Good! Your email address looks valid.</div>
</div>
<div class="mb-3 position-relative">
<label class="form-label" for="inputPassword">Password</label>
<input type="password" class="form-control is-invalid" id="inputPassword" placeholder="Password" required>
<div class="invalid-tooltip">Opps! You have entered an invalid password.</div>
</div>
<div class="mb-3">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="checkRemember">
<label class="form-check-label" for="checkRemember">Remember me</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>Kết quả của ví dụ trên sẽ giống như sau:
Điều khiển biểu mẫu được hỗ trợ trong Bootstrap
Bootstrap bao gồm hỗ trợ cho tất cả các điều khiển biểu mẫu HTML tiêu chuẩn cũng như các loại đầu vào HTML5 mới như datetime, number, email, url, search, range, color, url, v.v. Ví dụ sau sẽ cho bạn thấy cách sử dụng của các điều khiển biểu mẫu tiêu chuẩn với Bootstrap.
<form>
<div class="row mb-3">
<label class="col-sm-3 col-form-label" for="firstName">First Name:</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="firstName" placeholder="First Name" required>
</div>
</div>
<div class="row mb-3">
<label class="col-sm-3 col-form-label" for="lastName">Last Name:</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="lastName" placeholder="Last Name" required>
</div>
</div>
<div class="row mb-3">
<label class="col-sm-3 col-form-label" for="emailAddress">Email Address:</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="emailAddress" placeholder="Email Address" required>
</div>
</div>
<div class="row mb-3">
<label class="col-sm-3 col-form-label" for="phoneNumber">Mobile Number:</label>
<div class="col-sm-9">
<input type="number" class="form-control" id="phoneNumber" placeholder="Phone Number" required>
</div>
</div>
<div class="row mb-3">
<label class="col-sm-3 col-form-label">Date of Birth:</label>
<div class="col-sm-3">
<select class="form-select" required>
<option>Date</option>
</select>
</div>
<div class="col-sm-3">
<select class="form-select" required>
<option>Month</option>
</select>
</div>
<div class="col-sm-3">
<select class="form-select">
<option>Year</option>
</select>
</div>
</div>
<div class="row mb-3">
<label class="col-sm-3 col-form-label" for="postalAddress">Postal Address:</label>
<div class="col-sm-9">
<textarea rows="3" class="form-control" id="postalAddress" placeholder="Postal Address" required></textarea>
</div>
</div>
<div class="row mb-3">
<label class="col-sm-3 col-form-label" for="ZipCode">Zip Code:</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="ZipCode" placeholder="Zip Code" required>
</div>
</div>
<div class="row mb-3">
<label class="col-sm-3 col-form-label" for="uploadImage">Upload Image:</label>
<div class="col-sm-9">
<input type="file" class="form-control" id="uploadImage">
</div>
</div>
<div class="row mb-3">
<label class="col-sm-3 col-form-label">Gender:</label>
<div class="col-sm-9 mt-2">
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" name="gender" id="radioMale">
<label class="form-check-label" for="radioMale">Male</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" name="gender" id="radioFemale">
<label class="form-check-label" for="radioFemale">Female</label>
</div>
</div>
</div>
<div class="row mb-3">
<div class="col-sm-9 offset-sm-3">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="checkAgree" value="agree">
<label class="form-check-label" for="checkAgree">I agree to the <a href="#">Terms and Conditions</a></label>
</div>
</div>
</div>
<div class="row mb-3">
<div class="col-sm-9 offset-sm-3">
<input type="submit" class="btn btn-primary" value="Submit">
<input type="reset" class="btn btn-secondary ms-2" value="Reset">
</div>
</div>
</form>