编程 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小tip资料

Nov 23 Javascript

字段太多jquey快速清空表单内容方法

Aug 21 Javascript

AngularJS基础 ng-include 指令简单示例

Aug 01 Javascript

JS图片等比例缩放方法完整示例

Aug 03 Javascript

jquery实现图片平滑滚动详解

Mar 22 jQuery

ES6中Proxy代理用法实例浅析

Apr 06 Javascript

Angular6中使用Swiper的方法示例

Jul 09 Javascript

bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法

Jul 09 Javascript

使用layer弹窗提交表单时判断表单是否输入为空的例子

Sep 26 Javascript

JavaScript原型继承和原型链原理详解

Feb 04 Javascript

原生JavaScript实现轮播图

Jan 10 Javascript

Node实现搜索框进行模糊查询

Jun 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 smarty截取中文字符乱码问题?gb2312/utf-8

2011/11/07 PHP

PHP 通过Socket收发十六进制数据的实现代码

2013/08/16 PHP

ThinkPHP后台首页index使用frameset时的注意事项分析

2014/08/22 PHP

Javascript 不能释放内存.

2006/09/07 Javascript

完美解决JS中汉字显示乱码问题（已解决）

2006/12/27 Javascript

javascript数组快速打乱重排的方法

2014/01/02 Javascript

jquery自动填充勾选框即把勾选框打上true

2014/03/24 Javascript

js动态往表格的td中添加图片并注册事件

2014/06/12 Javascript

jQuery中contents()方法用法实例

2015/01/08 Javascript

JavaScript控制图片加载完成后调用回调函数的方法

2015/03/20 Javascript

JS使用eval解析JSON的注意事项分析

2015/11/14 Javascript

Web Uploader文件上传插件使用详解

2016/05/10 Javascript

jQuery插件实现图片轮播特效

2016/06/16 Javascript

EasyUI学习之DataGird分页显示数据

2016/12/29 Javascript

Jil,高效的json序列化和反序列化库

2017/02/15 Javascript

js中DOM三级列表（代码分享）

2017/03/20 Javascript

20行JS代码实现网页刮刮乐效果

2017/06/23 Javascript

JS获取url参数,JS发送json格式的POST请求方法

2018/03/29 Javascript

Python数据结构之Array用法实例

2014/10/09 Python

Python3中条件控制、循环与函数的简易教程

2017/11/21 Python

Python 12306抢火车票脚本

2018/02/07 Python

浅析python redis的连接及相关操作

2019/11/07 Python

pytorch 准备、训练和测试自己的图片数据的方法

2020/01/10 Python

Python Map 函数的使用

2020/08/28 Python

python 操作excel表格的方法

2020/12/05 Python

Room Mate Hotels美国：西班牙酒店品牌

2018/04/10 全球购物

德国大型箱包和皮具商店：Koffer

2019/10/01 全球购物

法学求职信

2014/06/22 职场文书

2015秋季开学典礼新闻稿

2015/07/17 职场文书

2016秋季田径运动会广播稿

2015/12/21 职场文书

2016暑期校本培训心得体会

2016/01/08 职场文书

个人的事迹材料怎么写

2019/04/24 职场文书

redis限流的实际应用

2021/04/24 Redis

python设置 matplotlib 正确显示中文的四种方式

2021/05/10 Python

java中用float时,数字后面加f,这样是为什么你知道吗

2021/09/04 Java/Android

mysql如何能有效防止删库跑路

2021/10/05 MySQL