## 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. :::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 Left Right Top

``` ::: ### 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 ``` ::: ### Number Validate ::: demo Number Validate need a `.number` modifier added on the input `v-model` binding，it's used to transform the string value to the number which is provided by Vuejs. ```html Submit 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 | — | — | | show-message | whether to show the error message | boolean | — | true | ### Form Methods | Method | Description | Parameters | | ---- | ---- | ---- | | validate | the method to validate the whole form | Function(callback: Function(boolean)) | | validateField | the method to validate a certain form item | Function(prop: string, callback: Function(errorMessage: string)) | | 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 | — | — | | show-message | whether to show the error message | boolean | — | true |