语义 UI React  3.0.0-beta.2
GitHub CHANGELOG
入门
介绍入门组合简写属性主题布局示例原型迁移指南至 v3
元素s
按钮旗帜容器标题分隔线图片图标标签输入列表占位符加载器轨道揭示步骤片段
集合s
面包屑表单消息菜单网格表格
视图s
评论动态统计卡片项目广告
模块s
手风琴复选框调光器下拉菜单嵌入模态框弹出框进度条评分侧边栏搜索选项卡粘性过渡
附加组件s
确认单选按钮门户选择分页文本区域可过渡门户

表单
表单以结构化的方式显示一组相关的用户输入字段。

参见
按钮复选框下拉菜单输入消息单选按钮选择
src/collections/Form/Form.js
语义 UI表单文档
FormForm.ButtonForm.CheckboxForm.DropdownForm.FieldForm.GroupForm.InputForm.RadioForm.SelectForm.TextArea

类型

表单

一个表单。

表单还具有强大的简写属性 API，用于生成包裹在表单字段中的控件。请参见下面的简写示例。

简写

表单子组件

渲染包含标签和表单控件的字段。所有表单控件组件均可用。

<FormInput label='Enter Password' type='password' />

与

<FormField>
  <label>Enter Password</label>
  <Input type='password' />
</FormField>

带有自定义控件的字段

渲染包含标签和自定义表单控件的字段。使用来自任何库或您自己的任何组件。

<FormField label='Date' control={CustomCalendar} start='1' end='7' />

与

<FormField>
  <label>Date</label>
  <CustomCalendar start='1' end='7' />
</FormField>

带有自定义标签的字段

您可以使用 props 对象定义标签。

您可以通过传递您自己的元素来定义标签。

带有 HTML 控件的字段

字段控件属性也适用于 HTML 标签。

<FormField label='Quantity' control='input' type='number' max={5} />

与

<FormField>
  <label>Quantity</label>
  <input type='number' max={5} />
</FormField>

可访问标签

向简写 FormField 添加 id 会向标签添加匹配的 htmlFor 属性。如果出现错误，则使用 aria-describedby 属性将错误标签连接到表单字段。

向表单子组件添加 id 会向标签添加匹配的 htmlFor 属性。

内容

字段

字段是包含标签和输入的表单元素。

状态

加载中

如果表单处于加载状态，它将自动显示加载指示器。

成功

如果表单处于成功状态，它将自动显示任何成功消息块。

错误

如果表单处于错误状态，它将自动显示任何错误消息块。

警告

如果表单处于警告状态，它将自动显示任何警告消息块。

字段错误

各个字段可能会显示错误状态。

禁用字段

各个字段可能会被禁用。

只读字段

各个字段可能是只读的。

表单变体

尺寸

表单的大小可能有所不同。

反转

深色背景上的表单可能需要反转其配色方案。

表单可以防止自己在移动设备上堆叠。

字段变体

内联

字段可以将其标签放在旁边而不是上面。

宽度

字段可以在网格列中指定其宽度。

必填

字段可以显示输入是必需的。

FormField 简写也可以是必需的。

组变体

平均分配

字段可以将其宽度平均分配。

在 FormGroup 上使用 widths='equal' 属性声明时， FormDropdown、 FormInput、FormSelect 组件必须使用 fluid 属性进行渲染才能正常工作。

内联

多个字段可以并排显示在一行中。

不可堆叠

表单组也可以防止自己在移动设备上堆叠。

用法

提示

我们的 <Form /> 处理数据的方式与普通的 React <form /> 一样。请参见 React 的 受控组件 文档了解更多信息。

捕获值

您可以在更改或提交时捕获表单数据。

提交时清除

您可以在提交时清除表单值。

这是底部
由以下内容提供支持的闪电般部署 Vercel.