Trong bài trước chúng ta đã làm quen với việc sử dụng form với Bootstrap 3 rồi phải không nào, tiếp theo trong bài viết này, các bạn sẽ được học cách trình bày các input (đầu vào) cho các form trong Bootstrap 3 nhé!
Các input trong Bootstrap 3
Bootstrap 3 hỗ trợ các dạng đầu vào (input) của HTML như:
text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, và color.Một điều chúng ta cần lưu ý đó là các đầu vào sẽ không có đầy đủ style nếu định dạng của nó không được định nghĩa chính xác.
<div class="container"> <div class="form-group"> <h3>Form đăng nhập VD</h3> <label for="usr">Tên:</label> <input type="text" class="form-control" id="usr"> </div> <div class="form-group"> <label for="pwd">Mật khẩu:</label> <input type="password" class="form-control" id="pwd"> </div> </div>
Textarea
Ví dụ dưới đây mô tả 1 textarea (vùng văn bản) trong Bootstrap. Thuộc tính row (dòng) dùng để định nghĩa số dòng văn bản. Các bạn cũng có thể sử dụng style=”width:350px;height:100px” để định nghĩa độ rộng của vùng văn bản.
<div class="container"> <div class="form-group"> <label for="comment">Nội dung (hoc.tv):</label> <textarea class="form-control" rows="5" id="comment" style=”width:350px;height:100px”></textarea> </div> </div>
Checkbox
Chúng ta sử dụng checkbox để chọn bất cứ giá trị nào (chọn 1 hoặc nhiều hoặc không chọn) trong danh sách các lựa chọn cho trước. Ví dụ sau chúng mình mô tả 1 danh sách có 3 lựa chọn, với lựa chọn cuối cùng đã bị vô hiệu hóa.
<div class="container"> <h3>Ví dụ checkbox</h3> <div class="checkbox"> <label><input type="checkbox" value="">Cơm</label> </div> <div class="checkbox"> <label><input type="checkbox" value="">Bún</label> </div> <div class="checkbox disabled"> <label><input type="checkbox" value="" disabled>Lẩu</label> </div> </div>
Bạn có thể dùng lớp .checkbox-inline để tạo 1 danh sách checkbox trên 1 dòng.
<label class="checkbox-inline"><input type="checkbox" value="">Cơm</label> <label class="checkbox-inline"><input type="checkbox" value="">Lẩu</label> <label class="checkbox-inline"><input type="checkbox" value="">Cháo</label>
Radio
Các nút radio được dùng để chỉ chọn dụy nhất 1 giá trị trong 1 danh sách cho trước. Ví dụ dưới đây chứa 3 nút radio. Lựa chọn cuối cùng bị vô hiệu hóa. Các bạn cũng cần nhớ các nút radio phải có cùng giá trị thuộc tính name (trong ví dụ là name=”optradio”) để cho phép chọn 1 lựa chọn duy nhất ở 1 thời điểm.
<div class="container"> <h3>Ví dụ radio</h3> <div class="radio"> <label><input type="radio" name="optradio">Thịt</label> </div> <div class="radio"> <label><input type="radio" name="optradio">Cá</label> </div> <div class="radio disabled"> <label><input type="radio" name="optradio" disabled>Trứng</label> </div> </div>
Ngoài ra chúng ta cũng có thể dùng class .radio-inline để tạo danh sách các nút radio trên 1 dòng.
Danh sách lựa chọn
Danh sách lựa chọn (hay còn gọi là dropdown list) dùng để cho phép người dùng để chọn nhiều lựa chọn khác nhau. Ví dụ sau cho phép chỉ chọn 1 lựa chọn trong danh sách 55 lựa chọn trong 1 thời điểm.
<div class="container"> <div class="form-group"> <label for="sel1">Danh sách lựa chọn</label> <select class="form-control" id="sel1"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> </div>
Kết quả:
Bạn cũng có thể cho phép người dùng chọn nhiều lựa chọn 1 lúc bằng cách thêm multiple vào danh sách lựa chọn. Người dùng nhấn Ctrl hoặc Shift và nhấn chuột để thực hiện thao tác chọn nhiều lựa chọn.
<div class="container"> <div class="form-group"> <label for="sel1">Danh sách lựa chọn</label> <select multiple class="form-control" id="sel1"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> </div>
Điều khiển tĩnh (Static Control)
Sử dụng class .form-control-static trong phần tử p để chèn đoạn văn bản bên cạnh nhãn form theo hàng ngang.
<div class="container"> <form class="form-horizontal"> <div class="form-group"> <label class="control-label col-sm-2" for="email">Địa chỉ email:</label> <div class="col-sm-10"> <p class="form-control-static">admin@hoc.tv</p> </div> </div> </form> </div>
Nhóm input Bootstrap
Lớp .input-group là một vùng chứa để nâng cao đầu vào bằng cách thêm một biểu tượng, văn bản hoặc một nút vào phía trước hoặc phía sau nó dưới dạng "văn bản trợ giúp".
Lớp .input-group-addon đính kèm một biểu tượng hoặc văn bản trợ giúp bên cạnh trường nhập.
Ví dụ
<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="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="Mật khẩu"> </div> <div class="input-group"> <span class="input-group-addon">Text</span> <input id="msg" type="text" class="form-control" name="msg" placeholder="Thông tin bổ sung"> </div> </form>
Các trạng thái điều khiển
Bootstrap 3 hỗ trợ các trạng thái điều khiển trên form như sau:
- INPUT FOCUS: Viền bên ngoài input thay bằng 1 hiệu ứng box-shadow khi nhấn vào control
- DISABLED INPUTS: Vô hiệu hóa (disabled) 1 input nào đó
- DISABLED FIELDSETS: Vô hiệu hóa (disabled) 1 thuộc tính fieldset chứa các control con bên trong
- READONLY INPUTS: Thêm thuộc tính chỉ đọc (readonly) vào các input
- VALIDATION STATES: Thêm phong cách chứng thực như các thong điệp error, warning hay success. Để sử dụng thêm các lớp .has-warning, .has-error, hay .has-success vào các phần tử
- ICONS: Thêm các biểu tượng với lớp .has-feedback và 1 icon nào đó
- HIDDEN LABELS: Thêm lớp .sr-only vào nhãn muốn che nội dung
Ví dụ:
<div class="container"> <form class="form-horizontal"> <h3>Các trạng thái điều khiển</h3> <div class="form-group"> <label class="col-sm-2 control-label">Focused</label> <div class="col-sm-10"> <input class="form-control" id="focusedInput" type="text" value="Nhấn chuột để điền nội dung"> </div> </div> <div class="form-group"> <label for="inputPassword" class="col-sm-2 control-label">Vô hiệu hóa</label> <div class="col-sm-10"> <input class="form-control" id="disabledInput" type="text" disabled> </div> </div> <fieldset disabled> <div class="form-group"> <label for="disabledTextInput" class="col-sm-2 control-label">Vô hiệu hóa fieldset</label> <div class="col-sm-10"> <input type="text" id="disabledTextInput" class="form-control"> </div> </div> <div class="form-group"> <label for="disabledSelect" class="col-sm-2 control-label"></label> <div class="col-sm-10"> <select id="disabledSelect" class="form-control"> <option>Vô hiệu hóa select</option> </select> </div> </div> </fieldset> <div class="form-group has-success has-feedback"> <label class="col-sm-2 control-label" for="inputSuccess"> Input với thông điệp success và icon</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputSuccess"> <span class="glyphicon glyphicon-ok form-control-feedback"></span> </div> </div> <div class="form-group has-warning has-feedback"> <label class="col-sm-2 control-label" for="inputWarning"> Input với thông điệp warning và icon</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputWarning"> <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span> </div> </div> <div class="form-group has-error has-feedback"> <label class="col-sm-2 control-label" for="inputError"> Input với thông điệp error và icon</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputError"> <span class="glyphicon glyphicon-remove form-control-feedback"></span> </div> </div> </form> </div>
Kết quả:
