完全深入学习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 相关文章推荐
JavaScript XML操作 封装类
Jul 01 Javascript
Google AJAX 搜索 API实现代码
Nov 17 Javascript
用javascript对一个json数组深度赋值示例
Jul 27 Javascript
让浏览器DOM元素最后加载的js方法
Jul 29 Javascript
jquery实现select选择框内容左右移动代码分享
Nov 21 Javascript
Bootstrap3 input输入框插入glyphicon图标的方法
May 16 Javascript
基于JS实现回到页面顶部的五种写法(从实现到增强)
Sep 03 Javascript
jQuery版AJAX简易封装代码
Sep 14 Javascript
详解Vue监听数据变化原理
Mar 08 Javascript
JavaScript创建对象_动力节点Java学院整理
Jun 27 Javascript
ES6 Promise对象概念及用法实例详解
Oct 15 Javascript
javascript实现简单留言板案例
Feb 09 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
ThinkPHP php 框架学习笔记
2009/10/30 PHP
wordpress自定义url参数实现路由功能的代码示例
2013/11/28 PHP
php目录遍历函数opendir用法实例
2014/11/20 PHP
php使用cookie显示用户上次访问网站日期的方法
2015/01/26 PHP
用PHP的socket实现客户端到服务端的通信实例详解
2017/02/04 PHP
asp.net和asp下ACCESS的参数化查询
2008/06/11 Javascript
Jquery 设置标题的自动翻转
2009/10/03 Javascript
如何使用jQUery获取选中radio对应的值(一句代码)
2013/06/03 Javascript
js实现的点击数量加一可操作数据库
2014/05/09 Javascript
使用jQuery操作HTML的table表格的实例解析
2016/03/13 Javascript
AngularJs学习第八篇 过滤器filter创建
2016/06/08 Javascript
JS遍历页面所有对象属性及实现方法
2016/08/01 Javascript
AngularJS基础 ng-options 指令详解
2016/08/02 Javascript
前端js实现文件的断点续传 后端PHP文件接收
2016/10/14 Javascript
jQuery异步提交表单实例
2017/05/30 jQuery
基于bootstrap写的一点localStorage本地储存
2017/11/21 Javascript
vue 移动端适配方案详解
2018/11/15 Javascript
微信小程序 checkbox使用实例解析
2019/09/09 Javascript
常用python编程模板汇总
2016/02/12 Python
Python中如何获取类属性的列表
2016/12/26 Python
sublime text 3配置使用python操作方法
2017/06/11 Python
django启动uwsgi报错的解决方法
2018/04/08 Python
python去除扩展名的实例讲解
2018/04/23 Python
Python动态生成多维数组的方法示例
2018/08/09 Python
我用Python抓取了7000 多本电子书案例详解
2019/03/25 Python
使用Tensorflow将自己的数据分割成batch训练实例
2020/01/20 Python
Python 实现打印单词的菱形字符图案
2020/04/12 Python
基于python实现可视化生成二维码工具
2020/07/08 Python
Keras保存模型并载入模型继续训练的实现
2021/02/20 Python
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
2014/08/08 HTML / CSS
英国购买威士忌网站:Master of Malt
2019/09/26 全球购物
一份软件工程师的面试试题
2016/02/01 面试题
个人收入证明模板
2014/09/18 职场文书
银行保安拾金不昧表扬稿
2015/05/05 职场文书
员工手册编写范本
2015/05/14 职场文书
【js设计模式】SOLID五大设计原则
2022/03/24 Javascript