---
title: Form 表单
order: 12
group:
  path: /components
nav:
  title: 组件
  path: /components
---

## 使用

具有数据收集、校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素。

### 使用原则

- 普通页面级的表单，字段之间的上下间距(`margin-bottom`)默认为 `24px`；
- 模态框中的表单，字段之间的上下间距(`margin-bottom`)默认为 `20px`；
- 列表上方中的筛选表单，字段之间的上下间距(`margin-bottom`)默认为 `20px`；

### 基本使用

```jsx
import React from 'react';
import { Form, Input, Checkbox, Button } from 'baas-ui';

const layout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 12 },
};
const tailLayout = {
  wrapperCol: { offset: 4, span: 12 },
};

const onFinish = values => {
  console.log('Success:', values);
};

const onFinishFailed = errorInfo => {
  console.log('Failed:', errorInfo);
};

export default () => (
  <Form
    {...layout}
    initialValues={{
      remember: true,
    }}
    onFinish={onFinish}
    onFinishFailed={onFinishFailed}
  >
    <Form.Item
      label="用户名"
      name="username"
      required={false}
      rules={[
        { required: true, message: '请输入用户名' },
        { max: 16, message: '不能超过16个字符' },
        { min: 2, message: '最少2个字符' },
      ]}
    >
      <Input placeholder="请输入用户名" />
    </Form.Item>
    <Form.Item
      label="密码"
      name="password"
      required={false}
      rules={[
        { required: true, message: '请输入密码' },
        { max: 16, message: '密码不能超过16个字符' },
        { min: 6, message: '密码最少6个字符' },
      ]}
    >
      <Input.Password placeholder="请输入密码" />
    </Form.Item>
    <Form.Item {...tailLayout} name="remember" valuePropName="checked">
      <Checkbox>Remember me</Checkbox>
    </Form.Item>
    <Form.Item {...tailLayout}>
      <Button type="primary" htmlType="submit">
        提交
      </Button>
    </Form.Item>
  </Form>
);
```