完全深入学习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 相关文章推荐
使用jscript实现二进制读写脚本代码
Jun 09 Javascript
通用JS事件写法实现代码
Jan 07 Javascript
jQuery 标题的自动翻转实现代码
Oct 14 Javascript
Jquery ajaxStart()与ajaxStop()方法(实例讲解)
Dec 18 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
Dec 27 Javascript
javascript实时显示当天日期的方法
May 20 Javascript
JS实现的网页背景闪电闪烁效果代码
Oct 17 Javascript
AngularJS基础 ng-copy 指令实例代码
Aug 01 Javascript
浅谈JS中String()与 .toString()的区别
Oct 20 Javascript
用jQuery的AJax实现异步访问、异步加载
Nov 02 Javascript
微信小程序 PHP生成带参数二维码
Feb 21 Javascript
图片懒加载imgLazyLoading.js使用详解
Sep 15 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
浅谈PHP 闭包特性在实际应用中的问题
2009/10/30 PHP
PHP获取当前完整URL地址的函数
2014/12/21 PHP
PHP入门教程之会话控制技巧(cookie与session)
2016/09/11 PHP
PHP使用glob方法遍历文件夹下所有文件的实例
2018/10/17 PHP
用JQuery 实现的自定义对话框
2007/03/24 Javascript
jquery BS,dialog控件自适应大小
2009/07/06 Javascript
jQuery插件开发详细教程
2014/06/06 Javascript
jQuery中append()方法用法实例
2015/01/08 Javascript
不同js异步函数同步的实现方法
2016/05/28 Javascript
webpack进阶——缓存与独立打包的用法
2017/08/02 Javascript
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
2017/08/17 Javascript
JS使用tofixed与round处理数据四舍五入的区别
2017/10/25 Javascript
基于Node.js实现压缩和解压缩的方法
2018/02/13 Javascript
使用JS监听键盘按下事件(keydown event)
2019/11/07 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
2020/07/11 Javascript
Vue通过provide inject实现组件通信
2020/09/03 Javascript
详解datagrid使用方法(重要)
2020/11/06 Javascript
[01:51]DAC趣味视频-如何成为职业选手.mp4
2017/04/02 DOTA
[41:08]TNC vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[42:50]NB vs VP 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python将文本转换成图片输出的方法
2015/04/28 Python
windows下安装Python和pip终极图文教程
2017/03/05 Python
Python实现的简单线性回归算法实例分析
2018/12/26 Python
对Python中class和instance以及self的用法详解
2019/06/26 Python
HTML5 常见面试题之PC端和移动端区别介绍
2018/01/22 HTML / CSS
家庭户外服装:Hawkshead
2017/11/02 全球购物
纽约和芝加哥当天送花:Ode à la Rose
2019/07/05 全球购物
火山咖啡:Volcanica Coffee
2019/10/29 全球购物
女儿十岁生日答谢词
2014/01/27 职场文书
人力资源总监工作说明
2014/03/03 职场文书
延安红色之旅心得体会
2014/10/07 职场文书
有关浪费资源的建议书
2015/09/14 职场文书
MySQL8.0.18配置多主一从
2021/06/21 MySQL
解析目标检测之IoU
2021/06/26 Python
MySQL 数据库 增删查改、克隆、外键 等操作
2022/05/11 MySQL
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
2022/08/05 Vue.js