表单

一、示例

二、表单控件

文本控件（如 <input>、<select>、 <textarea>）统一采用 .form-control 样式进行处理优化，包括常规外观、focus选（点）中状态、尺寸大小等。

对于input文件选择控件，Bootstrap v4采用.form-control-file 取代了.form-control 。

1,大小规格

使用 .form-control-lg 和 .form-control-sm属性定控件大小高度。

2,只读属性

在input控件上增加 readonly （布尔值）标签定义，以防止修改input中的值。仅能阅读的input控件显示较谈（就象禁用的输入框），但保留鼠标效果。

3,只读纯文本

如果你希望将 <input readonly>属性进一步处理，显示为纯文本（没有控件框），你只要引用 .form-control-plaintext class样式，就能移除预设的表单样式，并保留适当的边距和填充间隙。

根据需要将内联表单引用系统提供的内容与对齐等class样式。

三、输入范围

使用设置水平滚动范围输入.form-control-range。

四、复选框与单选框

使用.form-check 可以格式化复选框和单选框按钮，用以改进它们的默认布局和动作呈现。

复选框和单选框也是可以禁用的，只要not-allowed在父级的悬停上提供定义，<label>需要将该.disabled 类添加到父级.form-check，同时控件也会淡化文字颜色以灰色显示禁用状态。

1,默认堆叠

默认情况下，同级任意数量的复选框与单选框按钮垂直堆叠，并与.form-check有间隙隔离。

Option one is this and that—be sure to include why it's great

Option two is disabled

class="form-check disabled"不知道什么用，把disabled删了也没什么影响

Option one is this and that—be sure to include why it's great

Option two can be something else and selecting it will deselect option one

Option three is disabled

2,水平排列

通过添加 .form-check-inline到任何一个组，会使加到任何.form-check中的选取框平行排列。

3 (disabled)

3,没有标签

添加 .position-static 到 .form-check 选择器上，可以实现没有文本的输入，记住：仍然要为辅助浏览（友好访问）提供相应标签，如使用 aria-label定义。

五、布局

自从 Bootstrap 使用display: block 和 width: 100% 在全部的 input 控件上后，表单默认都是基于垂直堆叠排列的，可以使用其它Class类来改变表单的布局。

1,表单组

.form-group 群组可以向为表单赋予一些结构样式，其唯一目的是提供标签的控制配对以及margin-bottom 属性，由于它是一个class选择器，你可以在<fieldset>、 <div>或任何其它元素中使用它。

2,表单栅格排列

可使用我们的栅格系统构建更复杂的表单，包括建立多列、多种宽度和其它对齐选项的布局。

2-1,表单栅格排列

你也可以使用 .form-row来取代.row（它们二者很多时候可以互换使用），因为.form-row提供更小的沟槽缝隙。

还可以使用栅格系统建立更复杂的布局。

2-2,垂直排列表单

通过添加 .row class类，并使用 .col-*-* 等栅格组件来指定标签和宽度，可以建立起水平表单。

确保添加.col-form-label 到您<label>上，以便他们垂直居中与他们相关的表单控件。<legend>元素，可以.col-form-legend样式定义，与普通<label>元素相似。.

2-3,垂直排列表单尺寸规格定义

使用.col-form-label-sm 、 .col-form-label-lg 到 <label>上，可以定义控件大小，还有 .form-control-lg 、 .form-control-sm样式也起相应作用。

2-4,栅格式列尺寸定义

如前面的示例所示，我们的栅格系統允许您将任意数量的的 .col放置在.row 或.form-row中,它们会在自动进行宽度分割（根据你的栅格定义），从而定义某列更窄或某列更宽（其余列享受流式布局宽度定义）。

2-5,自动调整大小

下面的示例使用一个flexbox弹性布局垂直居中的内容，我们将.col改为.col-auto，这样的列只占用本身内容所需要的宽度，换句话说列的大小就是内容的大小（宽度）

然后，你可以重新混合不同大小的class样式。

也支持自定义表单控件。.

3,内联式表单

使用 .form-inline样式在单个水平行上显示一系列标签，表单控件和按钮。内联表单中的表单控件与默认状态略有不同：

基于display: flex控件组件，并允许您使用间隙隔离和 flexbox 弹性布局样式。
控制组件和input接受 width: auto 以覆盖预设的 width: 100%。
控制组件只会在viewport 576px宽度 时才会显示在行内，以便在移动设备上完整呈现。

你需要手机添加宽度或对齐在单个的控制元件上，通过间隙隔离定义 (如下所示)，最后一定要将 <label>包含在每个表单控制元件内，即使你需要使用 .sr-only从非正常屏幕访问它或隐藏它。

自定义表单和select选择控件也是支持的。

六、表单下方帮助提示文本

可以使用..form-text t（以前称为.help-block 在v3中）创建表单中的块级帮助文本。可以使用任何内联HTML元素和通用样式（如.text-muted）灵活的展示帮助提示文本。

帮助提示文本应该与使用该aria-describedby与表单控制元件相关联，这将确保辅助技术（如读屏器）在用户focus点中或input输入时了解此帮助提示文字。

input 下方的帮助文字可以用 .form-text.，包括 display: block并添加一些 margin-top以便与上面input框有所间隔。

Password Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.

行内也可以嵌入任意典型的HTML元素（无是<small>、 <span>,或其它样式)。

七、禁用表单

添加 disabled 布尔值属性到input上，就能防止使用者操作并看起来更灰淡。

添加disabled到<fieldset>上，禁用其内部的所有表单元素。

八、验证

https://code.z01.com/v4/components/forms.html