Bootstrap4表单处理
1. 表单复习
2.Bootstrap表单总体样式
2.1 基础样式
创建基本表单的步骤：
1.向⽗ 元素添加 role=“form”。
2.把标签和控件放在⼀个带有 class .form-group 的
中。这是获取最佳间距所必需的。
3.向所有的⽂本元素 、 和 添加 class =“form-control” 。
实例。
<form role="form">
<div class="from-group">
<label>⽤户名</label>
<input class="form-control"type="text">
</div>
<div class="form-group">
<label>密码</label>
<input  class="form-control"type="password">
</div>
</form>
2.2 内联样式
为form添加类form-inline
<form role="form"class="form-inline">
2.3 ⽔平样式
为form添加类form-horizontal
<form role="form"class="form-horizontal">
2.4 label标签
Bootstrap认为每⼀个表单控件都应该有⼀个label标签进⾏解释，否则不能实现某些特定的功能，因此我们要注意
1.为每个控件添加⼀个标签
2.如果不想看见这个标签，就为他添加⼀个sr-only类。
3.有⼀个for属性表⽰他和哪个控件绑定。
<label class="sr-only"for="name">⽤户名</label>
<input class="form-control"type="text"placeholder="name"id="name">
3.表单各个控件的样式
在这顺便复习⼀下各个控件的常⽤属性
3.1 input控件
text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。适当的type 声明是必需的，这样才能让 input 获得完整的样式。
可以有
palceholder属性，提⽰信息。
value属性，表⽰默认值。
<label class="sr-only"for="name">⽤户名</label>
<input class="form-control"type="text"placeholder="name"id="name">
3.2 textarea控件
input标签placeholder属性多⾏⽂本框，palceholder属性，提⽰信息。
row表⽰显⽰的⾏数，如果超过了这么多⾏，就会显⽰滚动条。
<div class="form-group">
<label class="sr-only"for="content">内容</label>
<textarea class="form-control"placeholder="content"id="content"rows="3"></textarea>
</div>
3.3 select 下拉选择框
使⽤ <select> 展⽰列表选项，通常是那些⽤户很熟悉的选择列表，⽐如州或者数字。
使⽤ multiple=“multiple"或"true” 允许⽤户选择多个选项。按住ctrl可以进⾏多选
<label class="sr-only"for="choice2">内容</label>
<select  multiple="true" id="choice2"class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
3.4 特殊单选、多选
4.控件的状态
4.1 焦点状态，添加form-control类后
1.焦点状态是通过伪类“:focus”来实现。Bootstrap框架中表单控件的焦点状态删除了outline的默认样式，重新添加阴影效果。
2.在Bootstrap框架中，file、radio和checkbox控件在焦点状态下的效果也与普通的input控件不太⼀样，主要是因为Bootstrap对他们做了⼀些特殊处理：
4.2 禁⽤状态disabled，添加form-control类后
在相应的表单控件上添加属性“disabled”
4.3 只读状态readonly，添加form-control类后
<div class="form-group">
<label for="test1">查看获得焦点的状态</label>
<input type="text"class="form-control"id="test1"placeholder="1">
</div>
<div class="form-group">
<label for="test2">查看不可选中的状态</label>
<input type="text"class="form-control"id="test2"placeholder="2"disabled>
</div>
<div class="form-group">
<label for="test3">查看只读的状态</label>
<input type="text"class="form-control"id="test3"placeholder="3"readonly>
</div>
4.3 验证状态
通过这个可以控制表单整体的颜⾊（在Bootstrap3中）
1、.has-warning：警告状态（黄⾊）
2、.has-error：错误状态（红⾊）
3、.has-success：成功状态（绿⾊）
同时可以设置feedback属性来设置再各个控件上显⽰状态。等待补充
5 其他
5.1帮助⽂本
<form role="form">
<span>帮助⽂本实例</span>
<input class="form-control"type="text"placeholder="">
<span class="help-block">⼀个较长的帮助⽂本块，超过⼀⾏，
需要扩展到下⼀⾏。本实例中的帮助⽂本总共有两⾏。</span>
</form>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。