完全深入学习Bootstrap表单

更新时间：2016年11月28日 11:16:56 作者：塞上江南果

Bootstrap表单用来与用户做交流的一个网页控件，实现网页与用户更好的沟通，这篇文章主要就为大家介绍了Bootstrap表单中常见的元素,具有一定的参考价值，感兴趣的小伙伴们可以参考一下

前言：由于表单的元素比较多，因此将Bootstrap的表单单独做个总结，表单作为Bootstrap的核心内容，主要功能是用来与用户做交流的一个网页控件，良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。

一、基础表单

<form role="form">
 <div class="form-group">
  <label for="exampleInputEmail1">邮箱：</label>
  <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入您的邮箱地址">
 </div>
 <div class="form-group">
  <label for="exampleInputPassword1">密码</label>
  <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入您的邮箱密码">
 </div>
 <button type="submit" class="btn btn-default">进入邮箱</button>
</form>

具体解释：

（1）对于form标签的role属性，只是为了增强语义性，并无其他作用；

（2）给div设定.form-group类名，是为了让每个输入框上下间隔一定的距离，不然两个就会挨着；

（3）还有label的for属性和input的id必须同名，是为了标识它俩是一组，且当鼠标点击label标签时，光标会自动锁定到输入框，不用for属性时也可这样写：<label>邮箱：<input type="email" class="form-control" placeholder="请输入您的邮箱地址"> </label>，此时input的长度不是屏幕宽度；

（4）给form添加.form-control类:
1.宽度100%显示；
2.设置了一个浅灰色（#ccc）的边框；
3.具有4px的圆角；
4.设置阴影效果，并且元素得到聚焦时，阴影和边框效果会有所变化；

二、水平表单（标签在左，输入框在右）

<form class="form-horizontal" role="form">
 <div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
  <div class="col-sm-10">
   <input type="email" class="form-control" id="inputEmail3" placeholder="请输入您的邮箱地址">
  </div>
 </div>
 <div class="form-group">
  <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
  <div class="col-sm-10">
   <input type="password" class="form-control" id="inputPassword3" placeholder="请输入您的邮箱密码">
  </div>
 </div>
 <div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
   <button type="submit" class="btn btn-default">进入邮箱</button>
  </div>
 </div>
</form>

具体解释：

在form标签上使用类.form-horizontal主要有以下作用：
1、设置表单控件padding和margin值；
2、改变“form-group”的表现形式，类似于网格系统的“row”；
在使用时必须和网格系统配合使用，才能实现水平方向的效果，对于不同宽度的设备显示不同的布局，使用时可以调节浏览器的大小看不同的效果，当浏览器大小小于某个值就会呈垂直显示。

三、内联表单（表单控件都在一行显示）

<form class="form-inline" role="form">
 <div class="form-group">
  <label for="exampleInputEmail2">邮箱</label>
  <input type="email" class="form-control" id="exampleInputEmail2" placeholder="请输入你的邮箱地址">
 </div>
 <div class="form-group">
  <label for="exampleInputPassword2">密码</label>
  <input type="password" class="form-control" id="exampleInputPassword2" placeholder="请输入你的邮箱密码">
 </div>
 <button type="submit" class="btn btn-default">进入邮箱</button>
</form>

具体解释：
有时我们会用到在网页顶部的导航栏输入用户名和密码，这时就需要在一行显示，此时给form标签添加.form-inline类就可轻而易举的实现；同时当改变显示设备大小时就会自动发生换行，呈普通表单的样式。

四、表单的基本元素

1、input元素：加上类.form-control就可以实现最基本的输入框样式

（1）基本输入框

（2）比基本大的输入框

（3）比基本小的输入框

2、 textarea元素：加上类.form-control可以不用设置cols属性值，此时标签宽度为100%

3.、select元素：与原始一致，作为下拉选择框，可以实现多行选择和单行选择，加上.form-control类只是为了同一风格

4.、复选框checkbox和单选按钮radio：

（1）给checkbox和radio专门写了.checkbox和.radio这两个类，是为了解决对齐问题，下面的代码是垂直显示

 `<form role="form">
 <div class="checkbox">
  <label>
   <input type="checkbox" value="">
   踢足球
  </label>
 </div>
 <div class="checkbox">
  <label>
   <input type="checkbox" value="">
   打篮球
  </label>
 </div>
 <div class="radio">
  <label>
   <input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>
   喜欢
  </label>
 </div>
  <div class="radio">
  <label>
   <input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">
   不喜欢
  </label>
 </div> 
</form>   `

（2）复选框和单选框水平显示，此时不需要.checkbox和.radio类，但是要配合.form-group类同时使用，给label标签加上.check-inline或.radio-inline类即可

<form role="form">
 <div class="form-group">
  <label class="checkbox-inline">
   <input type="checkbox" value="option1">游戏
  </label>
  <label class="checkbox-inline">
   <input type="checkbox" value="option2">摄影
  </label>
  <label class="checkbox-inline">
  <input type="checkbox" value="option3">旅游
  </label>
 </div>
 <div class="form-group">
  <label class="radio-inline">
   <input type="radio" value="option1" name="sex">男性
  </label>
  <label class="radio-inline">
   <input type="radio" value="option2" name="sex">女性
  </label>
  <label class="radio-inline">
   <input type="radio" value="option3" name="sex">中性
  </label>
 </div>
</form>

五、表单的验证

<form role="form">
 <div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess1">成功状态</label>
  <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
  <span class="help-block">你输入的信息是正确的</span>
  <span class="glyphicon glyphicon-ok form-control-feedback"></span>
 </div>
 <div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning1">警告状态</label>
  <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
  <span class="help-block">请输入正确信息</span>
  <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
 </div>
 <div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError1">错误状态</label>
  <input type="text" class="form-control" id="inputError1" placeholder="错误状态">
 <span class="help-block">你输入的信息是错误的</span>  
  <span class="glyphicon glyphicon-remove form-control-feedback"></span> 
 </div>
</form>

具体解释：
给div加上不同的类，如.has-warning警告状态，显示为黄色，.has-error错误状态，显示为红色，.has-success成功状态，显示为绿色；第一个span的.help-block为提示信息；第二个span加上后面的一长串类名，是为了在输入框后面提示不同的图标，其中.form-control-feedback必须和div的.has-feedback一同使用，不然图标不能显示在输入框内部。

总结：以上介绍了表单的不同显示样式，以及表单的具体的一些标签，个人觉得作为框架，最主要的是它的嵌套结构，在用时需要知道哪个标签里嵌套哪个标签。想要不同的风格，可以加入自己的css样式，总之灵活运用吧！

您可能感兴趣的文章:

JS简单获取当前年月日星期的方法示例
这篇文章主要介绍了JS简单获取当前年月日星期的方法,结合完整实例形式分析了javascript基于自定义函数获取当前日期时间的方法,涉及javascript中Date()类的使用与日期相关运算技巧,需要的朋友可以参考下
2017-02-02
非常漂亮的js烟花效果
这篇文章主要为大家详细介绍了js实现非常漂亮的烟花效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-03-03
小程序实现可拖动的悬浮按钮
这篇文章主要为大家详细介绍了小程序实现可拖动的悬浮按钮，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09
JavaScript手写实现一个简单的快捷键库
前端开发中,有时项目会遇到一些快捷键需求,比如绑定快捷键,展示快捷键,编辑快捷键等需求,所以本文就来用JavaScript手写一个简单的快捷键库吧
2024-02-02
Table冻结表头示例代码
Table冻结表头，大家对此应该不会很陌生，实现很简单，下面为大家详细介绍下具体的实现，感兴趣的朋友可以参考下
2013-08-08
IE FF OPERA都可用的弹出层实现代码
多浏览器的弹出层效果核心代码。需要的朋友可以测试下这个是从正在使用的网站中扒下来的。
2009-09-09
一个JavaScript防止表单重复提交的实例
防止重复表单提交的方法有很多，本文使用JavaScript来实现防止表单重复提交，很简单，但很实用，新手朋友们不要错过
2014-10-10
js substring从右边获取指定长度字符串(示例代码)
本篇文章主要是对js substring从右边获取指定长度字符串的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2013-12-12
微信小程序预览二进制流文件的方法
这篇文章主要为大家详细介绍了微信小程序预览二进制流文件的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-08-08
iframe中子父类窗口调用JS的方法及注意事项
本文给大家介绍iframe中子父类窗口调用JS的方法及注意事项，介绍的超详细，需要的朋友快来学习下
2015-08-08