---
name: Form 表单控件
route: /guide/form
menu: form
---

import JsxParser from "react-jsx-parser";
import {
  MessageBox,
  InlineCode,
  Code,
  Example,
  PropsTable
} from "theme";
import {Form , Input} from 'shineDev';
import code from "./demo";
import "./demo/index.scss";

# Form 表单控件

## 概述

表单组件是基础容器组件，通常作为其他表单组件的最外层容器使用，部分配置特性需要在该容器下生效。

## 推荐结构

Shine Design 推荐如下作为表单的标准结构：

```jsx
<Form>
  <Form.Verifier>
    <Form.Item>
      <FormElement />
    </Form.Item>
    <Form.Item>
      <FormElement />
    </Form.Item>
  </Form.Verifier>
</Form>
```

#### 表单容器 Form
`Form` 组件应该被理解为最顶层容器，被嵌套在表单最上层，提供表单层级的配置信息。

#### 表单校验 Verifier
`Verifier` 组件应该作为 `Form` 组件的子元素，虽然可以在 `Form` 内创建多个该组件实例，但建议仅配置一个。

#### 表单项 Item
`Item` 组件是表单元素的容器组件，支持配置多个，用于扩展表单元素组件的功能。

#### 表单元素 FormElement
`FormElement` 是一类组件的统称，并非实际组件，该类组件是原子粒度的组件，例如输入框 `Input` ，选择框 `Select` 等。

<MessageBox messageType="danger">
上述标准结构仅供参考。
</MessageBox>

## 代码示例

## 基础表单

<Example
  display={<JsxParser {...code.form} />}
  code={{code:code.form.jsx}}
  components={code.form.components}
/>

### 配置参数

<PropsTable of={Form} />