## Form Form consists of `input`, `radio`, `select`, `checkbox` and so on. With form, you can collect, verify and submit data. ### Basic form It includes all kinds of input items, such as `input`, `select`, `radio` and `checkbox`. :::demo In each `form` component, you need a `form-item` field to be the container of your input item. ```html - Create Cancel ``` ::: ### Inline form When the vertical space is limited and the form is relatively simple, you can put it in one line. :::demo Set the `inline` attribute to `true` and the form will be inline. ```html Query ``` ::: ### Alignment Depending on your design, there are several different ways to align your label element. #### Top :::demo The `label-position` attribute decides how labels align, it can be `top` or `left`. When set to `top`, labels will be placed at the top of the form field. ```html ``` ::: #### Right :::demo When `label-position` is omitted, labels will align to the right ```html ``` ::: #### Left :::demo When `label-position` is set to `top`, labels will align to the left. ```html ``` ::: ### Validation Form component allows you to verify your data, helping you find and correct errors. :::demo Just add the `rule` attribute for `Form` component, pass validation rules, and set `prop` attribute for `Form-Item` as a specific key that needs to be validated. See more information at [async-validator](https://github.com/yiminghe/async-validator). ```html - Create Reset ``` ::: ### Custom validation rules :::demo This example shows how to customize your own validation rules to finish a two-factor password verification. ```html Submit Reset ``` ::: ### Delete or add form items dynamically :::demo In addition to passing all validation rules at once on the form component, you can also pass the validation rules or delete rules on a single form field dynamically. ```html Delete Submit New domain Reset ``` ::: ### Form Attributes | Attribute | Description | Type | Accepted Values | Default | | ---- | ----| ---- | ---- | ---- | | model| data of form component | object | — | — | | rules | validation rules of form | object | — | — | | inline | whether the form is inline | boolean | — | false | | label-position | position of label | string | left/right/top | right | | label-width | width of label, and all form items will inherit from `Form` | string | — | — | | label-suffix | suffix of the label | string | — | — | ### Form Methods | Method | Description | | ---- | ---- | | validate(cb) | the method to validate the whole form | | validateField(prop, cb) | the method to validate a certain form item | | resetFields | reset all the fields and remove validation result | ### Form-Item Attributes | Attribute | Description | Type | Accepted Values | Default | | ---- | ----| ---- | ---- | ---- | | prop | a key of `model` | string | keys of model that passed to `form` | | label | label | string | — | — | | label-width | width of label, e.g. '50px' | string | — | — | | required | whether the field is required or not, will be determined by validation rules if omitted | string | — | false | | rules | validation rules of form | object | — | — | | error | field error message, set its value and the field will validate error and show this message immediately | string | — | — |