bootstrap3.0教程之表单(form)使用详解基于jQuery Bootstrap的Material Design风格表单特效源码BootStrap实现系统后台登录表单特效源码

本文主要讲解的是表单，这个其实对于做过网站的人来说，并不陌生，而且可以说是最为常用的提交数据的Form表单。本文主要来讲解一下内容：

1.基本案例

2.内联表单

3.水平排列的表单

4.被支持的控件

5.静态控件

6.控件状态

7.控件尺寸

8.帮助文本

9.总结

基本案例
单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control的、和<select>元素都将被默认设置为width: 100%;。将label和前面提到的这些控件包裹在.form-group中可以获得最好的排列。</p><p><br></p><div class="msgheader"><div class="right"><span style="CURSOR: pointer" class="copybut"><u>复制代码</u></span></div>代码如下:</div><div class="msgborder" id="phpcode48"><br><form role="form"><br><div class="form-group"><br><label for="exampleInputEmail1">Email address</label><br><input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"><br></div><br><div class="form-group"><br><label for="exampleInputPassword1">Password</label><br><input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"><br></div><br><div class="form-group"><br><label for="exampleInputFile">File input</label><br><input type="file" id="exampleInputFile"><br><p class="help-block">Example block-level help text here.</p><br></div><br><div class="checkbox"><br><label><br><input type="checkbox"> Check me out<br></label><br></div><br><button type="submit" class="btn btn-default">Submit</button><br></form><br></div><br><br><img src="//img.jbzj.com/file_images/article/201404/20140415142120.jpg?201431514257" alt=""><p>两个文本框的宽度的确为100%。并且有三个form-group。</p><p><strong>内联表单</strong></p><p>为左对齐和inline-block级别的控件设置.form-inline，可以将其排布的更紧凑。</p><p>需要设置宽度：在Bootstrap中,input、select和textarea默认被设置为100%宽度。为了使用内联表单，你需要专门为使用到的表单控件设置宽度。</p><p>一定要设置label:如果你没有为每个输入控件设置label,屏幕阅读器将无法正确识读。对于这些内联表单,你可以通过为label设置.sr-only已将其隐藏。<br><br></p><div class="msgheader"><div class="right"><span style="CURSOR: pointer" class="copybut"><u>复制代码</u></span></div>代码如下:</div><div class="msgborder" id="phpcode49"><br><form class="form-inline" role="form"><br><div class="form-group"><br><label class="sr-only" for="exampleInputEmail2">Email address</label><br><input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email"><br></div><br><div class="form-group"><br><label class="sr-only" for="exampleInputPassword2">Password</label><br><input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password"><br></div><br><div class="checkbox"><br><label><br><input type="checkbox"> Remember me<br></label><br></div><br><button type="submit" class="btn btn-default">Sign in</button><br></form><br></div><br><br><img src="//img.jbzj.com/file_images/article/201404/20140415142143.jpg?2014315142547" alt=""><p><strong>水平排列的表单</strong></p><p> 通过为表单添加.form-horizontal，并使用Bootstrap预置的栅格class可以将label和控件组水平并排布局。这样做将改变.form-group的行为，使其表现为栅格系统中的行（row），因此就无需再使用.row了。</p><p><br></p><div class="msgheader"><div class="right"><span style="CURSOR: pointer" class="copybut"><u>复制代码</u></span></div>代码如下:</div><div class="msgborder" id="phpcode50"><br><form class="form-horizontal" role="form"><br><div class="form-group"><br><label for="inputEmail3" class="col-sm-2 control-label">Email</label><br><div class="col-sm-10"><br><input type="email" class="form-control" id="inputEmail3" placeholder="Email"><br></div><br></div><br><div class="form-group"><br><label for="inputPassword3" class="col-sm-2 control-label">Password</label><br><div class="col-sm-10"><br><input type="password" class="form-control" id="inputPassword3" placeholder="Password"><br></div><br></div><br><div class="form-group"><br><div class="col-sm-offset-2 col-sm-10"><br><div class="checkbox"><br><label><br><input type="checkbox"> Remember me<br></label><br></div><br></div><br></div><br><div class="form-group"><br><div class="col-sm-offset-2 col-sm-10"><br><button type="submit" class="btn btn-default">Sign in</button><br></div><br></div><br></form><br></div><br><br><img src="//img.jbzj.com/file_images/article/201404/20140415142154.jpg?201431514267" alt=""><p><br><strong>被支持的控件</strong></p><p>在表单布局案例中展示了其所支持的标准表单控件。</p><p><strong>Input<br></strong>大部分表单控件、文本输入域控件。包括HTML5支持的所有类型：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel和color。</p><p>注意：有正确设置了type的input控件才能被赋予正确的样式。</p><p>文本框示例<br><br></p><div class="msgheader"><div class="right"><span style="CURSOR: pointer" class="copybut"><u>复制代码</u></span></div>代码如下:</div><div class="msgborder" id="phpcode51"><br><input type="text" class="form-control" placeholder="Text input"><br></div><br><br><img src="//img.jbzj.com/file_images/article/201404/20140415142209.jpg?2014315142630" alt=""><p><strong>Textarea</strong></p><p>支持多行文本的表单控件。可根据需要改变rows属性。<br><br></p><div class="msgheader"><div class="right"><span style="CURSOR: pointer" class="copybut"><u>复制代码</u></span></div>代码如下:</div><div class="msgborder" id="phpcode52"><br><h1>textarea</h1><br><textarea class="form-control" rows="3">