Bootstrap所支持的表单控件如下所示：
Bootstrap 支持最常见的表单控件，主要是 input、textarea、checkbox、radio 和 select。
输入框（Input）
最常见的表单文本字段是输入框 input。用户可以在其中输入大多数必要的表单数据。Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持，包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。适当的 type 声明是必需的，这样才能让 input 获得完整的样式。
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 输入框</title> <link href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> <script src="https://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body> <form role="form"> <div> <label for="name">标签</label> <input type="text" placeholder="文本输入"> </div> </form> </body> </html>
结果如下所示：
文本框（Textarea）
当您需要进行多行输入的时，则可以使用文本框 textarea。必要时可以改变 rows 属性。
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 文本框</title> <link href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> <script src="https://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body> <form role="form"> <div> <label for="name">文本框</label> <textarea rows="3"></textarea> </div> </form> </body> </html>
结果如下所示：
复选框（（Checkbox）和单选框（Radio）
复选框和单选按钮用于让用户从一系列预设置的选项中进行选择。
当创建表单时，如果您想让用户从列表中选择若干个选项时，请使用 checkbox。如果您限制用户只能选择一个选项，请使用 radio。
对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class，控制它们显示在同一行上。
下面的实例演示了这两种类型（默认和内联）：
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 复选框和单选按钮</title> <link href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> <script src="https://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body> <label for="name">默认的复选框和单选按钮的实例</label> <div> <label><input type="checkbox" value="">选项 1</label> </div> <div> <label><input type="checkbox" value="">选项 2</label> </div> <div> <label> <input type="radio" value="option1" checked> 选项 1 </label> </div> <div> <label> <input type="radio" value="option2"> 选项 2 - 选择它将会取消选择选项 1 </label> </div> <label for="name">内联的复选框和单选按钮的实例</label> <div> <label> <input type="checkbox" value="option1"> 选项 1 </label> <label> <input type="checkbox" value="option2"> 选项 2 </label> <label> <input type="checkbox" value="option3"> 选项 3 </label> <label> <input type="radio" value="option1" checked> 选项 1 </label> <label> <input type="radio" value="option2"> 选项 2 </label> </div> </body> </html>
结果如下所示：
复选框和单选按钮
当您想让用户从多个选项中进行选择，但是默认情况下只能选择一个选项时，则使用选择框。
使用 <select> 展示列表选项，通常是那些用户很熟悉的选择列表，比如州或者数字。
使用 multiple="multiple" 允许用户选择多个选项。
下面的实例演示了这两种类型（select 和 multiple）：