AI 助理
备案控制台
开发者社区 云原生 文章 正文

Bootstrap学习笔记--表单

2018-05-27 1378
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Bootstrap表单有三种类型： 1. 垂直表单 ：表单元素垂直分布 2. 内联表单：表单元素行内分布，左对齐 3. 水平表单：表单元素水平分布默认：所有文本，和 类的元素.form-control都有100％的宽度。

Bootstrap表单有三种类型：
1. 垂直表单 ：表单元素垂直分布
2. 内联表单：表单元素行内分布，左对齐
3. 水平表单：表单元素水平分布

默认：所有文本<input>，<textarea>和 <select>类的元素.form-control都有100％的宽度。

Bootstrap的表单布局：

垂直形式（这是默认）
水平形式
内联表格

垂直表单：

举个栗子：
创建一个带有两个输入字段，一个复选框和一个提交按钮的垂直表单:
先贴一下源码：

<div class="container">
  <h2>Vertical (basic) form</h2>
  <form role="form">
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
    </div>
    <div class="checkbox">
      <label><input type="checkbox"> Remember me</label>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
</div>

效果图：
这里写图片描述

所有三种表单布局的标准规则：（用到上面例子展示）

1. 始终使用<form role=”form”>主要为了始终居中 好看（有助于改善使用屏幕阅读器的人员的可访问性)

没有效果之前：
这里写图片描述
增加<form role=”form”>之后：
这里写图片描述

2. 将标签和表格控件包裹<div class=”form-group”> （需要最佳间距）

举个栗子：

两个<div class="form-group">之间留有恰当好处的举例 
没有<div class="form-group"> 会造成表单元素太紧贴，看着粘一块 一点都不美观
3. 添加类.form-control的所有文字<input>，<textarea>和<select>元素

可能你们不是很明白什么意思 直接看图说话：

没加效果之前：
这里写图片描述

加.form-control之后：
这里写图片描述

两者效果很明显吧

内联表单：

将类添加.form-inline到<form>元素

在内联表单中，所有元素都是内联的，左对齐的，并且标签是并排的。

注意：这仅适用于至少768px宽的视口内的窗体！ 当窗体大小 小于768px宽时就是跟垂直效果一样是层叠的

举个栗子：
创建一个带有两个输入字段，一个复选框和一个提交按钮的内联表单
源码：

<div class="container">
  <h2>Inline form</h2>
  <p>Make the viewport larger than 768px wide to see that all of the form elements are inline, left aligned, and the labels are alongside.</p>
  <form class="form-inline" role="form">
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
    </div>
    <div class="checkbox">
      <label><input type="checkbox"> Remember me</label>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
</div>

效果图：

大于768px宽的视口内的窗体：
这里写图片描述

小于768px宽的视口内的窗体：
这里写图片描述

sr-only类：
如果您没有为每个输入添加标签，则屏幕阅读器会在您的表单中遇到问题。您可以使用.sr-only该类隐藏除屏幕阅读器以外的所有设备的标签
我不是很懂
源码：

 <div class="form-group">
    <label class="sr-only" for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>

效果就是不显示 Email address:这个标签 感觉没啥卵用。

主要是这句话： 你必须写标签 但是你可以通过sr-only类选择不显示标签

没有为每个输入添加标签，则屏幕阅读器会在您的表单中遇到问题。

水平表单：

水平表单的其他规则：

将类添加.form-horizontal到<form>元素
将类添加.control-label到所有<label> 元素
提示：使用Bootstrap的预定义网格类将水平布局中的标签和表单控件组对齐。

创建一个包含两个输入字段，一个复选框和一个提交按钮的水平表单
源码：

<div class="container">
  <h2>Horizontal form</h2>
  <form class="form-horizontal" role="form">
    <div class="form-group">
      <label class="control-label col-sm-2" for="email">Email:</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="email" placeholder="Enter email">
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2" for="pwd">Password:</label>
      <div class="col-sm-10">          
        <input type="password" class="form-control" id="pwd" placeholder="Enter password">
      </div>
    </div>
    <div class="form-group">        
      <div class="col-sm-offset-2 col-sm-10">
        <div class="checkbox">
          <label><input type="checkbox"> Remember me</label>
        </div>
      </div>
    </div>
    <div class="form-group">        
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-default">Submit</button>
      </div>
    </div>
  </form>
</div>

效果图：
这里写图片描述

表单输入：

支持：

输入
textarea的
复选框
无线电
选择

注意：支持所有HTML5输入类型：文本，密码，日期时间，日期时间本地，日期，月份，时间，星期，号码，电子邮件，网址，搜索，电话和颜色。

Textarea：
源码：

<div class="container">
  <form role="form">
    <div class="form-group">
      <label for="comment">Comment:</label>
      <textarea class="form-control" rows="5" id="comment"></textarea>
    </div>
  </form>
</div>

效果图：
这里写图片描述

复选框：

从预设选项列表中选择任意数量的选项，则使用复选框。
以下示例包含三个复选框。最后一个选项被禁用：
源码：

<div class="container">
  <h2>Form control: checkbox</h2>
  <p>The form below contains three checkboxes. The last option is disabled:</p>
  <form role="form">
    <div class="checkbox">
      <label><input type="checkbox" value="">Option 1</label>
    </div>
    <div class="checkbox">
      <label><input type="checkbox" value="">Option 2</label>
    </div>
    <div class="checkbox disabled">
      <label><input type="checkbox" value="" disabled>Option 3</label>
    </div>
  </form>
</div>

效果图：
这里写图片描述

.checkbox-inline:复选框显示在同一行上，请使用该类
源码：

<div class="container">
  <form role="form">
    <label class="checkbox-inline">
      <input type="checkbox" value="">Option 1
    </label>
    <label class="checkbox-inline">
      <input type="checkbox" value="">Option 2
    </label>
    <label class="checkbox-inline">
      <input type="checkbox" value="">Option 3
    </label>
  </form>
</div>
</body>

效果图：
这里写图片描述

单选按钮：

只从预设选项列表中选择一个，则使用单选按钮。
以下示例包含三个单选按钮。最后一个选项被禁用：
源码：

<div class="container">
  <form role="form">
    <div class="radio">
      <label><input type="radio" name="optradio">Option 1</label>
    </div>
    <div class="radio">
      <label><input type="radio" name="optradio">Option 2</label>
    </div>
    <div class="radio disabled">
      <label><input type="radio" name="optradio" disabled>Option 3</label>
    </div>
  </form>
</div>

效果图：
这里写图片描述

.radio-inline如果您希望单选按钮出现在同一行上，请使用该类：
源码：

<div class="container">
  <form role="form">
  <label class="radio-inline"><input type="radio" name="optradio">Option 1</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 2</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 3</label>
  </form>
</div>

效果图：
这里写图片描述

选择列表：

多选列表（按住Ctrl或Shift键（或用鼠标拖动）选择多个）

创建一个单选列表（选择一个）和一个多选列表：
源码：

<div class="container">
  <form role="form">
    <div class="form-group">
      <label for="sel1">Select list (select one):</label>
      <select class="form-control" id="sel1">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
      </select>
      <br>
      <label for="sel2">Mutiple select list (hold shift to select more than one):</label>
      <select multiple class="form-control" id="sel2">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>
    </div>
  </form>
</div>
这里写代码片

效果图：
这里写图片描述

纯文本插入

在水平表单中将表单标签旁边的纯文本插入，请使用元素.form-control-static上的类<p>

源码：

<div class="container">
  <form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="control-label col-sm-2" for="email">Email:</label>
    <div class="col-sm-10">
      <p class="form-control-static">someone@example.com</p>
    </div>
  </div>
</form>
</div>

效果图：
这里写图片描述
不加.form-control-static类：
这里写图片描述
差别一目了然。

表单控制状态：

INPUT FOCUS（输入焦点） - 输入的轮廓被移除，并在焦点上应用一个箱形阴影
DISABLED INPUTS - 添加disabled属性以禁用输入字段 
DISABLED FIELDSETS - 将一个disabled属性添加到字段集以禁用其中的所有控件
READONLY INPUTS - readonly向输入添加属性以防止用户输入
验证状态 - Bootstrap包含错误，警告和成功消息的验证样式。要使用，添加.has-warning，.has-error或.has-success父元素
图标 - 您可以添加反馈图标与.has-feedback类和图标
隐藏.sr-only标签- 在不可见标签上添加课程

注意：disabled属性不是放在class里面 而是和class并列。

以下示例以“水平”形式演示了上面的一些窗体控件状态：
源码：

<div class="container">
  <h2>Horizontal form: control states</h2>
  <form class="form-horizontal" role="form">
    <div class="form-group">
      <label class="col-sm-2 control-label">Focused</label>
      <div class="col-sm-10">
        <input class="form-control" id="focusedInput" type="text" value="Click to focus...">
      </div>
    </div>
    <div class="form-group">
      <label for="inputPassword" class="col-sm-2 control-label">Disabled</label>
      <div class="col-sm-10">
        <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
      </div>
    </div>
    <fieldset disabled>
      <div class="form-group">
        <label for="disabledTextInput" class="col-sm-2 control-label">Disabled input and select list (Fieldset disabled)</label>
        <div class="col-sm-10">
          <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
        </div>
      </div>
      <div class="form-group">
        <label for="disabledSelect" class="col-sm-2 control-label"></label>
        <div class="col-sm-10">
          <select id="disabledSelect" class="form-control">
            <option>Disabled select</option>
          </select>
        </div>
      </div>
    </fieldset>
    <div class="form-group has-success has-feedback">
      <label class="col-sm-2 control-label" for="inputSuccess">Input with success and glyphicon</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="inputSuccess">
        <span class="glyphicon glyphicon-ok form-control-feedback"></span>
      </div>
    </div>
    <div class="form-group has-warning has-feedback">
      <label class="col-sm-2 control-label" for="inputWarning">Input with warning and glyphicon</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="inputWarning">
        <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
      </div>
    </div>
    <div class="form-group has-error has-feedback">
      <label class="col-sm-2 control-label" for="inputError">Input with error and glyphicon</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="inputError">
        <span class="glyphicon glyphicon-remove form-control-feedback"></span>
      </div>
    </div>
  </form>
</div>

效果图：
这里写图片描述

表单输入大小：

用于设置原件的高度.input-lg（大）和.input-sm（小）添加到你想要修改大小的原件，不只是输入框 连label也可以变大变小哦
源码：

<form role="form">
  <div class="form-group">
    <label for="inputdefault">Default input</label>
    <input class="form-control" id="inputdefault" type="text">
  </div>
  <div class="form-group">
    <label for="inputlg">input-lg</label>
    <input class="form-control input-lg" id="inputlg" type="text">
  </div>
  <div class="form-group">
    <label for="inputsm">input-sm</label>
    <input class="form-control input-sm" id="inputsm" type="text">
  </div>
</form>

效果图：
这里写图片描述

那如果多个修改呢 ？岂不是重复代码操作 ，这点不用担心，有个办法可以：

.form-group-*添加到<div class="form-group">
就可以将.form-group-*应用到该div下的所有元素

举个栗子：

<form class="form-horizontal" role="form">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="lg">form-group-lg</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="lg">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="sm">form-group-sm</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="sm">
    </div>
  </div>
</form>

效果图：
这里写图片描述

修改元素宽：

.col-xs-*类修改 不同宽度的输入元素
源码：

<div class="col-xs-2">
  <label for="ex1">col-xs-2</label>
  <input class="form-control" id="ex1" type="text">
</div>
<div class="col-xs-3">
  <label for="ex2">col-xs-3</label>
  <input class="form-control" id="ex2" type="text">
</div>
<div class="col-xs-4">
  <label for="ex3">col-xs-4</label>
  <input class="form-control" id="ex3" type="text">
</div>

效果图：
这里写图片描述

.help-block类是帮助文字： 默认出现 无法修改和操作
举个栗子：
给表单添加帮助文字 （无法修改）
源码：

<div class="form-group">
  <label for="pwd">Password:</label>
  <input type="password" class="form-control" id="pwd" placeholder="Enter password">
  <span class="help-block">This is some help text...</span>
</div>

效果图：
这里写图片描述

文章标签：
容器
前端开发
关键词：
Bootstrap表单
Bootstrap学习笔记
codingcoge
目录
相关文章
N..
|
6月前
|
开发框架 前端开发 UED
Bootstrap表单
Bootstrap表单
N..
64 0
卡尔特斯
|
前端开发 JavaScript 数据安全/隐私保护
Bootstrap 表单样式-水平排列
Bootstrap 表单样式-水平排列
卡尔特斯
68 0
jjczqyjxgdegi
|
5月前
|
机器学习/深度学习 JSON 移动开发
详细解读BootStrap智能表单系列八表单配置json详解
详细解读BootStrap智能表单系列八表单配置json详解
jjczqyjxgdegi
33 0
香甜可口草莓蛋糕
|
6月前
|
前端开发 JavaScript 容器
Bootstrap 5 保姆级教程（十五）：表单
Bootstrap 5 保姆级教程（十五）：表单
香甜可口草莓蛋糕
309 0
汪末末
|
Web App开发 移动开发 前端开发
Bootstrap 全局CSS样式：表单类的使用
Bootstrap 框架
汪末末
49 0
Bootstrap 全局CSS样式：表单类的使用
阿里云社区
|
前端开发 开发者 容器
Bootstrap- 响应式工具|学习笔记
快速学习 Bootstrap- 响应式工具
阿里云社区
144 0
Bootstrap- 响应式工具|学习笔记
卡尔特斯
|
前端开发
Bootstrap 表单样式
Bootstrap 表单样式
卡尔特斯
41 0
游客r6jquospshcmq
开心档 - 软件开发入门之 Bootstrap4 自定义表单
Bootstrap4 自定义表单Bootstrap4 可以自定义一些表单的样式来替换浏览器默认的样式。
游客r6jquospshcmq
96 0
游客r6jquospshcmq
|
移动开发 前端开发 HTML5
开心档 - 软件开发入门之 Bootstrap4 表单控件
Bootstrap 支持所有的 HTML5 输入类型: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, 以及 color。
游客r6jquospshcmq
101 0
游客r6jquospshcmq
|
前端开发 JavaScript 容器
开心档 - 软件开发入门之 Bootstrap4 表单
在本章中，我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。
游客r6jquospshcmq
94 0