---
title: 表单
slug: 表单
category: 组件
figma_node_id: 1:22
figma_page_name: ＞表单
aliases: [Form, 表单容器, 表单布局]
last_extracted: 2026-05-19
status: ok
---

# 表单

> 表单提供了文本框和选择方式进行内容录入，通常成组出现。对于组内需要使用开关、复选等操作的情况，可使用列表组件与表单混排。它是「文字输入框 / 数字输入框 / 文本域 / 单复选 / 滑块 / 开关 / 选择器 / 上传」等数据输入类组件的容器与排布规则。

## 类型与号型

如流表单不是单一控件，而是一组排布与文案约定。本页定义三大模块：

| 模块 | 内容 |
|---|---|
| 一．概述 | 表单的定位与适用范围 |
| 二．设计原则 | 引导输入、格式化、聚焦、placeholder、必填、校验 |
| 三．构成及解析 | 标签 / 表单域 / 提示信息 / 提交按钮区四要素 |

号型本身由各被包含组件提供（见 [输入框](输入框.md)、[下拉选择](下拉选择.md) 等），表单本身仅约束「标签 / 表单域 / 提示 / 按钮区」之间的排布。

## 尺寸规格

- 桌面端画板：1280×6826px，整页留 160px 左内边距
- 标签字号：16px Medium（节级标题）/ 20px Medium（章节小标题）/ 24px Medium（章节大标题）
- 正文说明文字：14px Regular，色 `#878D99`（即 `C-Coolgray60`）
- 内嵌示例标签字号：12px Regular

## 状态

表单整体的状态由其内部各控件状态组合决定：

- **默认**：未输入、未校验
- **聚焦**：当前激活输入项（桌面端打开页面后第一项可自动聚焦；移动端表单输入项较少时亦可自动聚焦并唤起合适键盘）
- **校验中 / 校验失败**：单项失焦时即时校验，或点击提交后统一校验
- **不可用**：表单整体处于只读 / 加载态

## 颜色与 token

表单容器本体使用纯白底色 `#FFFFFF`，主要色彩来自其包含的控件与提示组件。

| 用途 | hex | 备注 |
|---|---|---|
| 容器背景 | `#FFFFFF` = `White` | 表单页底色 |
| 章节大标题文字 | `#11141A` | 24px Medium |
| 正文 / 说明 | `#878D99` = `C-Coolgray60` | 14px Regular |
| 表单内提示 placeholder | `#878D99` | 14px Regular |
| 强调说明背景（渐变 Union） | `linear-gradient(-64deg, rgba(51,119,255,0) 0%, rgba(51,119,255,0.06) 100%)` | 与 AI 渐变标签同源 |
| 章节文字（透明度 80%） | `#000000` α 80% | 设计说明小节正文 |

> 关联 token 详见 [色彩](../基础/色彩.md)。表单内各控件具体色值见相应组件页。

## 间距与排布

- **整体排版**：标签 / 表单域 / 提示 / 提交按钮区四块按上下结构组织
- **左右布局**（推荐）：标签居左、表单域居右，标签宽度需控制在 6 个汉字以内
- **上下布局**：当横向空间有限或标签超出 6 字 / 长短差别大时使用
- **对齐方式**：左对齐 / 右对齐 / 上下对齐三种，**一般使用左对齐**
- **alert 类全宽提示**：左右间距固定 12px，上下间距固定 8px，高宽自适应，12 号文字左对齐，随 AIO 设置字号分大中小号
- **提交按钮区**：一般居页面右下角，"确认"居右、"取消"居左；居中排版仅适用于登录、注册、投屏等表单内容较少且整体居中的页面

## 文案规则

### 标签

- 一般采用文字，标签需控制在单行 6 个字符以内，**不能以省略的方式展示标签**
- 也可采用 icon 形式作为标签，但需谨慎使用——用户输入后 placeholder 会消失，增加困惑和记忆成本；仅在用户熟悉且字段简单（如登录中只有账号和密码）时采用

### placeholder

- placeholder 是对标签的补充说明，帮助用户了解输入要求，引导正确输入
- 文案需**清晰简洁，语气一致**
- 应避免文案重复、冗余（例如标签写"手机号"，placeholder 不应再重复"请输入手机号"——可改为"用于接收短信验证码"等具体引导）

### 必填 / 选填标记

存在两种标记方式：

- `*`（红色星号）
- `（选填）`

两种方式无需同时存在，根据应用场景选择使用。

### 提示文案三种形式

| 形式 | 适用 | 注意 |
|---|---|---|
| 1. 常驻说明 | 重要的、必须外露的说明 | 句子要简短，可包含链接 |
| 2. tips 说明 | 次要或非高频需求的说明 | hover 呼出气泡，在气泡中显示解释说明 |
| 3. alert 警告 | 对该表单整体的声明或警告 | 高宽自适应；左右 12px、上下 8px；12 号字左对齐；随 AIO 大小分大中小号 |

## 交互行为

### 1. 格式化显示

手机号、身份证号、银行卡号等常见标准数据格式需要自动格式化显示。

### 2. 自动聚焦

- 桌面端：打开表单页后，若第一项为输入项，一般需要第一项自动聚焦，引导用户开始输入
- 移动端：若表单输入项较少，键盘唤起不会造成其他表单项遮挡时，亦可第一项自动聚焦，并**唤起合适的键盘**引导输入

### 3. 默认值和字段约束

- 预判用户的输入内容，但要确保预判的准确性，避免增加用户的删除成本
- 若有必要可为输入项设置条件约束，避免不必要的错误，例如：截止时间不能早于起始时间

### 4. 校验

包含两种校验方式：

- **即时校验**：输入完成一个表单项后立刻进行校验，组件失去焦点时会产生校验行为
- **统一校验**：点击提交按钮后，统一返回对表单中各项的校验结果

## 示例

![桌面端-自动聚焦引导输入](../图片/组件/表单/desktop-autofocusguideinput.png)
![移动端-自动聚焦引导输入](../图片/组件/表单/mobile-autofocusguideinput.png)
![表单构成-标签表单域提示按钮](../图片/组件/表单/formsi-yao-su-gou-cheng-tu.png)
![左右布局示例](../图片/组件/表单/leftrightlayoutexample.png)
![上下布局示例](../图片/组件/表单/leftrightlayoutexample.png)

## 设计考量 / 原文摘录

> 表单提供了文本框和选择方式进行内容录入，通常成组出现。对于组内需要使用开关、复选等操作的情况，可使用列表组件与表单混排。

> 构成表单的基础元素包括：标签、表单域、提示信息、提交按钮区。

> 一般表单按钮居于右下角，确认居右，取消居左；按钮居中仅适用于少数场景，如登录、注册、投屏等表单内容较少且页面整体采用居中排版的情况。

- **左右布局优先**：信息层级清晰、扫读高效；只有标签过长或横向空间受限时才退回上下布局
- **6 字硬约束**：标签超过 6 字必须换上下布局，否则会强行截断破坏对齐
- **即时 + 统一**双校验策略：失焦立即校验单项，提交时再统一校验，把错误成本前置

## 不推荐用法

- 标签用省略号表达（如「身份证…」）破坏可读性
- 同一表单混用 `*` 和`（选填）`两种必填标记
- placeholder 与标签语义重复（"手机号"标签 + "请输入手机号"占位）
- 提交按钮区使用文字按钮替代主按钮（CTA 层级不够）
- 在多个有色背景区域内嵌套布局表单（破坏对比度）
- 不带任何校验直接提交，把所有错误堆到提交后展示

## 关联

- 输入控件本体见 [输入框](输入框.md)
- 下拉类输入见 [下拉选择](下拉选择.md)、[日期选择](日期选择.md)、[时间选择](时间选择.md)
- 单选 / 多选见 [单复选](单复选.md)
- 开关型输入见 [开关](开关.md)
- 提交按钮规格见 [按钮](按钮.md)
- alert / 提示样式见 [横幅提示](横幅提示.md)
- 色彩 token 见 [色彩](../基础/色彩.md)
