Tự học Bootstrap - Cơ bản - bài 22 - Định dạng Form

Các thiết lập mặc định của Bootstrap

Các điều khiển trong Form tự động nhận 01 vài định dạng chung của Bootstrap:

Tất cả các phần tử nhập liệu <input>, <textarea>, và <select> nếu dùng lớp .form-control sẽ có bề rộng 100%.

---

Định dạng form Bootstrap

Bootstrap cung cấp 03 loại form layouts:

• Dọc (mặc định).
• Ngang.
• Trên cùng 01 hàng.

Các quy tắc cơ bản của 03 dạng form layouts này:

• Bao bọc các labels và các điều khiển là thẻ <div class="form-group"> (cần thiết để tối ưu khoảng trống)
• Thêm lớp .form-control vào tất cả các thẻ nhập liệu <input>, <textarea>, và <select>

---

Định dạng form Bootstrap theo chiều dọc (mặc định)

Ví dụ sau tạo ra 01 form dọc với 02 ô nhập liệu , 01 checkbox, và 01 nút submit.

<form>
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

---

Form Bootstrap trên cùng 01 hàng

Tất cả các phần tử trong form được đặt trên cùng 01 hàng, canh lề trái , và các nhãn được đặt kế bên.

Ghi chú: dạng form trên 01 hàng này chỉ áp dụng đối với các báo cáo viewports có bề rộng ít nhất 768px!

Các quy tắc bổ sung cho dạng forrm trên 01 dòng:

• Thêm lớp .form-inline vào thẻ <form>

Ví dụ sau tạo form nằm trên cùng 01 dòng với 02 vùng nhập liệu, 01 checkbox, và 01 nút submit:

<form class="form-inline">
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Mẹo: Nếu bạn không gắn nhãn cho từng phần tử input, màn hình phần mềm screenreader sẽ gặp rắc rối. Bạn có thể ẩn các nhãn trên tất cả thiết bị ngoại trừ phần mềm screen reader bằng lớp .sr-only

Ví dụ:

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Form Bootstrap ngang

01 form ngang đứng độc lập với các form khác và các phần tử HTML khác.

Các quy tắc bổ sung cho form ngang:

• Thêm lớp .form-horizontal vào thẻ <form>
• Thêm lớp .control-label vào tất cả các phần tử <label>

Mẹo: Dùng các lớp định dạng lưới Bootstrap để canh lề các nhãn và các điều khiển form trong 01 layout ngang.

Ví dụ sau tạo 01 form ngang với 02 ô nhập liệu, 01 checkbox, và 01 nút submit.

<form class="form-horizontal">
  <div class="form-group">
    <label class="control-label col-sm-2" for="email">Email:</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2" for="pwd">Password:</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label><input type="checkbox"> Remember me</label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Submit</button>
    </div>
  </div>
</form>

Lophocvitinh.COM***Tự học Bootstrap - Phần cơ... bởi minh-nguyen48