完全深入学习Bootstrap表单


Posted in Javascript onNovember 28, 2016

前言:由于表单的元素比较多,因此将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)基本输入框

<input type="text" class="form-control">

(2)比基本大的输入框

<input type="text" class="form-control input-lg">

(3)比基本小的输入框

<input type="text" class="form-control input-sm">

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

<textarea rows="5" class="form-control">

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

<select class="form-control"><option>222</option></select>

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样式,总之灵活运用吧!

Javascript 相关文章推荐
关于文本限制字数的js代码
Apr 02 Javascript
JS target与currentTarget区别说明
Aug 28 Javascript
使用apply方法处理数组的三个技巧[译]
Sep 20 Javascript
JavaScript中的逻辑判断符&amp;&amp;、||与!介绍
Dec 31 Javascript
基于jQuery仿淘宝产品图片放大镜特效
Oct 19 Javascript
js判断数组key是否存在(不用循环)的简单实例
Aug 03 Javascript
webpack学习--webpack经典7分钟入门教程
Jun 28 Javascript
微信小程序实现折叠展开效果
Jul 19 Javascript
详解Vue项目部署遇到的问题及解决方案
Jan 11 Javascript
详解webpack引入第三方库的方式以及注意事项
Jan 15 Javascript
vue里的data要用return返回的原因浅析
May 28 Javascript
javascript触发模拟鼠标点击事件
Jun 26 Javascript
EasyUI Combobox设置默认值 获取text的方法
Nov 28 #Javascript
Bootstrap选项卡动态切换效果
Nov 28 #Javascript
js简单正则验证汉字英文及下划线的方法
Nov 28 #Javascript
Bootstrap实现导航栏的2种方式
Nov 28 #Javascript
jQuery扩展实现text提示还能输入多少字节的方法
Nov 28 #Javascript
Bootstrap框架实现广告轮播效果
Nov 28 #Javascript
ReactJs快速入门教程(精华版)
Nov 28 #Javascript
You might like
比file_get_contents稳定的curl_get_contents分享
2012/01/11 PHP
php字符串截取的简单方法
2013/07/04 PHP
linux下使用crontab实现定时PHP计划任务失败的原因分析
2014/07/05 PHP
FleaPHP框架数据库查询条件($conditions)写法总结
2016/03/19 PHP
PHP开启目录引索+fancyindex漂亮目录浏览带搜索功能
2019/09/23 PHP
php实现微信和支付宝支付的示例代码
2020/08/11 PHP
javascript 二分法(数组array)
2010/04/24 Javascript
新手常遇到的一些jquery问题整理
2010/08/16 Javascript
获取body标签的两种方法
2011/10/13 Javascript
js返回上一页并刷新代码整理
2012/12/21 Javascript
jquery怎样实现ajax联动框(一)
2013/03/08 Javascript
jquery 实现input输入什么div图层显示什么
2014/06/15 Javascript
javascript中Date对象的getDay方法使用指南
2014/12/22 Javascript
js判断文本框输入的内容是否为数字
2015/12/23 Javascript
微信小程序 视图容器组件的详解及实例代码
2017/01/19 Javascript
Angular2实现自定义双向绑定属性
2017/03/22 Javascript
详解redis在nodejs中的应用
2018/05/02 NodeJs
vue+mock.js实现前后端分离
2019/07/24 Javascript
ElementUI中el-tree节点的操作的实现
2020/02/27 Javascript
[05:31]DOTA2英雄梦之声_第04期_光之守卫
2014/06/23 DOTA
Python map和reduce函数用法示例
2015/02/26 Python
对python中for、if、while的区别与比较方法
2018/06/25 Python
我用Python抓取了7000 多本电子书案例详解
2019/03/25 Python
Python3.5面向对象编程图文与实例详解
2019/04/24 Python
Python解决pip install时出现的Could not fetch URL问题
2019/08/01 Python
python如何从文件读取数据及解析
2019/09/19 Python
中国专业的综合网上购物商城:京东
2016/08/02 全球购物
可持续未来的时尚基础:Alternative Apparel
2019/05/06 全球购物
介绍一下gcc特性
2015/10/31 面试题
商场活动策划方案
2014/01/24 职场文书
领导班子三严三实心得体会
2014/10/13 职场文书
大学毕业生个人总结
2015/02/28 职场文书
2015庆祝七一建党节94周年活动总结
2015/03/20 职场文书
详解Node.js如何处理ES6模块
2021/05/15 Javascript
在Centos 8.0中安装Redis服务器的教程详解
2022/03/21 Redis
解决MySQL Varchar 类型尾部空格的问题
2022/04/06 MySQL