Thiết kế Form trong Bootstrap 3

Bài viết này chúng ta sẽ tiếp tục tìm hiểu về cách thiết kế các form trong Bootstrap 3 các bạn nhé

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

Các điều khiển biểu mẫu tự động nhận một số kiểu chung với Bootstrap:

Tất cả các phần tử như  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 như sau:

• Phải 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)

Form theo hàng dọc là Form có các phần tử  đượ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 HocTV</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"> Ghi 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. Chỉ cần thêm lớp .form-inline vào phần tử form.Một điều các bạn cần 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>Ví DỤ Form trên 1 dòng</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"> Ghi 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 chính là dạng form được chia thành hàng ngang. Thông thường nhãn văn bản để chú thích nằm ở 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>Ví Dụ Form theo hàng ngang</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="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">Ghi 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 quả:

Lời kết:

Trên đây là các cách trình bày form trong Bootstrap 3, nếu có gì thắc mắc các bạn hãy comment bên dưới nhé. Chúc các bạn học tốt!