---
title: "Flow Builder 中的输入框与表单"
description: "添加文本字段、复选框等交互式表单元素。"
---

使用输入框收集用户填写的数据——例如姓名、电子邮件地址或出生日期。将用户的回答保存下来，并在流程的其他地方引用，比如在后续页面上用姓名称呼用户。
## 添加输入框 \{#add-an-input\}

1. 点击左上角的 **+**。
2. 选择 **Input**。
3. 选择输入类型：
   - **Text：** 任意短文本输入。
   - **Email：** 电子邮件地址，可选格式验证。
   - **Password：** 安全文本输入，可配置密码要求。
   - **Number：** 数字值，可配置格式。
   - **Phone number：** 电话号码。
   - **Date：** 打开日期选择器。
   - **Time：** 打开时间选择器。
   - **Date and time：** 打开组合选择器。
## 配置输入项 \{#configure-an-input\}

:::link
有关视觉设置（布局、样式和可见性）的更多详情，请参阅[样式与外观](builder-styling)。
:::

对于所有输入类型，您可以在 **Design** 标签页中配置以下内容：
- **Type（类型）：** 更改输入类型（Text、Email、Password、Number、Phone number、Date、Time 或 Date and time）。
- **Element ID（元素 ID）：** 用于在流程中其他位置引用该输入值的标识符。详见下方[使用输入值](#use-input-values)。
- **Placeholder（占位符）：** 显示在空字段内的提示文字。
- **State（状态）：** 定义输入框在不同情况下的外观。可在 **Default**、**Active**、**Invalid** 和 **Disabled** 之间切换，并为每种状态设置不同的视觉样式。
- **Typography（排版）：** 字段中显示内容的文字样式。
- **Leading and trailing icons（前置与后置图标）：** 在输入框内添加图标。

某些设置仅适用于特定的输入类型：
| 设置                   | 输入类型                    |
|----------------------|-------------------------|
| 清除按钮                 | 文本、电子邮件                 |
| 验证电子邮件格式             | 电子邮件                    |
| 显示密码图标               | 密码                      |
| 编辑密码要求               | 密码                      |
| 数字格式                 | 数字                      |
| 日期/时间格式              | 日期、时间、日期和时间             |
| 最小和最大日期              | 日期、日期和时间                |

## 使用输入值 \{#use-input-values\}

每个输入都会自动作为变量使用，无需任何配置或 **On Submit** 操作。输入值通过 **Element ID** 引用，该 ID 在 **Input Settings** 中设置。

要在流程的其他位置使用输入值（例如个性化文案、填充其他字段或驱动条件导航），插入一个变量并选择：

**Element > Screen > `<elementId>.value`**
:::link
查看以下相关指南，了解如何使用已保存的输入值：
- [条件导航](onboarding-navigation-branching)
- [变量](onboarding-variables)
:::
## 输入验证 \{#input-validation\}

验证行为取决于输入类型。每个输入都会暴露一个只读布尔变量 `<elementId>.isValid`，用于反映输入值是否通过了该输入的验证规则。你可以在条件动作或条件可见性中使用它——例如，在电子邮件格式有效之前隐藏"下一步"按钮。

:::note
- `isValid` 变量是只读的——你无法设置它。
- 空输入始终被视为有效。
- 文本输入没有验证规则。`textInput.isValid` 始终返回 `True`。
:::
| 输入类型 | 验证行为 |
|---|---|
| 文本 | 无内置验证规则。 |
| 电子邮件 | 可选。在 **Design** 面板中启用 **Validate email format**，以对输入的值进行电子邮件格式校验。 |
| 电话号码 | 内置电话号码格式检查。无法在编辑工具中配置——该规则在运行时进行评估。 |
| 密码 | 可配置。请参阅下方的[密码要求](#password-requirements)。 |
| 数字 | 基于格式。输入的值必须符合所选的数字格式。请参阅下方的[数字格式](#number-format)。 |
| 日期、时间、日期和时间 | 内置。选择器仅接受有效的日期或时间值。 |
**Invalid** [视觉状态](builder-styling#input-states)会在用户提交表单时触发——例如按下键盘上的 Enter 或 Done 键。在此之前，输入框显示 **Active** 或 **Default** 状态。
### 密码要求 \{#password-requirements\}

密码输入框支持可配置的验证规则。在 **Design** 面板中点击 **Edit password requirements** 即可打开规则编辑器。已启用的规则会以实时清单的形式显示在输入框下方——每条规则满足条件时，对应项目前会出现勾选标记。

可用规则：
- **Min length** — 最少字符数。默认值：8。
- **Max length** — 最多字符数。默认值：32。
- **Uppercase letter** — 至少包含一个 A–Z 大写字母。
- **Lowercase letter** — 至少包含一个 a–z 小写字母。
- **Number** — 至少包含一个数字。
- **Special character** — 至少包含一个非字母数字字符（例如 `!@#$%`）。

只有满足所有已启用的规则，密码才视为有效。
### 数字格式 \{#number-format\}

**Number** 输入设置中的 **Format** 下拉菜单控制输入值的解析方式：

- **Integer** — 仅限整数（例如 `4`）。
- **Decimal (Point)** — 以小数点作为分隔符的小数（例如 `4.89`）。
- **Decimal (Comma)** — 以逗号作为分隔符的小数（例如 `4,89`）。

不符合所选格式的值将被视为无效。
## 根据输入事件触发动作 \{#trigger-actions-on-input-events\}

:::link
主要文章：[动作](onboarding-actions)
:::

你可以通过 **Interactions** 面板在用户输入时触发相应动作：

- **On changed** — 当用户更改输入值时触发。所有输入类型均可使用。
- **On submit** — 当用户通过键盘按下 Enter 或 Done 提交文本输入时触发。日期和时间选择器不支持此触发器。