Người Viết : ViKiMi Editor

Form Controls là thành phần không thể thiếu với các website. Đặc biệt các trang web có giao dịch lớn mỗi ngày, các Form biểu mẫu dữ liệu là luôn cần thiết. Form Controls là thành phần xây dựng nên Form. Do đó, khi thiết kế một website dù lớn hay nhỏ, Form Controls luôn được sử dụng để đảm bảo tối ưu hoạt động của website. Giúp tăng tính trao đổi thông tin cho website.
Các website luôn cần các thông tin phản hồi được trao đổi thông qua Form dữ liệu. Thông tin trao đổi càng nhiều mang lại tính lợi nhuận và phát triển cao. Form là một trong những thành phần luôn được yêu thích và không thể thiếu. Tận dụng các tính năng của Form biểu mẫu sẽ có nhiều lựa chọn hơn trong các hoạt động.
Đi sâu và nắm bắt Form là một yêu cầu luôn cần với các Deverloper chuyên nghiệp. Chúng ta sẽ đề cập nhiều hơn về Form Controls ở bên dưới.
Bootstrap hỗ trợ các loại Controls như sau :
- input
- textarea
- checkbox
- radio
- select
Tất cả các Controls trên đều là Form Controls.
Bootstrap hỗ trợ tất cả các đầu vào của HTML5 như : text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.
1 + Với Bootstrap chúng ta có thể xử lý input dưới dạng nhập dữ liệu đầu vào là Text và Passwword :
EX :
<h2>Xử Lý Với Form Control Là: Input</h2>
<p>Input sẽ có 2 kiểu nhập dữ liệu đầu vào là text và password:</p>
<form>
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
</form>

2 + Với Bootstrap chúng ta cũng có thể nhập nhập dữ liệu đầu vào với một Textarea
EX :
<h2>Xử Lý Form Control Là: textarea</h2>
<p>Textarea nhập địa chỉ:</p>
<form>
<div class="form-group">
<label for="comment">Address:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
</form>

3 + Với Bootstrap Chúng ta lựa chọn dữ liệu từ Checkboxes
Khi cung cấp cho người dùng các lựa chọn, cho phép người dùng được chọn 1 hoặc nhiều hơn 1 lựa chọn.
Khi đó, việc sử dụng Checkbox Controls là hiệu quả vì Checkbox Controls cho phép bạn chọn 1 hoặc nhiều hơn 1 lựa chọn.
EX :
<h2>Xử Lý Form Control Là: Checkbox</h2>
<p>Có các lựa chọn được cung cấp sử dụng Checkbox. Phần tử cuối cùng sẽ Disable.</p>
<form>
<div class="checkbox">
<label><input type="checkbox" value="">Cơm Gà</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">Cơm Chiên Dương Châu</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">Cơm Âm Phủ</label>
</div>
<div class="checkbox disabled">
<label><input type="checkbox" value="" disabled>Cơm Rang Dưa Bò - Đã Hết</label>
</div>
</form>


HIỂN THỊ CÁC CHECKBOXES TRÊN MỘT DÒNG
Hãy sử dụng Class .checkbox-inline để các checkboxes xuất hiện trên cùng một dòng
EX :
<label class="checkbox-inline">
<input type="checkbox" value="">Cơm Gà
</label>
<label class="checkbox-inline">
<input type="checkbox" value="">Cơm Chiên Dương Châu
</label>
<label class="checkbox-inline">
<input type="checkbox" value="">Cơm Âm Phủ
</label>
<label class="checkbox-inline disabled">
<input type="checkbox" value="" disabled>Cơm Rang Dưa Bò - Đã Hết
</label>

4 + Với Bootstrap Chúng ta lựa chọn dữ liệu từ Radio Buttons
Chúng ta cung cấp các lựa chọn từ danh sách các tuỳ chọn đặt trước
Và chỉ cho phép người dùng chọn 1 lựa chọn
Khi đó, việc sử dụng Radio Buttons là hiệu quả vì Radio Buttons cho phép bạn chọn 1 lựa chọn duy nhất từ danh sách tuỳ chọn.
EX :
<h2>Xử Lý Form Control Là: Radio Buttons</h2>
<p>Có các lựa chọn được cung cấp sử dụng Radio Buttons. Phần tử cuối cùng sẽ Disable.</p>
<form>
<div class="radio">
<label><input type="radio" name="optradio" checked>KQ Thắng</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">KQ Hoà</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">KQ Thua</label>
</div>
<div class="radio disabled">
<label><input type="radio" name="optradio" disabled>Tôi Không Thích</label>
</div>
</form>


HIỂN THỊ CÁC RADIO BUTTONS TRÊN MỘT DÒNG
Hãy sử dụng Class .radio-inline để các radio buttons xuất hiện trên cùng một dòng
EX :
<label class="radio-inline">
<input type="radio" name="optradio" checked>KQ Thắng
</label>
<label class="radio-inline">
<input type="radio" name="optradio">KQ Hoà
</label>
<label class="radio-inline">
<input type="radio" name="optradio">KQ Thua
</label>
<label class="radio-inline disabled">
<input type="radio" name="optradio" disabled>Tôi Không Thích
</label>

5 + Với Bootstrap Chúng ta lựa chọn dữ liệu từ Select List
Nếu bạn muốn cho phép người dùng lựa chọn từ một danh sách các tuỳ chọn và danh sách này dạng thả xuống (/ Dropdown list )
Bootstrap cung cấp cho bạn một Control là Select List phù hợp với yêu cầu này.
Select list (Chỉ cho phép chọn 1 lựa chọn):
EX :
<h2>Xử Lý Form Control Là: Select</h2>
<p>Select Lists cho phép lựa chọn 1 tuỳ chọn từ danh sách (select lists):</p>
<form>
<div class="form-group">
<label for="sel1">SELECT LISTS (select one):</label>
<select class="form-control" id="sel1">
<option>1 . Thắng </option>
<option>2 . Hoà </option>
<option>3 . Thua </option>
<option>4 . Tôi không thích </option>
</select>
</div>
</form>

Select list (Cho phép chọn nhiều tuỳ chọn + Kết hợp phím CRTL & Shift):
Để thực hiện được điều này, Trong mã code tạo Select Lists chúng ta sử dụng thêm phần lựa chọn multiple
EX :
<label for="sel2">Mutiple select list (hold shift to select more than one):</label>
<select multiple class="form-control" id="sel2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>5</option>
</select>


6 + THÊM CÁC iCON VÀ CÁC TEXT CÓ TÁC DỤNG NHƯ MỘT ‘HELP TEXT’ CHO FORM CONTROLS
6 + 1 Nếu bạn cần thêm một Text bổ nghĩa cho một thành phần bất kỳ trong Form, bạn chỉ cần sử dụng thẻ <P> với Class .form-control-static
EX :
<form class="form-horizontal" action="/action.php">
<div class="form-group">
<label class="control-label col-sm-2">Email:</label>
<div class="col-sm-10">
<p class="form-control-static">HienThiEmail@xyz.com</p>
</div>
</div>
</form>
6 + 2 Nếu bạn muốn thêm các Icon hay text bổ nghĩa bên cạnh các trường Input dữ liệu, Bạn sử dụng như sau :
* Sử dụng Class .input-group làm một khung chứa để thực hiện xử lý nâng cao một Input bằng cách :
Thêm icon, text hay button vào phía trước input như là một Help Text.
* Sử dụng Class .input-group-addon để thêm Icon, text hay button vào phía trước input field
<h3>THỰC HIỆN XỬ LÝ VỚI INPUT GROUPS</h3>
<p>SỬ DỤNG CLASS .input-group </p>
<p>SỬ DỤNG CLASS .input-group-addon </p>
<form>
<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="ĐỊA CHỈ Email">
</div>
<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="ENTER Password">
</div>
<br>
<div class="input-group">
<span class="input-group-addon">TEXT THÔNG TIN BỔ XUNG</span>
<input id="msg" type="text" class="form-control" name="msg" placeholder="THÔNG TIN BỔ XUNG">
</div>
</form>

6 + 3 Nếu bạn muốn thêm các Button để bổ nghĩa cho trường input nhập dữ liệu, Bạn chỉ cần sử dụng Class .input-group-btn
EX :
<form>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button class="btn btn-info" type="submit">
<i class="glyphicon glyphicon-earphone"></i>
</button>
</div>
</div>
</form>

BẠN CÓ THỂ TÌM CÁC glyphicons :
https://getbootstrap.com/docs/3.3/components/
7 + THIẾT LẬP TRẠNG THÁI CỦA FORM CONTROLS
INPUT FOCUS
DISABLED INPUTS – Thêm thuộc tính disabled để vô hiệu hoá Input

DISABLED FIELDSETS – Thêm thuộc tính disabled vào một fieldset để vô hiệu hoá các Control bên trong

READONLY INPUTS – Thêm thuộc tính readonly vào một Input để ngăn không cho User thực hiện nhập dữ liệu
VALIDATION STATES – Các loại xác thực / validation là : error, warning, và success. Để sử dụng các xác thực này bạn phải thêm các Class .has-warning, .has-error, hoặc .has-success vào phần tử cha.
ICONS – Bạn có thể thêm các Icon phản hồi với Class .has-feedback và một icon cần thiết

HIDDEN LABELS – Thêm Class .sr-only trên một Labels không hiển thị