3.2 表单 (Forms) 组件

## 3.2 表单 (Forms) 组件 --- ## Bootstrap 组件详解：3.2 表单 (Forms) ### 3.2.1 表单基础结构 在 Bootstrap 中构建表单，首先要理解其基本结构。一个典型的 Bootstrap 表单由以下几个核心元素构成： * **`` 元素**: 这是所有表单元素的容器，定义了表单的提交方式 (method) 和提交地址 (action)。 * **.form-group 类**: 用于包裹表单控件（例如 ``、``、``）和其对应的 `<label>` 标签。`.form-group` 类主要负责设置表单控件的间距和排列，通常表现为垂直堆叠。 * **.form-control 类**: 这是 Bootstrap 表单组件的核心类，应用于 `<input>`、`<select>` 和 `<textarea>` 等表单控件。它赋予表单控件 Bootstrap 默认的样式，包括 100% 宽度、内边距、边框、圆角、阴影效果以及焦点状态的样式。 * **`<label>` 元素**: 用于描述表单控件的含义，通过 `for` 属性关联对应的表单控件 `id`，增强表单的可访问性。 **代码实践 3.2.1：基础表单结构** ```html <form role="form"> <div class="form-group"> <label for="exampleInputEmail1">邮箱地址</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入邮箱"> </div> <div class="form-group"> <label for="exampleInputPassword1">密码</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码"> </div> <div class="checkbox"> <label> <input type="checkbox"> 记住我 </label> </div> <button type="submit" class="btn btn-default">提交</button> </form> ``` **内容详解 3.2.1：基础表单结构** * **`role="form"`**: 为 `<form>` 元素添加 `role="form"` 属性，可以提高表单在辅助技术（如屏幕阅读器）中的可访问性，虽然在 Bootstrap 中并非强制，但建议添加。 * **`.form-group` 的作用**: `.form-group` 类为每个表单控件组提供了清晰的结构，使得表单在垂直方向上整齐排列，并留有适当的间距。 * **`.form-control` 的样式**: `.form-control` 类赋予了表单控件统一的外观，使其与 Bootstrap 整体风格保持一致。它确保了表单控件在不同浏览器和设备上具有良好的显示效果。 * **`<label for="...">`**: `<label>` 标签的 `for` 属性与 `<input>` 标签的 `id` 属性关联，点击 `label` 标签时，焦点会自动定位到关联的输入框，提升用户体验和表单的可访问性。 **Mermaid 图表 3.2.1：基础表单结构** ```mermaid graph TD A[<form role="form">] --> B(div.form-group); B --> C{label for="..."}; B --> D{input.form-control}; A --> E(div.checkbox); E --> F{label}; E --> G{input type="checkbox"}; A --> H{button.btn.btn-default type="submit"}; style A fill:#f9f,stroke:#333,stroke-width:2px style B fill:#ccf,stroke:#333,stroke-width:2px style E fill:#ccf,stroke:#333,stroke-width:2px style H fill:#aaf,stroke:#333,stroke-width:2px ``` ### 3.2.2 表单布局 Bootstrap 提供了多种表单布局方式，以适应不同的设计需求。主要包括： * **默认垂直表单**: 这是最常见的表单布局，表单控件垂直堆叠排列，每个控件占据一行。我们上面 **代码实践 3.2.1** 展示的就是默认垂直表单。 * **内联表单 (Inline Forms)**: 适用于表单元素较少且需要在同一行水平排列的场景，例如搜索框、简易登录表单等。通过为 `<form>` 元素添加 `.form-inline` 类实现。 * **水平表单 (Horizontal Forms)**: 适用于标签需要与表单控件水平对齐的场景，通常用于较长的表单或需要清晰区分标签和控件的情况。通过为 `<form>` 元素添加 `.form-horizontal` 类实现，并结合 Bootstrap 的栅格系统进行布局。 #### 3.2.2.1 内联表单 (Inline Forms) **代码实践 3.2.2.1：内联表单** ```html <form class="form-inline" role="form"> <div class="form-group"> <label class="sr-only" for="exampleInputEmail2">邮箱地址</label> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="请输入邮箱"> </div> <div class="form-group"> <label class="sr-only" for="exampleInputPassword2">密码</label> <input type="password" class="form-control" id="exampleInputPassword2" placeholder="请输入密码"> </div> <div class="checkbox"> <label> <input type="checkbox"> 记住我 </label> </div> <button type="submit" class="btn btn-default">登录</button> </form> ``` **内容详解 3.2.2.1：内联表单** * **`.form-inline` 类**: 为 `<form>` 元素添加 `.form-inline` 类，可以使表单内的 `.form-group` 元素以及表单控件水平排列。 * **`.sr-only` 类**: 在内联表单中，标签通常会显得冗余，可以使用 `.sr-only` 类隐藏标签，但仍然保留其语义，以供屏幕阅读器等辅助技术访问，提升可访问性。 * **响应式行为**: 内联表单在小屏幕设备上会变为垂直堆叠布局，以适应屏幕宽度。 **Mermaid 图表 3.2.2.1：内联表单结构** ```mermaid graph TD A[<form class="form-inline" role="form">] --> B(div.form-group); B --> C{label.sr-only for="..."}; B --> D{input.form-control}; A --> E(div.form-group); E --> F{label.sr-only for="..."}; E --> G{input.form-control}; A --> H(div.checkbox); H --> I{label}; H --> J{input type="checkbox"}; A --> K{button.btn.btn-default type="submit"}; style A fill:#f9f,stroke:#333,stroke-width:2px style B fill:#ccf,stroke:#333,stroke-width:2px style E fill:#ccf,stroke:#333,stroke-width:2px style H fill:#ccf,stroke:#333,stroke-width:2px style K fill:#aaf,stroke:#333,stroke-width:2px ``` #### 3.2.2.2 水平表单 (Horizontal Forms) **代码实践 3.2.2.2：水平表单** ```html <form class="form-horizontal" role="form"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3" placeholder="邮箱"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">密码</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword3" placeholder="密码"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox"> 记住我 </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">登录</button> </div> </div> </form> ``` **内容详解 3.2.2.2：水平表单** * **`.form-horizontal` 类**: 为 `<form>` 元素添加 `.form-horizontal` 类，启用水平表单布局。 * **`.control-label` 类**: 应用于水平表单中的 `<label>` 元素，使其右对齐，并与表单控件水平对齐。 * **栅格系统布局**: 水平表单依赖于 Bootstrap 的栅格系统进行布局。通常，`<label>` 元素和表单控件分别占据栅格系统的不同列。例如，在上面的代码中，`<label>` 占据 `col-sm-2`，表单控件的容器 `<div>` 占据 `col-sm-10`。 * **`.col-sm-offset-*` 类**: 用于在水平表单中，对某些表单控件（例如复选框、提交按钮）进行缩进对齐，使其与上方的表单控件左对齐。 **Mermaid 图表 3.2.2.2：水平表单结构** ```mermaid graph TD A[<form class="form-horizontal" role="form">] --> B(div.form-group); B --> C{label.col-sm-2.control-label for="..."}; B --> D(div.col-sm-10); D --> E{input.form-control}; A --> F(div.form-group); F --> G{label.col-sm-2.control-label for="..."}; F --> H(div.col-sm-10); H --> I{input.form-control}; A --> J(div.form-group); J --> K(div.col-sm-offset-2.col-sm-10); K --> L(div.checkbox); L --> M{label}; L --> N{input type="checkbox"}; A --> O(div.form-group); O --> P(div.col-sm-offset-2.col-sm-10); P --> Q{button.btn.btn-default type="submit"}; style A fill:#f9f,stroke:#333,stroke-width:2px style B fill:#ccf,stroke:#333,stroke-width:2px style F fill:#ccf,stroke:#333,stroke-width:2px style J fill:#ccf,stroke:#333,stroke-width:2px style O fill:#ccf,stroke:#333,stroke-width:2px style Q fill:#aaf,stroke:#333,stroke-width:2px ``` ### 3.2.3 支持的表单控件 Bootstrap 表单组件支持多种常见的 HTML5 表单控件，并为其提供了默认样式和增强功能： * **文本输入框 `<input type="text">`**: 用于接收单行文本输入。 * **密码输入框 `<input type="password">`**: 用于接收密码输入，内容会被遮盖。 * **邮箱输入框 `<input type="email">`**: 用于接收邮箱地址，通常浏览器会自动进行邮箱格式验证。 * **数字输入框 `<input type="number">`**: 用于接收数字输入，可以设置数字范围和步长。 * **日期输入框 `<input type="date">`**: 用于接收日期输入，浏览器会提供日期选择器。 * **文本域 `<textarea>`**: 用于接收多行文本输入。 * **下拉选择框 `<select>`**: 提供下拉选项列表供用户选择。 * **复选框 `<input type="checkbox">`**: 允许用户选择多个选项。 * **单选框 `<input type="radio">`**: 允许用户从多个选项中选择一个。 * **文件上传 `<input type="file">`**: 允许用户上传文件。 对于以上所有表单控件，应用 `.form-control` 类都能获得 Bootstrap 的默认样式。 #### 3.2.3.1 文本域 (Textarea) **代码实践 3.2.3.1：文本域** ```html <div class="form-group"> <label for="exampleTextarea">文本域</label> <textarea class="form-control" id="exampleTextarea" rows="3"> ``` **内容详解 3.2.3.1：文本域** * **`` 元素**: 使用 `<textarea>` 元素创建文本域。 * **`.form-control` 类**: 为 `<textarea>` 应用 `.form-control` 类，使其具有 Bootstrap 的默认样式。 * **`rows` 属性**: `rows` 属性定义文本域的初始行数。用户可以拖动文本域的右下角调整其大小（如果浏览器支持）。 #### 3.2.3.2 下拉选择框 (Select) **代码实践 3.2.3.2：下拉选择框** ```html <div class="form-group"> <label for="exampleSelect1">下拉选择框</label> <select class="form-control" id="exampleSelect1"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> ``` **内容详解 3.2.3.2：下拉选择框** * **`<select>` 元素**: 使用 `<select>` 元素创建下拉选择框。 * **`.form-control` 类**: 为 `<select>` 应用 `.form-control` 类，使其具有 Bootstrap 的默认样式。 * **`<option>` 元素**: `<option>` 元素定义下拉选择框中的每个选项。 #### 3.2.3.3 复选框和单选框 (Checkboxes and Radios) **代码实践 3.2.3.3：复选框和单选框** ```html <div class="checkbox"> <label> <input type="checkbox" value=""> 复选框 1 </label> </div> <div class="checkbox disabled"> <label> <input type="checkbox" value="" disabled> 禁用的复选框 </label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 单选框 1 </label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> 单选框 2 </label> </div> <div class="radio disabled"> <label> <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled> 禁用的单选框 </label> </div> ``` **内容详解 3.2.3.3：复选框和单选框** * **`.checkbox` 和 `.radio` 类**: 用于包裹复选框和单选框及其标签，提供适当的间距和样式。 * **`disabled` 属性**: 为 `<div class="checkbox">` 或 `<div class="radio">` 添加 `.disabled` 类，或者直接为 `<input type="checkbox">` 或 `<input type="radio">` 添加 `disabled` 属性，可以禁用复选框或单选框。 * **`checked` 属性**: 为 `<input type="radio">` 添加 `checked` 属性，可以使其默认选中。 * **`name` 属性 (单选框)**: 同一组单选框需要具有相同的 `name` 属性，才能实现单选互斥的效果。 #### 3.2.3.4 内联复选框和单选框 (Inline Checkboxes and Radios) **代码实践 3.2.3.4：内联复选框和单选框** ```html <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" value="option1"> 选项 1 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox2" value="option2"> 选项 2 </label> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 选项 1 </label> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 选项 2 </label> ``` **内容详解 3.2.3.4：内联复选框和单选框** * **`.checkbox-inline` 和 `.radio-inline` 类**: 应用于 `<label>` 元素，使复选框和单选框水平排列。 #### 3.2.3.5 文件上传 (File Input) **代码实践 3.2.3.5：文件上传** ```html <div class="form-group"> <label for="exampleInputFile">文件上传</label> <input type="file" id="exampleInputFile"> <p class="help-block">请上传文件 (可选).</p> </div> ``` **内容详解 3.2.3.5：文件上传** * **`<input type="file">`**: 使用 `<input type="file">` 创建文件上传控件。 * **`.help-block` 类**: 用于添加辅助文本，例如文件类型限制、文件大小限制等。 ### 3.2.4 表单控件状态 Bootstrap 提供了对表单控件不同状态的样式支持，包括： * **焦点状态 (Focus State)**: 当表单控件获得焦点时，Bootstrap 会为其添加默认的焦点样式，通常表现为蓝色边框和阴影。 * **禁用状态 (Disabled State)**: 通过为表单控件添加 `disabled` 属性，可以禁用该控件，并应用禁用样式（通常为灰色）。 * **验证状态 (Validation States)**: Bootstrap 提供了 `.has-success`、`.has-warning` 和 `.has-error` 类，用于指示表单控件的验证状态，并提供相应的视觉反馈。 #### 3.2.4.1 验证状态 (Validation States) **代码实践 3.2.4.1：验证状态** ```html <div class="form-group has-success"> <label class="control-label" for="inputSuccess1">输入成功</label> <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2"> <span id="helpBlock2" class="help-block">成功提示信息.</span> </div> <div class="form-group has-warning"> <label class="control-label" for="inputWarning1">输入警告</label> <input type="text" class="form-control" id="inputWarning1"> </div> <div class="form-group has-error"> <label class="control-label" for="inputError1">输入错误</label> <input type="text" class="form-control" id="inputError1"> </div> ``` **内容详解 3.2.4.1：验证状态** * **`.has-success`、`.has-warning`、`.has-error` 类**: 应用于 `.form-group` 元素，分别表示成功、警告和错误状态。 * **视觉反馈**: 这些类会为表单控件添加不同的边框颜色和图标（如果使用了 Bootstrap 的 Glyphicons 图标库）。 * **`.control-label` 类**: 在验证状态下，建议为 `<label>` 元素添加 `.control-label` 类，以确保标签的样式与验证状态保持一致。 * **`.help-block` 类**: 可以使用 `.help-block` 类添加辅助文本，例如错误提示信息。 **Mermaid 图表 3.2.4.1：验证状态结构** ```mermaid graph TD A[div.form-group.has-success] --> B{label.control-label for="..."}; A --> C{input.form-control}; A --> D{span.help-block}; E[div.form-group.has-warning] --> F{label.control-label for="..."}; E --> G{input.form-control}; H[div.form-group.has-error] --> I{label.control-label for="..."}; H --> J{input.form-control}; style A fill:#f9f,stroke:#333,stroke-width:2px style E fill:#f9f,stroke:#333,stroke-width:2px style H fill:#f9f,stroke:#333,stroke-width:2px ``` ### 3.2.5 输入框组 (Input Groups) 输入框组 (Input Groups) 是 Bootstrap 表单组件的一个强大特性，它允许在文本输入框的前后添加额外的元素，例如文本、按钮或图标，创建更丰富的表单控件。 **代码实践 3.2.5：输入框组** ```html <div class="input-group"> <span class="input-group-addon">@</span> <input type="text" class="form-control" placeholder="用户名"> </div> <div class="input-group"> <input type="text" class="form-control"> <span class="input-group-addon">.00</span> </div> <div class="input-group"> <span class="input-group-addon">$</span> <input type="text" class="form-control"> <span class="input-group-addon">.00</span> </div> <div class="input-group"> <span class="input-group-btn"> <button class="btn btn-default" type="button">前往!</button> </span> <input type="text" class="form-control"> </div> ``` **内容详解 3.2.5：输入框组** * **`.input-group` 类**: 作为输入框组的容器，包裹输入框和附加元素。 * **`.input-group-addon` 类**: 用于在输入框前后添加文本或图标。 * **`.input-group-btn` 类**: 用于在输入框前后添加按钮。 * **附加元素顺序**: 附加元素可以放置在输入框的前面或后面。 **Mermaid 图表 3.2.5：输入框组结构** ```mermaid graph TD A[div.input-group] --> B{span.input-group-addon}; A --> C{input.form-control}; D[div.input-group] --> E{input.form-control}; D --> F{span.input-group-addon}; G[div.input-group] --> H{span.input-group-addon}; G --> I{input.form-control}; G --> J{span.input-group-addon}; K[div.input-group] --> L{span.input-group-btn}; L --> M{button.btn.btn-default}; K --> N{input.form-control}; style A fill:#f9f,stroke:#333,stroke-width:2px style D fill:#f9f,stroke:#333,stroke-width:2px style G fill:#f9f,stroke:#333,stroke-width:2px style K fill:#f9f,stroke:#333,stroke-width:2px ``` ### 3.2.6 静态控件 (Static Control) 静态控件 (Static Control) 用于在表单布局中显示静态文本，例如在水平表单中，标签的位置可能需要显示一段静态文本而不是输入框。 **代码实践 3.2.6：静态控件** ```html <form class="form-horizontal" role="form"> <div class="form-group"> <label class="col-sm-2 control-label">邮箱</label> <div class="col-sm-10"> <p class="form-control-static">email@example.com</p> </div> </div> <div class="form-group"> <label for="inputPassword" class="col-sm-2 control-label">密码</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword" placeholder="密码"> </div> </div> </form> ``` **内容详解 3.2.6：静态控件** * **`.form-control-static` 类**: 应用于 `<p>` 元素，使其在表单布局中显示为静态文本，并具有与 `.form-control` 类似的样式，例如内边距和边框。 **Mermaid 图表 3.2.6：静态控件结构** ```mermaid graph TD A[<form class="form-horizontal" role="form">] --> B(div.form-group); B --> C{label.col-sm-2.control-label}; B --> D(div.col-sm-10); D --> E{p.form-control-static}; A --> F(div.form-group); F --> G{label.col-sm-2.control-label for="..."}; F --> H(div.col-sm-10); H --> I{input.form-control}; style A fill:#f9f,stroke:#333,stroke-width:2px style B fill:#ccf,stroke:#333,stroke-width:2px style F fill:#ccf,stroke:#333,stroke-width:2px ``` ### 3.2.7 表单辅助文本 (Help Text) Bootstrap 提供了两种方式添加表单辅助文本： * **`.help-block` 类**: 用于在表单控件下方添加块级辅助文本，例如提示信息、错误信息等。 * **`placeholder` 属性**: 用于在文本输入框或文本域中添加占位符文本，当用户输入内容时，占位符文本会消失。 我们已经在 **代码实践 3.2.3.5** 和 **代码实践 3.2.4.1** 中演示了 `.help-block` 类的用法。 `placeholder` 属性的用法非常简单，直接在 `<input>` 或 `<textarea>` 元素中添加 `placeholder="占位符文本"` 即可。