Người Viết : ViKiMi Editor

Với bất kỳ một website nào việc thể hiện Form trong các chức năng là hoàn toàn gần như phải có. Những Form được thiết kế đơn giản đạt chuẩn và thuận tiện cho sử dụng luôn được ưu tiên. Chuẩn Form biểu mẫu luôn được các nhà cung cấp tìm cách hoàn thiện nhất tới tay người sử dụng.
Bootstrap đã cung cấp rất nhiều Labels, Form Control chuẩn, đồng thời đó là các Form biểu mẫu chuẩn cũng được cung cấp. Form biểu mẫu của Bootstrap với các Layout hoàn toàn phù hợp cho bất kỳ thiết kế website nào. Các Form biểu mẫu với Layout theo chiều dọc, chiều ngang, hay trên một dòng…
THIẾT LẬP MẶC ĐỊNH CỦA BOOTSTRAP CHO CÁC FORM CONTROLS
Tất cả các phần tử kiểu văn bản <input> , <textarea> , <select> có Class .form-control đều có độ rộng là 100%
BOOTSTRAP CUNG CẤP 3 KIỂU BỐ CỤC FORM LAYOUT
Vertical FORM (Kiểu mặc định)
Form dạng dọc
Horizontal FORM
Form dạng ngang
Inline FORM
Form trên một dòng
BOOTSTRAP CUNG CẤP TIÊU CHUẨN CHUNG CHO CẢ 3 BỐ CỤC FORM
+ Bao tất cả Labels và Form Controls trong thẻ <Div class=”form-group”>
+ Thêm Class .form-control vào tất cả các phần tử <input> , <textarea> , và <select>
Sau đây, Chúng ta sẽ đi sâu hơn vào việc trình bầy bố cục Form. Các Bố cục này được trình bày rõ ràng hơn. Với mỗi bố cục sẽ được trình bày khoa học với các thành phần Form Controls, Từng bố cục sẽ phù hợp cho các cách thiết kế khác nhau.
A. TRÌNH BÀY BỐ CỤC VERTICAL FORM – FORM DẠNG DỌC
Phần dưới đây có sử dụng thêm Class .input-group & .input-group-addon để thêm các Icon, text hoặc button cho một trường input field
EX :
<h2>VERTICAL FORM</h2>
<h3>Form đăng nhập</h3>
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email:</label>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="email" type="text" class="form-control" name="email" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="password" type="password" class="form-control" name="password" placeholder="Password">
</div>
</div>
<div class="checkbox">
<label><input type="checkbox" name="remember"> Nhớ truy cập của Tôi</label>
</div>
<button type="submit" class="btn btn-default">Đăng Nhập</button>
</form>

B. TRÌNH BÀY BỐ CỤC HORIZONTAL FORM – FORM DẠNG NGANG
Một Form dạng ngang quy định các nhãn được căn chỉnh bên cạnh trường input / ( input field ) trên các loại màn hình hiển thị lơn hoặc vừa.
Với những màn hình nhỏ ( Từ 767px trở xuống ) thì chúng sẽ chuyển sang dạng thẳng đứng. Và các nhãn sẽ ở trên mỗi trường input.
Các quy tắc khi sử dụng một HORIZONTAL FORM :
+ Thêm Class .form-horizontal vào phần tử <Form>
+ Thêm Class .control-label tới các phần tử <Label>
Chúng ta có thể sử dụng các lớp Grid được xác định trước của Bootstrap để căn chỉnh Labels và nhóm các Form Controls trong bố cục ngang.
Chú ý : Ví dụ dưới đây, sử Class .col-sm-offset-2 để di chuyển cột col-sm-10 qua bên phải 2 cột.
EX :
<h2>HORIZONTAL FORM</h2>
<h3>Form đăng nhập dạng ngang</h3>
<form class="form-horizontal" action="/action_page.php">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="input-group col-sm-10">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="email" type="text" class="form-control" name="email" placeholder="Email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="input-group col-sm-10">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="password" type="password" class="form-control" name="password" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="input-group col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox" name="remember"> Nhớ truy cập của Tôi</label>
</div>
</div>
</div>
<div class="form-group">
<div class="input-group col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>

C. TRÌNH BÀY BỐ CỤC INLINE FORM – FORM TRÊN MỘT DÒNG
FORM INLINE : Form trình bày trên một dòng là tất cả các phần tử sẽ trình bày trên một dòng, và các nhãn cũng sẽ nằm dọc theo.
Chúng ta cũng lưu ý rằng, khi trình bày bố cục form trên một dòng thì bố cục này sẽ chỉ áp dụng được với các cửa sổ xem/ (Viewports) hoặc các màn hình có độ rộng tối thiểu là 768px.
Các quy tắc khi sử dụng INLINE FORM :
+ Thêm Class .form-inline cho phàn tử <Form>
EX :
<h2>INLINE FORM</h2>
<h3>Form đăng nhập trên một dòng</h3>
<form class="form-inline" action="/action_page.php">
<div class="form-group">
<label for="email">Email:</label>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="email" type="text" class="form-control" name="email" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="password" type="password" class="form-control" name="password" placeholder="Password">
</div>
</div>
<div class="checkbox">
<label><input type="checkbox" name="remember"> Nhớ truy cập của Tôi</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>

VỚI THIẾT KẾ BỐ CỤC FORM ĐƠN GIẢN CỦA BOOTSTRAP ĐEM LẠI CHO NGƯỜI DÙNG CÁCH TIẾP CẬP DỄ DÀNG HƠN. ĐỒNG THỜI TIẾT KIỆM CÔNG SỨC VÀ THỜI GIAN CHO NHÀ PHÁT TRIỂN. CÁC THIẾT KẾ HỖ TRỢ CÁC TIỆN ÍCH THUẬN TIỆN CỦA BOOTSTRAP RẤT ĐÁNG SỬ DỤNG VÀ QUAN TÂM. LẬP TRÌNH CÙNG BOOTSTRAP ĐANG CÀNG NGÀY CÀNG ĐƯỢC ƯA CHUỘM HƠN ĐỐI VỚI NHÀ PHÁT TRIỂN VÀ LẬP TRÌNH VIÊN.
LẬP TRÌNH VỚI BOOTSTRAP ĐÃ THÀNH MỘT XU HƯỚNG !