[Bootstrap] Phần 20: Thiết kế Form

Bài viết này sẽ trình bày về cách thiết kế các form trong Bootstrap.

Các thiết lập mặc định
Các điều khiển form tự động nhận 1 số phong cách toàn cục trong Bootstrap. Tất cả các phần tử input, textarea, select khi dùng với lớp .form-control đều có độ rộng mặc định là 100%.

Bố cục Form trong Bootstrap
Bootstrap cung cấp 3 dạng bố cục form:

• Form theo hàng ngang (mặc định)
• Form theo hàng dọc
• Form trên 1 dòng

Các quy định áp dụng cho 3 dạng bố cục form

• Bao các nhãn và các điều khiển trong <div class="form-group"> (cần cho việc tối ưu hóa không gian)
• Thêm lớp form-control cho tất cả phần tử <input>, <textarea>, và <select>

Form theo hàng dọc (mặc định)
Theo cách này, các thành phần trong form được hiển thị theo hàng dọc, tuần tự từ trên xuống dưới.

<div class="container">
<form>
  <div class="form-group">
	<h3>Form theo hàng dọc - dammio.com</h3>
    <label for="email">Địa chỉ email:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Mật khẩu:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Nhớ tài khoản</label>
  </div>
  <button type="submit" class="btn btn-default">Đăng nhập</button>
</form>
</div>

Form trên 1 dòng
Ở dạng form này, tất cả các phần tử đều được nằm trên 1 dòng, canh từ trái sang. Để thực hiện, chúng ta chỉ cần thêm lớp .form-inline vào phần tử form. Lưu ý là dạng form này chỉ áp dụng cho màn hình có kích thước ít nhất là 768px.

<div class="container">
<form class="form-inline">
<h3>Form trên 1 dòng - dammio.com</h3>
  <div class="form-group">
	
    <label for="email">Địa chỉ email:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Mật khẩu:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Nhớ tài khoản</label>
  </div>
  <button type="submit" class="btn btn-default">Đăng nhập</button>
</form>
</div>

Form theo hàng ngang
Một form theo hàng ngang là dạng form được chia thành hàng ngang, thông thường nhãn văn bản ở cột bên trái và các điều khiển form ở cột bên phải tương ứng nhau theo hàng ngang.

Để thực hiện, chúng ta thêm lớp .form-horizontal vào phần tử form, thêm lớp .control-label vào tất cả nhãn label. Sau đó, sử dụng các lớp lưới trong Bootstrap để chia và canh các nhãn và các nhóm điều khiển form theo bố cục hàng ngang.

<div class="container">
<form class="form-horizontal">
<h3>Form theo hàng ngang - dammio.com</h3>
  <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="Điền email">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2" for="pwd">Mật khẩu:</label>
    <div class="col-sm-10"> 
      <input type="password" class="form-control" id="pwd" placeholder="Điền mật khẩu">
    </div>
  </div>
  <div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label><input type="checkbox"> Nhớ tài khoản</label>
      </div>
    </div>
  </div>
  <div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Đăng nhập</button>
    </div>
  </div>
</form>
</div>

Kết luận: bài viết đã giúp các bạn hiểu các thông số mặc định của form ở Bootstrap, đồng thời cách tạo bố cục form theo 3 kiểu: form theo hàng dọc, form trên 1 dòng, và form theo hàng ngang.