bootstrap表单示例代码分享

乔乔 2017-05-18

本文实例为大家分享了bootstrap表单的具体代码，供大家参考，具体内容如下

<!DOCTYPE html> 
<html lang="zh-CN"> 
<head> 
 <meta charset="utf-8"> 
 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 
 <title>表单和图片</title> 
 <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css" rel="external nofollow" > 
 <link rel="stylesheet" href="css/main.css" rel="external nofollow" > 
 <!--[if lt IE 9]> 
 <script src="lib/html5shiv/html5shiv.min.js"></script> 
 <script src="lib/respond/respond.min.js"></script> 
 <![endif]--> 
</head> 
<body> 
 
<form> 
 <label>用户名：</label> 
 <input type="text" placeholder="请输入用户名"> 
 
 <label>密码：</label> 
 <input type="password" placeholder="请输入密码"> 
</form> 
<form> 
 <label>用户名：</label> 
 <input type="text" placeholder="请输入用户名" class="form-control"> 
 
 <label>密码：</label> 
 <input type="password" placeholder="请输入密码" class="form-control"> 
</form> 
<!--基本表单--> 
<form> 
 <div class="form-group"> 
  <label>用户名：</label> 
  <input type="text" placeholder="请输入用户名" class="form-control"> 
 </div> 
 
 <div class="form-group"> 
  <label>密码：</label> 
  <input type="password" placeholder="请输入密码" class="form-control"> 
 </div> 
</form> 
<!--内联表单--> 
<form class="form-inline"><!--当屏幕小于768时，变为两行--> 
 <div class="form-group"> 
  <label>用户名：</label> 
  <input type="text" placeholder="请输入用户名" class="form-control"> 
 </div> 
 
 <div class="form-group"> 
  <label>密码：</label> 
  <input type="password" placeholder="请输入密码" class="form-control"> 
 </div> 
</form> 
<!--加入input-group-addon--> 
<form class="form-inline"> 
 <div class="form-group"> 
  <label>用户名：</label> 
  <input type="text" placeholder="请输入用户名" class="form-control"> 
 </div> 
 
 <div class="form-group"> 
  <label>密码：</label> 
  <input type="password" placeholder="请输入密码" class="form-control"> 
 </div> 
 
 <div class="input-group"> 
  <div class="input-group-addon">￥</div> 
  <input type="number" placeholder="请输入整数" class="form-control"> 
  <div class="input-group-addon">元</div> 
 </div> 
</form> 
<!--水平表单--> 
<form class="form-horizontal"><!--当屏幕小于768时，变为两行--> 
 <div class="form-group"> 
  <div class="col-sm-2 control-label"> 
   <label>用户名：</label> 
  </div> 
  <div class="col-sm-10"> 
   <input type="text" placeholder="请输入用户名" class="form-control"> 
  </div> 
 </div> 
 
 <div class="form-group"> 
  <div class="col-sm-2 control-label"> 
   <label>密码：</label> 
  </div> 
  <div class="col-sm-10"> 
   <input type="password" placeholder="请输入密码" class="form-control"> 
  </div> 
 </div> 
</form> 
<!--文本域--> 
<form> 
 <textarea rows="3"></textarea> 
</form> 
<form> 
 <div class="form-group"> 
  <label>文本域</label> 
  <textarea rows="3" class="form-control"></textarea> 
 </div> 
</form> 
<!--复选框--> 
<form> 
 <input type="checkbox">体育 
 <input type="checkbox">音乐 
 
 <label> 
  <input type="checkbox">体育 
 </label> 
 <label> 
  <input type="checkbox">音乐 
 </label> 
<!--基本复选框和复选框设置禁用--> 
 <div class="checkbox"> 
  <label> 
   <input type="checkbox">体育 
  </label> 
 </div> 
 <div class="checkbox"> 
  <label> 
   <input type="checkbox">音乐 
  </label> 
 </div> 
 <div class="checkbox disabled"> 
  <label> 
   <input type="checkbox" disabled>爱好 
  </label> 
 </div> 
<!--内联复选框--><!--复选框用法和单选框一样的--> 
  <label class="checkbox-inline"> 
   <input type="checkbox">体育 
  </label> 
  <label class="checkbox-inline"> 
   <input type="checkbox">音乐 
  </label> 
  <label class="checkbox-inline disabled"> 
   <input type="checkbox" disabled>爱好 
  </label> 
</form> 
<!--下拉框--> 
<form> 
 <select> 
  <option>1</option> 
  <option>2</option> 
  <option>3</option> 
  <option>4</option> 
 </select> 
 <select class="form-control"> 
  <option>1</option> 
  <option>2</option> 
  <option>3</option> 
  <option>4</option> 
 </select> 
</form> 
<!--校验状态--> 
<form> 
 <div class="form-group has-success has-feedback"> 
  <label class="control-label">用户名：</label> 
  <input type="text" placeholder="请输入用户名" class="form-control"> 
  <span class="glyphicon glyphicon-ok form-control-feedback"></span> 
 </div> 
 <div class="form-group"> 
  <label>密码：</label> 
  <input type="password" placeholder="请输入密码" class="form-control"> 
 </div> 
</form> 
<script src="lib/jquery/jquery.js"></script> 
<script src="lib/bootstrap/js/bootstrap.js"></script> 
<script src="js/main.js"></script> 
</body> 
 
</html>
乔乔

乔乔

相关推荐

BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑

BootStrapValidator表单验证插件的坑还真不少，又让我碰上一个...我这样写了之后 ，点击其它按钮仍会触发验证...以上所述是小编给大家介绍的BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑,希望对大家有所帮助，如果大家

niepxiya / 0评论 2019-09-05

Bootstrap表单排版

<!doctype html>. <meta name="viewport" content="width=device-width, initial-scale=1.0">. <!--

TemplarAssassin / 0评论 2017-10-25

Bootstrap表单

<input id="username" type="text" class="span3" placeholder="输入您的用户名">

TemplarAssassin / 0评论 2017-10-16

bootstrap 表单一

八 表单控件单行输入框，常见的文本输入框，也就是input的type属性值为text。号代表type类型，比如说text类型，对应的是input[type=“text”])的形式来定义样式的为了让控件在各种表单风格中样式不出错，需要添加类名“form-co

jingtianyiyi / 0评论 2015-12-16

bootstrap学习笔记6

表单元素实现用户与WEB服务器交互的功能，是动态WEB技术的重要要素之一。表单接收用户的信息，并把信息提交给服务器，然后由服务器端的应用程序处理信息，把处理结果返给用户并向用户显示。Bootstrap对这个重要的HTML标签提供了一些修饰类。这时可以通过为

happyzhangyin / 0评论 2013-11-11

Bootstrap 表单

基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤：。向父 &lt;form&gt; 元素添加 role="form"。把标签和控件放在一个带有 class .

jingtianyiyi / 0评论 2017-03-10

基于Bootstrap表单验证功能

</script>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持安科网。

相信未来 / 0评论 2017-11-17

BootStrap表单控件之文本域textarea

-- 可选的 Bootstrap 主题文件 -->. -- 最新的 Bootstrap 核心 JavaScript 文件 -->

移动开发与培训 / 0评论 2017-05-23

BootStrap 表单控件之单选按钮水平排列

-- 可选的 Bootstrap 主题文件 -->. -- 最新的 Bootstrap 核心 JavaScript 文件 -->

soulis / 0评论 2017-05-23

BootStrap表单控件之复选框checkbox和单选择按钮radio

-- 可选的 Bootstrap 主题文件 -->. -- 最新的 Bootstrap 核心 JavaScript 文件 -->

hllinc / 0评论 2017-05-23

Bootstrap 表单验证formValidation 实现远程验证功能

最近项目用到了一个很强大的表单验证。还有一点很重要：这个插件的Bootstrap最好用他们自带的，有点改动。不用再去Bootstrap官网下载。</form>下面是验证代码；message: '此值无效', icon: { valid: 'gl

iChangebaobao / 0评论 2017-05-17

BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码

在某些情况下，反馈图标未正确显示。}通过自定义值top和right属性，您可以将反馈图标调整为应有的位置。

soulis / 0评论 2017-05-17

如何使用Bootstrap创建表单

在本章中，我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。- 向父 <form&

qiukui00 / 0评论 2017-03-29

整理关于Bootstrap表单的慕课笔记

表单主要功能是用来与用户做交流的一个网页控件，良好的表单设计能够让网页与用户更好的沟通。对于基础表单，Bootstrap并未对其做太多的定制性效果设计，仅仅对表单内的fieldset、legend、label标签进行了定制。主要将这些元素的margin、p

zh000 / 0评论 2017-03-29

Bootstrap表单制作代码

<label for="Student ID" class="col-sm-2 control-label">学号</label>. <input type="text&quo

CoderEight / 0评论 2017-03-17

BootStrap表单宽度设置方法

用bootstrap的栅格“ coll-md- ”命令设置宽度总是不尽人意，有时上下框对不齐，有时上下宽度又不齐，这时建议用“style="width:100px" ". <label class="col-s

lixia / 0评论 2017-03-10

BootStrap注意事项小结（五）表单

单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。将 label 元素

ReunionIsland / 0评论 2017-03-10

bootstrap表单按回车会自动刷新页面的解决办法

问题解决，原因应该是form表单按enter会自动提交的原因。

相信未来 / 0评论 2017-03-08

Bootstrap表单控件学习使用

最常见的表单文本字段是输入框 input。用户可以在其中输入大多数必要的表单数据。Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持，包括：text、password、datetime、datetime-local、date、m

男儿何必尽成功 / 0评论 2017-03-07

Bootstrap表单简单实现代码

-- 内联表单 横向排列-->. -- 水平表单,分配格数，总共12格 纵向排列-->

ruisenabc / 0评论 2017-03-06

Bootstrap导航中表单简单实现代码

<a class="navbar-brand" href="#" rel="external nofollow" rel="external nofollow" rel=

niepxiya / 0评论 2017-03-06

bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能

如图，这是使用Validator插件，所完成的功能，效果很强大，也很方便，这边推荐使用这种方式，最后介绍一下原始js验证写法。<button type="button" class="close" data-d

hllinc / 0评论 2017-02-17

Bootstrap表单使用方法详解

基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。--向父 <form> 元素添加 role="form"。--把标签和控件放在一个带有 class .form-group 的 <div

niepxiya / 0评论 2017-02-17

bootstrap为水平排列的表单和内联表单设置可选的图标

为水平排列的表单和内联表单设置可选的图标.-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and m

男儿何必尽成功 / 0评论 2019-05-09

bootstrap css样式之表单

为 form 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口至少在 768px 宽度时。如果你没有为每个输入控件设置 label 标签，屏幕阅读器将无法正确识别。对于这些内联表单，你可以

CCCSSSDNNN / 0评论 2019-05-09

BootStrap表单验证实例代码

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。<input type="text" id=&qu

男儿何必尽成功 / 0评论 2017-01-13

bootstrap 表单验证使用方法

友好的错误提示能增加用户体验。博主搜索bootstrap表单验证，搜到的结果大部分都是文中的主题：bootstrapvalidator。今天就来看看它如何使用吧。介绍它之前，还是给出它的源码以及API的地址吧。来看bootstrapvalidator的描述

Chinahdy / 0评论 2017-01-11

Bootstrap表单控件使用方法详解

表单作为Bootstrap的核心内容，主要功能是用来与用户做交流的一个网页控件，良好的表单设计能够让网页与用户更好的沟通。-- 使用最新的浏览器内核解析 -->. -- 移动设备优先 -->. <label class="col

wander0 / 0评论 2017-01-11

Bootstrap源码解读表单（2）

对于基础表单，Bootstrap并未对其做太多的定制性效果设计，仅仅对表单内的fieldset、legend、label标签进行了定制。主要将这些元素的margin、padding和border等进行了细化设置。这些元素如果使用了类名“form-contr

相信未来 / 0评论 2016-12-22

基于BootStrap与jQuery.validate实现表单提交校验功能

现在社会坚持以人为本的理念，在网站开发过程同样如此。User是我们面对较多的对象，也是较核心的对象。用户注册和登录其实往往比我们想象的难。其实正则并不难，并且在学会后能带给你极大的成就感，享受那种事半功倍的效果吧。在验证用户名是否存在、用户登录时账号或者密

zh000 / 0评论 2016-12-22

Bootstrap CSS布局之表单

表单是html网页交互很重要的部分，同时也是BootSTrap框架中的核心内容，表单提供了丰富的样式。表单的元素 input textarea select checkbox radio 其他标签 form fieldset legend. 这是获取最佳间

猫儿不熊 / 0评论 2016-12-17

深入学习Bootstrap表单

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

wuchangjian / 0评论 2016-12-13

Bootstrap基本样式学习笔记之表单(3)

Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。<input type="password" class="form-control" id="PassWord&

htmlman0 / 0评论 2016-12-07

完全深入学习Bootstrap表单

表单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。<input type="email" class="form-control" id="exampleInput

iChangebaobao / 0评论 2016-11-28

Bootstrap简单表单显示学习笔记

<input type="text" class="form-control" id="name" name="name-text" placeholder="

wuchangjian / 0评论 2016-11-15

Bootstrap如何创建表单

Bootstrap表单类型分为三种格式：垂直或基本表单、内联表单、水平表单。垂直或基本表单基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤：。向父 <form> 元素添加 role=

来老师 / 0评论 2019-05-08

表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题

在移动平台页面的开发中，为了让表单项的可点区域变大而更好的操作，label可提供相应的便利。但有时，我们只是需要label标签，却不希望可点区域无故增大。而Bootstrap的引入，自动增大了可点区域。如上图所示，只是希望点击input项才产生效果，但点击

lixia / 0评论 2019-05-08

全面解析Bootstrap表单样式的使用

本文主要给大家介绍了bootstrap表单样式的使用知识，非常不错，一起看看吧！<input type="email" class="form-control" id="exampleInputEma

Chinahdy / 0评论 2019-05-08

BootStrap中的表单大全

对于表单中的input、textarea、select，一般我都会加上类”form-control”,它设置元素的默认宽度为100%。并且每个元素都会加上”form-group”。它的样式只有一个。通过给最外层元素加上”form-inline”。表示所有表

hllinc / 0评论 2016-09-07

Bootstrap中表单控件状态(验证状态)

在制作表单时，难免要做表单验证。同样也需要提供验证状态样式，在Bootstrap框架中同样提供这几种效果。使用的时候只需要在form-group容器上对应添加状态类名。<label class="control-label" fo

soulis / 0评论 2016-08-04

第一次接触神奇的Bootstrap表单

本篇将主要介绍Bootstrap表单的使用技巧。表单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。<input type="email" class="form-control&quo

zjnig的信息仓库 / 0评论 2016-07-27

Bootstrap Validator 表单验证

13. message: 'The username is required and cannot be empty'

相信未来 / 0评论 2016-07-25

Bootstrap表单布局

垂直表单（默认） -> 这个不好看，都是手机版了，PC版占一排不好看；内联表单 -> 我相信这个才是你想要的，PC版响应横排，手机版响应竖排。<input type="text" class="form-co

男儿何必尽成功 / 0评论 2016-07-19

Bootstrap实现水平排列的表单

通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行，因此就无需再额外添加 .row 了。水

Chinahdy / 0评论 2019-05-06

Bootstrap表单布局样式源代码

Bootstrap提供了三种表单布局：垂直表单，内联表单和水平表单创建垂直或基本表单：向父 <form> 元素添加 role="form"。把标签和控件放在一个带有 class .form-group 的 <div&g

lixia / 0评论 2019-05-06

第七篇Bootstrap表单布局实例代码详解(三种表单布局)

Bootstrap提供了三种表单布局：垂直表单，内联表单和水平表单。下面逐一给大家介绍，有兴趣的朋友一起学习吧。向父 <form> 元素添加 role="form"。把标签和控件放在一个带有 class .form-grou

wuchangjian / 0评论 2016-06-21

Bootstrap三种表单布局的使用方法

Bootstrap提供了三种表单布局：垂直表单，内联表单和水平表单创建垂直或基本表单：向父 <form> 元素添加 role="form"。把标签和控件放在一个带有 class .form-group 的 <div&g

wuchangjian / 0评论 2016-06-21

BootStrap智能表单实战系列(六)表单编辑页面的数据绑定

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。B

soulis / 0评论 2016-06-13

BootStrap智能表单实战系列(八)表单配置json详解

eles的配置支持2中情况，一种是分组的情况，另外一种是非分组的情况，细心的博友发现为什么要在元素配置项里面多此一举加一个ele，然后再ele里面存放元素的属性，而不是直接放在元素配置项里面呢。A、label：即表达元素前面的提示字符，label里面的配置

男儿何必尽成功 / 0评论 2016-06-13