Bootstrap 5 biểu mẫu

Hình thức biểu mẫu đ堆叠

Tất cả các phần tử <input> và <textarea> được thiết lập với lớp .form-control đều nhận được phong cách biểu mẫu chính xác:

Mô hình

<form action="/action_page.php">
  <div class="mb-3 mt-3">
    <label for="email" class="form-label">Email:</label>
    <input type="email" class="form-control" id="email" placeholder="Vui lòng nhập địa chỉ email" name="email">
  </div>
  <div class="mb-3">
    <label for="pwd" class="form-label">Mật khẩu：</label>
    <input type="password" class="form-control" id="pwd" placeholder="Vui lòng nhập mật khẩu" name="pswd">
  </div>
  <div class="form-check mb-3">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox" name="remember"> Nhớ tôi
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Gửi</button>
</form>

Thử ngay

Đồng thời, xin hãy chú ý rằng chúng tôi đã thêm .form-label của lớp để đảm bảo lấp đầy đúng cách.

các hộp kiểm tra có các dấu hiệu khác nhau. Chúng được thiết lập .form-check của các yếu tố bao bọc lớp. Label được thiết lập .form-check-label của lớp, trong khi các hộp kiểm tra và nút chọn một lần sử dụng .form-check-input。

Textarea

Mô hình

<label for="comment">Bình luận：</label>
<textarea class="form-control" rows="5" id="comment" name="text"></textarea>

Thử ngay

dòng biểu mẫu / lưới (biểu mẫu trong dòng)

Nếu bạn muốn các yếu tố biểu mẫu hiển thị song song, hãy sử dụng .row và .col：

Mô hình

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="Vui lòng nhập địa chỉ email" name="email">
    </div>
    <div class="col">
      <input type="password" class="form-control" placeholder="Vui lòng nhập mật khẩu" name="pswd">
    </div>
  </div>
</form>

Thử ngay

Bạn sẽ được Bootstrap lưới Học thêm về cột và hàng trong chương này.

Kích thước điều khiển biểu mẫu

Bạn có thể .form-control-lg hoặc .form-control-sm Thay đổi .form-control Kích thước của thiết bị nhập:

Mô hình

<input type="text" class="form-control form-control-lg" placeholder="Thiết bị nhập lớn">
<input type="text" class="form-control" placeholder="Thiết bị nhập thông thường">
<input type="text" class="form-control form-control-sm" placeholder="Thiết bị nhập nhỏ">

Thử ngay

Vô hiệu hóa và chỉ đọc

Hãy sử dụng thuộc tính disabled và/hoặc readonly để vô hiệu hóa trường nhập:

Mô hình

<input type="text" class="form-control" placeholder="Thiết bị nhập thông thường">
<input type="text" class="form-control" placeholder="Thiết bị nhập bị vô hiệu hóa" disabled>
<input type="text" class="form-control" placeholder="Thiết bị nhập chỉ đọc" readonly>

Thử ngay

Thiết bị nhập văn bản thuần túy

Hãy sử dụng .form-control-plaintext Sử dụng loại để thiết lập phong cách của trường nhập không có viền, nhưng giữ lại khoảng cách ngoài và trong hợp lý:

Mô hình

<input type="text" class="form-control-plaintext" placeholder="Thiết bị nhập văn bản thuần túy">
<input type="text" class="form-control" placeholder="Thiết bị nhập thông thường">

Thử ngay

Chọn màu

Để thiết lập đúng phong cách nhập type="color", hãy sử dụng .form-control-color Loại:

Mô hình

<input type="color" class="form-control form-control-color" value="#CCCCCC">

Thử ngay