Các thành phần của form (form-control) tự động nhận một số style chung. Toàn bộ các form-control <input>, <textarea>, và <select> với class .form-control được thiết lập mặc định width: 100%;. Bọc các nhãn và các form-control bằng một thẻ có class .form-group để tối ưu hóa khoảng trắng.
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Đừng nhầm lẫn giữa form groups với input groups
Đừng lẫn lộn giữa form group với input groups, hãy đặt input group vào bên trong của form group.
Hãy thêm class .form-inline vào thẻ <form> của bạn nếu bạn muốn form-control của bạn hiển thi dưới dạng inline-block và được căn lề trái. Lưu ý rằng, class này chỉ hoạt động với những form nằm bên trong khung nhìn có độ rộng tối thiểu bằng 768 pixel.
Yêu cầu độ rộng tùy biến
Input, select và textarea có độ rộng mặc định là 100% trong Bootstrap. Để sử dụng form trên cùng dòng, bạn sẽ phải thiết lập độ rộng trên các form-control nằm bên trong nó.
Luôn luôn thêm nhãn
Trình đọc của màn hình sẽ gặp vấn đề với form của bạn nếu bạn không gắn nhãn cho từng input. Khi sử dụng form cùng dòng, bạn có thể ẩn các nhãn đi bằng cách sử dụng class .sr-only.
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
Hãy sử dụng các class của lưới của Bootstrap để căn chỉnh các nhãn và nhóm các form-control dàn hàng ngang bằng cách thêm class .form-horizontal vào form. Class này sẽ làm cho các .form-groups hoạt động giống như các dòng của lưới, vì vậy không cần phải sử dụng class .row.
Sau đây là ví dụ về các form control được hỗ trợ trên cùng một layout.
Input
Input là form-control dựa text phổ biến nhất, bao gồm toàn bộ các kiểu input của HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, và color.
Yêu cầu khai báo kiểu
Các input sẽ chỉ được style đầy đủ nếu thuộc tính type của chúng được khai báo rõ ràng.
<input type="text" class="form-control" placeholder="Text input">
Textarea
Textarea là một dạng form-control hỗ trợ nhiều dòng text. Khi cần thiết, hãy thay đổi thuộc tính rows.
<textarea class="form-control" rows="3"></textarea>
Checkbox và radio
Checkbox được sử dụng cho việc lựa chọn một hoặc nhiều tùy chọn trong một danh sách. Trong khi đó, radio được sử dụng cho việc lựa chọn 1 tùy chọn duy nhất.
Mặc định (xếp chồng)
<div class="checkbox">
<label>
<input type="checkbox" value="">
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
Checkbox trên cùng dòng
Hãy sử dụng class .checkbox-inline hoặc .radio-inline để hiển thị danh sách các checkbox/radio trên cùng một dòng.
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>
Select
Sử dụng tùy chọn mặc định hoặc thêm multiple để hiển thị nhiều tùy chọn cùng một lúc.
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
Khi bạn cần đặt một dòng text thuần bên cạnh một nhãn bên trong một form dàn hàng ngang, hãy sử dụng class .form-control-static trên thẻ <p>.
Chúng tôi loại bỏ outline mặc định trên một số form-control và sử dụng box-shadow để hiển thị input như đang được :focus.
Demo :focus state
The above example input uses custom styles in our documentation to demonstrate the :focus state on a .form-control.
Hãy thêm thuộc tính disabled vào một input để ngăn cản người dùng nhập dữ liệu và làm cho input hiển thị giống như là đã bị vô hiệu hóa.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Hãy thêm thuộc tính disabled vào một <fieldset> để vô hiệu hóa toàn bộ các form-controll nằm bên trong <fieldset>.
Chức năng liên kết của thẻ <a> không bị ảnh hưởng
Class này sẽ chỉ làm thay đổi hình thức của các nút <a class="btn btn-default"> chứ không làm thay đổi chức năng của nó. Nếu bạn muốn vô hiệu hóa chức năng liên kết, hãy sử dụng Javascript.
Tính tương thích với các trình duyệt
Mặc dù Bootstrap sẽ áp dụng các style này trên tất cả các trình duyệt, tuy nhiên Internet Explorer 9 (và các phiên bản thấp hơn) không hoàn toàn hỗ trợ thuộc tính disabled trên một <fieldset>. Vì thế, hãy sử dụng Javascript để vô hiệu hóa fieldset trên các trình duyệt này.
<form role="form">
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Can't check this
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>
Add the readonly boolean attribute on an input to prevent user input and style the input as disabled.
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
Bootstrap cung cấp các style xác nhận biểu thị các trạng thái lỗi, cảnh báo và thành công áp dụng trên các form-control. Để sử dụng, hãy thêm các class .has-warning, .has-error, hoặc .has-success vào phần tử cha. Bất kỳ phần tử nào có class .control-label, .form-control, và .help-block bên trong phần tử cha đó sẽ được áp dụng style xác nhận.
<div class="form-group has-success">
<label class="control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control" id="inputSuccess1">
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning1">Input with warning</label>
<input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError1">Input with error</label>
<input type="text" class="form-control" id="inputError1">
</div>
Các biểu tượng tùy chọn
Nếu bạn muốn tăng tính trực quan, hãy sử dụng các biểu tượng tùy chọn bằng cách sử dụng các class đi kèm.
Biểu tượng, nhãn và nhóm các input
Việc thiết lập vị trí cho các biểu tượng là cần thiết cho các input không gắn nhãn và cho các input groups bằng cách thêm một add-on vào phía bên phải. Đối với các input không gắn nhãn, hãy điều chỉnh giá trị top. Đối với nhóm input, hãy điều chỉnh giá trị right một cách thích hợp tùy thuộc vào bề rộng của add-on.
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2">
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with error</label>
<input type="text" class="form-control" id="inputError2">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
Các biểu tượng tùy chọn cũng hoạt động trên các form cùng dòng và form dàn hàng ngang.
<form class="form-horizontal" role="form">
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputSuccess3">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
</div>
</form>
<form class="form-inline" role="form">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess4">Input with success</label>
<input type="text" class="form-control" id="inputSuccess4">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
</form>
Optional icons with hidden .sr-only labels
For form controls with no visible label, add the .sr-only class on the label. Bootstrap will automatically adjust the position of the icon once it's been added.
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
<input type="text" class="form-control" id="inputSuccess5">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
Hãy sử dụng các class tương tự như .input-lg để thiết lập chiều cao, và sử dụng các class tương tự như .col-lg-* để thiết lập chiều rộng của form-control (tương tự như các cột của lưới).
Thay đổi chiều cao
Tạo ra các form-control cao hơn hoặc thấp hơn tương ứng với các kích thước của nút.
<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">
<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>
Thay đổi chiều rộng
Bọc các input bằng các cột của lưới hoặc bất kỳ phần tử cha tùy biến nào để dễ dàng điều chỉnh về độ rộng mong muốn (xem ví dụ bên dưới để biết thêm chi tiết).
<div class="row">
<div class="col-xs-2">
<input type="text" class="form-control" placeholder=".col-xs-2">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder=".col-xs-3">
</div>
<div class="col-xs-4">
<input type="text" class="form-control" placeholder=".col-xs-4">
</div>
</div>
Text trợ giúp
Để thêm text trợ giúp cho form-control, hãy bọc text đó bằng một thẻ <span> có class .help-block
<span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>