# Form 表单

用以收集、校验和提交数据，一般由输入框、单选框、复选框、选择器等控件组成。

### 典型表单

一个典型表单组件包含各种表单项，比如输入框、选择器、单选框、多选框、开关、文本输入等。

demo

### 注册表单

新用户注册时常用的表单形式，包括邮箱、密码、确认密码等。

demo

### 登录表单

专门适用于登录页面的账号级密码输入的表单。

demo

### 动态增减表单

demo

### 不同尺寸的表单

为了适应不同尺寸的布局，TD 提供大小两种不同尺寸的表单

demo

### 不同对齐方式的表单

根据具体目标和制约因素，选择最佳的标签对齐方式，默认对齐方式为右对齐

demo

### 不同布局类型的表单

demo

### 表单校验

## 组件设计指南

### 何时使用

需要收集信息时；

需求对输入的信息进行校验时。

### 与页面布局相关

##### 在整页面布局中，表单通常布局在右侧内容区域。

<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/20211221143256.png" />

##### 在表单组合布局中，纵向组合常用在信息有先后逻辑顺序的场景中，选项在垂直方向对齐。

<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/20211221143310.png" />

<hr />

##### 在表单组合布局中，横向组合常用在信息逻辑关系较弱、无需强烈视觉引导的场景中，选项在水平方向对齐。

<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/20211221143334.png" />

##### 在表单组合布局中，行内组合常用在垂直方向空间受限且表单简单的场景中，可在一行内横向放置表单。

<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/20211221143443.png" />

<hr />
