单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group中可以获得最好的排列。
<!DOCTYPE HTML> <html> <head> <link href="https://www.jb51.net/stylesheets/bootstrap.min.css" > </head> <body> <div> <form role="form"><div> <label for="name">名称</label> <input type="text" placeholder="请输入名称"> </div> <div> <label for="inputfile">文件输入</label> <input type="file"> <p>这里是块级帮助文本的实例。</p> </div> <div> <label> <input type="checkbox"> 请打勾 </label> </div> <button type="submit">提交</button> </form> </div> </body> </html>
不要将表单组合输入框组混合使用
不要将表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中使用。
2.内联表单
为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。
可能需要手动设置宽度
在 Bootstrap 中，输入框和单选/多选框控件默认被设置为 width: 100%; 宽度。在内联表单，我们将这些元素的宽度设置为 width: auto;，因此，多个控件可以排列在同一行。根据你的布局需求，可能需要一些额外的定制化组件。
一定要添加 label 标签
如果你没有为每个输入控件设置 label 标签，屏幕阅读器将无法正确识别。对于这些内联表单，你可以通过为 label 设置 .sr-only类将其隐藏。还有一些辅助技术提供label标签的替代方案，比如aria-label、aria-labelledby 或 title 属性。如果这些都不存在，屏幕阅读器可能会采取使用 placeholder 属性，如果存在的话，使用占位符来替代其他的标记，但要注意，这种方法是不妥当的。
<!DOCTYPE HTML> <html> <head> <link href="https://www.jb51.net/stylesheets/bootstrap.min.css" > </head> <body> <div> <form> <div> <label for="exampleInputName2">Name</label> <input type="text" placeholder="汇智网"> </div> <div> <label for="exampleInputEmail2">Email</label> <input type="email" placeholder="service@hubwiz.com"> </div> <button type="submit">Send invitation</button> </form> </div> </body> </html>
3.水平排列的表单
通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。
<!DOCTYPE HTML> <html> <head> <link href="https://www.jb51.net/stylesheets/bootstrap.min.css" > </head> <body> <div> <form role="form"><div> <label for="firstname">名字</label> <div> <input type="text" placeholder="请输入名字"> </div> </div> <div> <label for="lastname">姓</label> <div> <input type="text" placeholder="请输入姓"> </div> </div> <div> <div> <div> <label> <input type="checkbox"> 请记住我 </label> </div> </div> </div> <div> <div> <button type="submit">登录</button> </div> </div> </form> </div> </body> </html>
4.被支持的控件1
表单布局实例中展示了其所支持的标准表单控件。
输入框
包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel和 color。
必须添加类型声明
只有正确设置了 type 属性的输入控件才能被赋予正确的样式。
输入控件组
如需在文本输入域 <input> 前面或后面添加文本内容或按钮控件，请参考输入控件组。
文本域
支持多行文本的表单控件。可根据需要改变 rows 属性。