编程 Javascript

Bootstrap如何创建表单

Posted in Javascript onOctober 21, 2016

Bootstrap表单类型分为三种格式：垂直或基本表单、内联表单、水平表单。

垂直或基本表单(display:block;)
基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤：

向父 <form> 元素添加 role="form"。
把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。

<!doctype html>
<html lang="en">
 <head>
 <!--网站编码格式，UTF-8 国际编码，GBK或 gb2312 中文编码-->
 <meta http-equiv="content-type" content="text/html;charset=utf-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="Keywords" content="关键词一，关键词二">
 <meta name="Description" content="网站描述内容">
 <meta name="Author" content="Yvette Lau">
 <meta name = "viewport" content = " width = device-width, initial-scale = 1 "> 
 <title>BootstrapDemo</title>
 <!--css js 文件的引入-->
 <link rel="stylesheet" type="text/css" href="../bootstrap-3.3.5-dist/css/bootstrap.min.css">
 </head>
 <body style="padding: 20px;">
 <div class = "col-xs-12 col-sm-6 col-md-4 col-lg-3">
 <form role = "form">
  <div class = "form-group">
  <label for = "name">姓名</label>
  <input type = "text" class = "form-control" id = "name" 
   placeholder = "请输入姓名"></input>
  </div>
  <div class = "form-group">
  <label for = "tel">电话号码</label>
  <input type="text" class="form-control" id = "tel" 
   placeholder = "请输入您的电话号码"></input>
  </div>
  <div class = "form-group">
  <label for = "idCard">请上传身份证</label>
  <input type = "file" id = "idCard"></input>
  </div>
  <div class = "form-group">
  <label for = "profession">选择职业</label>
  <select id = "profession" class = "form-control">
   <option>软件工程师</option>
   <option>测试工程师</option>
   <option>硬件工程师</option>
   <option>质量分析师</option>
  </select>
  </div>
  <div class="form-group">
  <button type = "submit" class="btn-info btn-lg">提交</button> 
  </div>
 </form>
 </div>
 </body>
</html>

效果如下：

Bootstrap如何创建表单

如果我们将select的form-control去掉，并给input type = "file"加上form-control，看看效果如何。

是不是能看出和上面效果的区别了呢？这样您大概明白form-control的作用了，它是设置外围的边框效果，包括宽、高、获取

焦点时form的样式。

内联表单（全部在同一行，display为inline-block）

如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向 <form> 标签添加 class .form-inline。
因为head部分的内容都是一样的，所以我们只列出body部分的内容。

<body style="padding: 20px;">
 <form role = "form" class="form-inline">
 <div class = "form-group">
  <label for = "name">姓名</label>
  <input type = "text" class = "form-control" id = "name" placeholder = "请输入姓名"></input>
 </div>
 <div class = "form-group">
  <label for = "tel">电话号码</label>
  <input type="text" class="form-control" id = "tel" placeholder = "请输入您的电话号码"></input>
 </div>
 <div class = "form-group">
  <label for = "idCard">请上传身份证</label>
  <input type = "file" id = "idCard"></input>
 </div>
 <div class = "form-group">
  <label for = "profession">选择职业</label>
  <select id = "profession" class = "form-control">
  <option>软件工程师</option>
  <option>测试工程师</option>
  <option>硬件工程师</option>
  <option>质量分析师</option>
  </select>
 </div>
 <div class="form-group">
  <button type = "submit" class="btn-info btn-lg">提交</button> 
 </div>
 </form> 
</body>

显示效果：

Bootstrap如何创建表单

默认情况下，Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在使用水平表单时，您需要在表单控件上设置一个宽度。

使用 class .sr-only，可以隐藏内联表单的标签。

注：sr-only是展示给屏幕阅读器，而非是普通的读者看的。
其它元素在form的class为form-inline时，display为inLine-block;但是input tyoe = "file"却仍是display:block，可以看出其布局是有问题的，此时可以单独设置其display为inline-block;

水平表单(label和input等表单元素在同一行)

水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。如需创建一个水平布局的表单，请按下面的几个步骤进行：

     1、向父 <form> 元素添加 class .form-horizontal。
     2、把标签和控件放在一个带有 class .form-group 的 <div> 中。
     3、向标签添加 class .control-label。
     4、设置label和其兄弟div的宽度（因为input等默认宽度是100%）。

<body style="padding: 20px;">
 <form role = "form" class="form-horizontal">
 <div class = "form-group">
  <label class="col-sm-2 control-label" for = "name">姓名</label>
  <div class="col-sm-2">
  <input type = "text" class = "form-control" id = "name" 
   placeholder = "请输入姓名"></input>
  </div>
 </div>
 <div class = "form-group">
  <label class="col-sm-2 control-label" for = "tel">电话号码</label>
  <div class="col-sm-2">
  <input type="text" class="form-control" id = "tel" 
   placeholder = "请输入您的电话号码"></input>
  </div>
 </div>
 <div class = "form-group">
  <label class="col-sm-2 control-label" for = "idCard">请上传身份证</label>
  <div class="col-sm-2">
  <input type = "file" id = "idCard" style="display:inline-block;"></input>
  </div>
 </div>
 <div class = "form-group">
  <label class="col-sm-2 control-label" for = "profession">选择职业</label>
  <div class="col-sm-2">
  <select id = "profession" class = "form-control">
   <option>软件工程师</option>
   <option>测试工程师</option>
   <option>硬件工程师</option>
   <option>质量分析师</option>
  </select>
  </div>
 </div>
 <div class="form-group">
 <div class="col-sm-2 col-sm-offset-2">
 <button type = "submit" class="btn-info btn-lg">提交</button>
 </div>  
 </div>
 </form> 
</body>

效果：

Bootstrap如何创建表单

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程

Bootstrap如何创建表单

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript 面向对象编程 function是方法(函数)

Sep 17 Javascript

JQuery Tab选项卡效果代码改进版

Apr 01 Javascript

基于JQuery的一个简单的鼠标跟随提示效果

Sep 23 Javascript

jquery实现按Enter键触发事件示例

Sep 10 Javascript

extjs 分页使用jsp传递数据示例

Jul 29 Javascript

jQuery中add()方法用法实例

Jan 08 Javascript

js中 javascript:void(0) 用法详解

Aug 11 Javascript

全面解析Bootstrap表单使用方法（表单控件状态）

Nov 24 Javascript

JS函数的几种定义方式分析

Dec 17 Javascript

jQuery与Ajax以及序列化

Feb 01 Javascript

最好用的Bootstrap fileinput.js文件上传组件

Dec 12 Javascript

解决layui下拉框监听问题(监听不到值的变化)

Sep 28 Javascript

bootstrap table小案例

Oct 21 #Javascript

jquery+Jscex打造游戏力度条

Sep 12 #Javascript

基于百度地图实现产品销售的单位位置查看功能设计与实现

Oct 21 #Javascript

node.js学习之base64编码解码

Oct 21 #Javascript

JavaScript浮点数及运算精度调整详解

Oct 21 #Javascript

利用Node.JS实现邮件发送功能

Oct 21 #Javascript

bootstrap中使用google prettify让代码高亮的方法

Oct 21 #Javascript

You might like

PHP中函数内引用全局变量的方法

2008/10/20 PHP

PHP中VC6、VC9、TS、NTS版本的区别与用法详解

2013/10/26 PHP

PHP模板解析类实例

2015/07/09 PHP

tp5框架内使用tp3.2分页的方法分析

2019/05/05 PHP

JQuery 学习笔记 element属性控制

2009/07/23 Javascript

用JS写的一个TableView控件代码

2010/01/23 Javascript

jQuery中的bind绑定事件与文本框改变事件的临时解决方法

2010/08/13 Javascript

jquery 读取页面load get post ajax 四种方式代码写法

2011/04/02 Javascript

jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析

2013/04/26 Javascript

JavaScript改变HTML元素的样式改变CSS及元素属性

2013/11/12 Javascript

Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

2013/11/14 Javascript

jquery插件推荐浏览器嗅探userAgent

2014/11/09 Javascript

node.js中的favicon.ico请求问题处理

2014/12/15 Javascript

学习JavaScript事件流和事件处理程序

2016/01/25 Javascript

js小数计算小数点后显示多位小数的实现方法

2016/05/30 Javascript

Javascript实现一个简单的输入关键字添加标签效果实例

2017/06/01 Javascript

详解前端路由实现与react-router使用姿势

2017/08/07 Javascript

webpack css加载和图片加载的方法示例

2018/09/11 Javascript

Python断言assert的用法代码解析

2018/02/03 Python

django中的HTML控件及参数传递方法

2018/03/20 Python

django+xadmin+djcelery实现后台管理定时任务

2018/08/14 Python

pyhanlp安装介绍和简单应用

2019/02/22 Python

python shell命令行中import多层目录下的模块操作

2020/03/09 Python

牦牛毛户外探险服装：Kora

2019/02/08 全球购物

经管应届生求职信

2013/11/17 职场文书

寒假思想汇报

2014/01/10 职场文书

迎接领导欢迎词

2014/01/11 职场文书

大学生学习2014全国两会心得体会

2014/03/13 职场文书

小学学校评估方案

2014/06/08 职场文书

新书发布会策划方案

2014/06/09 职场文书

班级课外活动总结

2014/07/09 职场文书

机关党建工作汇报材料

2014/08/20 职场文书

医药公司采购员岗位职责

2014/09/12 职场文书

千手观音观后感

2015/06/03 职场文书

Python列表删除重复元素与图像相似度判断及删除实例代码

2021/05/07 Python

javascript遍历对象的五种方式实例代码

2021/10/24 Javascript