表单集合

相关源文件

• src/definitions/collections/form.less
• src/definitions/elements/input.less
• src/themes/default/collections/form.variables
• src/themes/default/elements/input.variables

Semantic UI 中的表单集合提供了一个全面的系统，用于创建表单布局和对表单控件应用一致的样式。它处理结构、验证状态和响应式行为，同时提供广泛的自定义选项。

有关表单验证行为和 JavaScript 功能的信息，请参阅 表单验证。

1. 概述和结构

表单集合由一个分层组件结构组成，该结构将表单元素组织到一个一致的布局系统中。在 Semantic UI 中，表单被实现为一个集合，这意味着它们将相关的 UI 元素与一致的样式组合在一起。

基本表单结构

来源：src/definitions/collections/form.less28-53 src/definitions/collections/form.less65-72

核心组件

表单集合由以下主要组件构成

组件	类	目的
表单容器	.ui.form	提供表单样式上下文的主容器
字段	.field	单个表单元素及其标签的容器
字段	.fields	共享布局规则的字段组（例如，水平对齐）
标签	.field > label	描述表单输入的文本标签
输入	多种	表单控件，包括文本输入、文本区域、选择下拉菜单等。
消息	.success.message, .error.message, .warning.message	表单反馈的状态消息

来源：src/definitions/collections/form.less28-58 src/definitions/collections/form.less254-263

2. 输入集成

表单集合与各种类型的输入集成，提供一致的样式和行为。

标准文本输入

表单集合以一致的样式和状态支持所有标准的 HTML 输入类型

来源：src/definitions/collections/form.less79-160 src/definitions/collections/form.less175-186 src/definitions/collections/form.less214-247

UI 组件集成

Semantic UI 表单集成了 UI 组件

• UI 输入：.ui.input 可用于表单字段中，以利用图标和操作等额外的输入样式功能
• 下拉菜单：.ui.dropdown 提供增强的选择功能
• 复选框：.ui.checkbox 提供样式化的复选框和单选功能

表单集合在表单上下文中自动调整这些组件的样式。

来源：src/definitions/collections/form.less189-247

3. 状态和验证

表单集合包含各种状态的内置样式，用于表示验证和交互反馈。

输入状态

来源：src/definitions/collections/form.less294-608

表单级状态

表单集合支持表单级别的状态

• 成功：当表单具有 .success 类时显示成功消息
• 警告：当表单具有 .warning 类时显示警告消息
• 错误：当表单具有 .error 类时显示错误消息
• 加载中：当表单具有 .loading 类时显示加载指示器

来源：src/definitions/collections/form.less399-439 src/definitions/collections/form.less607-658

字段级错误状态

可以将错误状态应用于字段级别，以显示验证错误

• 向字段添加 .error 类会将错误样式应用于包含的输入
• 错误样式包括颜色更改、边框更改，并且可以显示提示标签

来源：src/definitions/collections/form.less442-587 src/definitions/collections/form.less269-287

4. 布局变体

表单集合提供了各种布局选项，有助于高效地组织表单。

字段分组

来源：src/definitions/collections/form.less742-755 src/definitions/collections/form.less770-909 src/definitions/collections/form.less946-951

内联表单

内联表单将标签和输入控件并排放置在同一行

• 使用 .inline.fields 用于一组内联字段
• 使用 .inline.field 用于单个内联字段
• 内联表单调整标签的放置和大小以适应水平布局

来源：src/definitions/collections/form.less957-1021

宽度变体

表单集合支持字段的显式宽度规范

• 数字列：.two.fields, .three.fields, 最多 .ten.fields
• 宽字段：.five.wide.field, .eight.wide.field, 等，从一到十六
• 等宽字段：.equal.width.fields

来源：src/definitions/collections/form.less786-821 src/definitions/collections/form.less862-909 src/definitions/collections/form.less946-951

5. 响应式行为

表单集合包含响应式行为，可在较小的屏幕上调整布局。

移动设备响应式

来源： src/definitions/collections/form.less823-852 src/definitions/collections/form.less912-941

关键响应行为

• 多列在移动设备上自动堆叠
• 媒体查询针对小于 @largestMobileScreen 的屏幕
• 当需要时，可以添加 .unstackable 类来防止堆叠

6. 尺寸变化

表单集合支持尺寸变化，可调整整体表单尺寸

• .mini.form
• .tiny.form
• .small.form
• .large.form
• .big.form
• .huge.form
• .massive.form

这些尺寸修饰符会按比例缩放整个表单。

来源： src/definitions/collections/form.less1028-1051

7. 主题化

通过 Semantic UI 的主题系统，表单集合可以高度定制。

关键主题变量

来源： src/themes/default/collections/form.variables1-196 src/themes/default/elements/input.variables1-102

表单主题化通过中定义的变量来控制

• src/themes/default/collections/form.variables
• src/themes/default/elements/input.variables

这些变量控制着表单外观的所有方面，包括尺寸、颜色、排版、间距和状态样式。

8. 与其他组件集成

表单集合旨在与各种其他 Semantic UI 组件集成

组件	集成点
消息	用于验证反馈的表单状态消息
下拉菜单	表单中增强的下拉选择功能
复选框	样式化的复选框和单选按钮输入
按钮	表单提交按钮
网格	可与表单配合使用以实现复杂布局
输入	增强的输入功能（图标等）

表单集合组件在表单上下文中使用时会调整其样式，以确保一致的外观和行为。

来源： src/definitions/collections/form.less189-247 src/definitions/collections/form.less254-263

总结

Semantic UI 中的表单集合提供了一个全面的系统，用于构建具有一致样式、布局选项和验证状态的表单。它与其他 Semantic UI 组件集成，并通过主题系统提供广泛的定制。

主要功能包括

• 结构化表单布局组件（form, fields, field）
• 所有标准 HTML 输入类型的输入样式
• 表单验证状态样式
• 响应式布局控制
• 尺寸变化
• 与下拉菜单和复选框等 UI 组件集成