---
name: Form
title: 表单
category: 表单组件
owner: 徐修楼
---

## 示例

```atom 基础示例
<template>
    <view class="c-container wrapper">
        <form @submit="onSubmit" @reset="onReset">
            <view class="c-gap-top c-gap-bottom">input</view>
            <input
                :maxlength="10"
                name="input"
                placeholder="最大输入长度10"
                class="c-gap-top c-gap-bottom c-gap-inner-top c-gap-inner-bottom text-input"
            />

            <view class="c-gap-top c-gap-bottom">picker</view>
            <picker
                name="picker"
                mode="time" 
                start="1:11"
                end="22:50"
                :value="time"
                @change="timeChange"
            >
                <text class="picker">
                    {{time}}
                </text>
            </picker>

            <view class="c-gap-top c-gap-bottom">slider</view>
            <slider name="slider" value="62" class="c-gap-top c-gap-bottom"/>

            <view class="c-gap-top c-gap-bottom">switch</view>
            <switch name="switch"/>

            <view class="c-gap-top c-gap-bottom">checkbox</view>
            <checkbox name="checkbox"/>

            <view class="c-gap-top c-gap-bottom">checkboxgroup</view>
            <checkboxgroup name="checkboxgroup">
                <checkbox
                    a-for="(item, index) in list"
                    :value="item.value"
                    :checked="item.checked"
                    :disabled="item.disabled"
                    :key="index"
                >
                    {{ item.text }}
                </checkbox>
            </checkboxgroup>

            <view class="c-gap-top c-gap-bottom">radiogroup</view>
            <radiogroup name="radiogroup">
                <label
                    a-for="(item, index) in list"
                    :key="index"
                    :for="index"
                >
                    <radio
                        :value="item.value"
                        :checked="item.checked"
                        :disabled="item.disabled"
                        :id="index"
                        color="#ff0000"
                    >
                    {{ item.text }}
                    </radio>
                </label>
            </radiogroup>

            <view class="c-gap-top c-gap-bottom btn-bar">
                <button form-type="submit" type="primary" class="btn c-gap-top c-gap-bottom">
                    提交
                </button>
                <button form-type="reset" class="btn c-gap-top c-gap-bottom">重置</button>
            </view>
        </form>
    </view>
</template>

<script type="config">
{
    components: {
        view: 'components/View/View',
        form: 'components/Form/Form',
        input: 'components/Input/Input',
        picker: 'components/Picker/Picker',
        switch: 'components/Switch/Switch',
        checkbox: 'components/Checkbox/Checkbox',
        checkboxgroup: 'components/CheckboxGroup/CheckboxGroup',
        radio: 'components/Radio/Radio',
        radiogroup: 'components/RadioGroup/RadioGroup',
        button: 'components/Button/Button',
        slider: 'components/Slider/Slider'
    },
    data: {
        time: '12:58',
        list: [
            {
                value: 'China',
                text: '中国'
            },
            {
                value: 'US',
                text: '美国'
            },
            {
                value: 'Britain',
                text: '英国',
                checked: true
            },
            {
                value: 'Japan',
                text: '日本',
                disabled: true
            }
        ]
    }
}
</script>

<script>
export default {
    methods: {
        timeChange(e) {
            this.time = e.detail.value;
        },
        onSubmit(evt) {
            console.log('commit', evt);
        },
        onReset() {
            console.log('reset');
        }
    }
};
</script>

<style lang="less" scoped>
.wrapper {
    padding-top: 0;
    padding-bottom: 0;

    .text-input {
        border: 1px solid #f5f5f5;
    }

    .btn-bar {
        .btn {
            width: 100%;
        }
    }
}
</style>

```

## API
### Props

### Slots



名称 | 描述
--- | ---
default | 表单子节点

### Events


- **reset**: 表单重置时会触发 reset 事件
	无参数

- **submit**: 携带 form 中的数据触发 submit 事件

名称 | 类型 | 描述
--- | --- | ---
event | object | -
  event.detail | object | -
  event.detail.target | object | -
  event.detail.value | object | 表单的值