Bootstrap4 表单处理

1. 表单复习

回去看我的另一篇博客 https://blog.csdn.net/weixin_44055272/article/details/88284523

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控件

多行文本框，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 特殊单选、多选

radio和checkbox本应该属于input标签里的不同type，但是他们的对齐方式很麻烦。因此，就有了bootstrap为他设计的css.Bootsrap4里像普通的input标签一样设置就可以了。Bootstrap3里设置比较麻烦(https://www.imooc.com/code/2348).
1.Bootstrap3里处理
（1）不管是checkbox还是radio都使用label包起来了
（2）checkbox连同label标签放置在一个名为“.checkbox”的容器内
（3）radio连同label标签放置在一个名为“.radio”的容器内
4Bootstrap4的处理
（1）正常情况可以直接像普通的input属性设置就好。
（2）自定义复选框和单选框 。https://www.runoob.com/bootstrap4/bootstrap4-forms-custom.html
3.关于属性
（1）name相同的认为是一组选项。
（2）value不显示
（3）checked表示默认选中。
4.Bootstrap实例，
div里form-check-inline表示水平排列的check，form-check表示竖直的check。radio同理
label里form-check-label或form-radio-label
checkbox里form-check-input
radio里form-radion-input

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>