diff --git a/examples/routers/form.vue b/examples/routers/form.vue
index 7715e03d..6e09b888 100644
--- a/examples/routers/form.vue
+++ b/examples/routers/form.vue
@@ -1,62 +1,168 @@
 <template>
-    <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
-        <Form-item prop="name">
-            <span slot="label"><Icon type="ionic"></Icon></span>
-            <AutoComplete v-model="formValidate.name" :data="['Li','Liang','Zhang']" placeholder="请输入姓名"></AutoComplete>
-        </Form-item>
-        <Form-item label="邮箱" prop="mail">
-            <!--<Input v-model="formValidate.mail" placeholder="请输入邮箱"></Input>-->
-            <ColorPicker v-model="formValidate.mail"></ColorPicker>
-        </Form-item>
-        <Form-item label="城市" prop="city">
-            <Select v-model="formValidate.city" placeholder="请选择所在地">
-                <Option value="beijing">北京市</Option>
-                <Option value="shanghai">上海市</Option>
-                <Option value="shenzhen">深圳市</Option>
-            </Select>
-        </Form-item>
-        <Form-item label="选择日期">
-            <Row>
-                <Col span="11">
-                <Form-item prop="date">
-                    <Date-picker type="date" placeholder="选择日期" v-model="formValidate.date"></Date-picker>
-                </Form-item>
-                </Col>
-                <Col span="2" style="text-align: center">-</Col>
-                <Col span="11">
-                <Form-item prop="time">
-                    <Time-picker type="time" placeholder="选择时间" v-model="formValidate.time"></Time-picker>
-                </Form-item>
-                </Col>
-            </Row>
-        </Form-item>
-        <Form-item label="性别" prop="gender">
-            <Radio-group v-model="formValidate.gender">
-                <Radio label="male">男</Radio>
-                <Radio label="female">女</Radio>
-            </Radio-group>
-        </Form-item>
-        <Form-item label="爱好" prop="interest">
-            <Checkbox-group v-model="formValidate.interest">
-                <Checkbox label="吃饭"></Checkbox>
-                <Checkbox label="睡觉"></Checkbox>
-                <Checkbox label="跑步"></Checkbox>
-                <Checkbox label="看电影"></Checkbox>
-            </Checkbox-group>
-        </Form-item>
-        <Form-item label="介绍" prop="desc">
-            <Input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
-        </Form-item>
-        <Form-item>
-            <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
-            <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
-        </Form-item>
-    </Form>
+    <div>
+        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
+            <Form-item prop="name">
+                <span slot="label"><Icon type="ionic"></Icon></span>
+                <AutoComplete v-model="formValidate.name" :data="['Li','Liang','Zhang']" placeholder="请输入姓名"></AutoComplete>
+            </Form-item>
+            <Form-item label="邮箱" prop="mail">
+                <!--<Input v-model="formValidate.mail" placeholder="请输入邮箱"></Input>-->
+                <ColorPicker v-model="formValidate.mail"></ColorPicker>
+            </Form-item>
+            <Form-item label="城市" prop="city">
+                <Select v-model="formValidate.city" placeholder="请选择所在地">
+                    <Option value="beijing">北京市</Option>
+                    <Option value="shanghai">上海市</Option>
+                    <Option value="shenzhen">深圳市</Option>
+                </Select>
+            </Form-item>
+            <Form-item label="选择日期">
+                <Row>
+                    <Col span="11">
+                    <Form-item prop="date">
+                        <Date-picker type="date" placeholder="选择日期" v-model="formValidate.date"></Date-picker>
+                    </Form-item>
+                    </Col>
+                    <Col span="2" style="text-align: center">-</Col>
+                    <Col span="11">
+                    <Form-item prop="time">
+                        <Time-picker type="time" placeholder="选择时间" v-model="formValidate.time"></Time-picker>
+                    </Form-item>
+                    </Col>
+                </Row>
+            </Form-item>
+            <Form-item label="性别" prop="gender">
+                <Radio-group v-model="formValidate.gender">
+                    <Radio label="male">男</Radio>
+                    <Radio label="female">女</Radio>
+                </Radio-group>
+            </Form-item>
+            <Form-item label="爱好" prop="interest">
+                <Checkbox-group v-model="formValidate.interest">
+                    <Checkbox label="吃饭"></Checkbox>
+                    <Checkbox label="睡觉"></Checkbox>
+                    <Checkbox label="跑步"></Checkbox>
+                    <Checkbox label="看电影"></Checkbox>
+                </Checkbox-group>
+            </Form-item>
+            <Form-item label="介绍" prop="desc">
+                <Input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
+            </Form-item>
+            <Form-item>
+                <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
+                <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
+            </Form-item>
+        </Form>
+
+        <div style="margin: 100px">
+            <form action="/">
+                <Input name="f1"></Input>
+                <i-switch name="f2" :true-value="1" :false-value="2"></i-switch>
+                <Select v-model="model1" multiple style="width:200px" name="f3">
+                    <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+                </Select>
+                <AutoComplete
+                        v-model="value1"
+                        :data="data1"
+                        @on-search="handleSearch1"
+                        placeholder="input here"
+                        name="f4"
+                        style="width:200px"></AutoComplete>
+                <Slider v-model="value11" name="f5"></Slider>
+                <DatePicker type="date" placeholder="选择日期" style="width: 200px" name="f6"></DatePicker>
+                <TimePicker type="time" placeholder="选择时间" style="width: 168px" name="f7"></TimePicker>
+                <Cascader :data="datac" v-model="valuec" name="f8"></Cascader>
+                <Rate v-model="valuer" name="f9"></Rate>
+                <ColorPicker v-model="color" name="f10" />
+                <button type="submit">test</button>
+            </form>
+        </div>
+    </div>
 </template>
 <script>
     export default {
         data () {
             return {
+                color: '#19be6b',
+                valuer: 3,
+                valuec: [],
+                datac: [{
+                    value: 'beijing',
+                    label: '北京',
+                    children: [
+                        {
+                            value: 'gugong',
+                            label: '故宫'
+                        },
+                        {
+                            value: 'tiantan',
+                            label: '天坛'
+                        },
+                        {
+                            value: 'wangfujing',
+                            label: '王府井'
+                        }
+                    ]
+                }, {
+                    value: 'jiangsu',
+                    label: '江苏',
+                    children: [
+                        {
+                            value: 'nanjing',
+                            label: '南京',
+                            children: [
+                                {
+                                    value: 'fuzimiao',
+                                    label: '夫子庙',
+                                }
+                            ]
+                        },
+                        {
+                            value: 'suzhou',
+                            label: '苏州',
+                            children: [
+                                {
+                                    value: 'zhuozhengyuan',
+                                    label: '拙政园',
+                                },
+                                {
+                                    value: 'shizilin',
+                                    label: '狮子林',
+                                }
+                            ]
+                        }
+                    ],
+                }],
+                value1: '',
+                value11: 25,
+                data1: [],
+                cityList: [
+                    {
+                        value: 'beijing',
+                        label: '北京市'
+                    },
+                    {
+                        value: 'shanghai',
+                        label: '上海市'
+                    },
+                    {
+                        value: 'shenzhen',
+                        label: '深圳市'
+                    },
+                    {
+                        value: 'hangzhou',
+                        label: '杭州市'
+                    },
+                    {
+                        value: 'nanjing',
+                        label: '南京市'
+                    },
+                    {
+                        value: 'chongqing',
+                        label: '重庆市'
+                    }
+                ],
+                model1: [],
                 name: '',
                 formValidate: {
                     name: '',
@@ -110,6 +216,13 @@
             },
             handleReset (name) {
                 this.$refs[name].resetFields();
+            },
+            handleSearch1 (value) {
+                this.data1 = !value ? [] : [
+                    value,
+                    value + value,
+                    value + value + value
+                ];
             }
         }
     }
diff --git a/src/components/auto-complete/auto-complete.vue b/src/components/auto-complete/auto-complete.vue
index 7665fd76..c5144392 100644
--- a/src/components/auto-complete/auto-complete.vue
+++ b/src/components/auto-complete/auto-complete.vue
@@ -18,6 +18,7 @@
                 ref="input"
                 slot="input"
                 v-model="currentValue"
+                :name="name"
                 :placeholder="placeholder"
                 :disabled="disabled"
                 :size="size"
@@ -81,6 +82,9 @@
             transfer: {
                 type: Boolean,
                 default: false
+            },
+            name: {
+                type: String
             }
         },
         data () {
diff --git a/src/components/cascader/cascader.vue b/src/components/cascader/cascader.vue
index ec52ecd5..ade65a13 100644
--- a/src/components/cascader/cascader.vue
+++ b/src/components/cascader/cascader.vue
@@ -1,6 +1,7 @@
 <template>
     <div :class="classes" v-clickoutside="handleClose">
         <div :class="[prefixCls + '-rel']" @click="toggleOpen" ref="reference">
+            <input type="hidden" :name="name" :value="currentValue">
             <slot>
                 <i-input
                     ref="input"
@@ -127,6 +128,9 @@
             transfer: {
                 type: Boolean,
                 default: false
+            },
+            name: {
+                type: String
             }
         },
         data () {
diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue
index e64b4981..3fc46413 100644
--- a/src/components/checkbox/checkbox.vue
+++ b/src/components/checkbox/checkbox.vue
@@ -9,6 +9,7 @@
                 :disabled="disabled"
                 :value="label"
                 v-model="model"
+                :name="name"
                 @change="change">
             <input
                 v-if="!group"
@@ -16,6 +17,7 @@
                 :class="inputClasses"
                 :disabled="disabled"
                 :checked="currentValue"
+                :name="name"
                 @change="change">
         </span>
         <slot><span v-if="showSlot">{{ label }}</span></slot>
@@ -58,6 +60,9 @@
                 validator (value) {
                     return oneOf(value, ['small', 'large', 'default']);
                 }
+            },
+            name: {
+                type: String
             }
         },
         data () {
diff --git a/src/components/color-picker/color-picker.vue b/src/components/color-picker/color-picker.vue
index 26ab49e5..6820c4c3 100644
--- a/src/components/color-picker/color-picker.vue
+++ b/src/components/color-picker/color-picker.vue
@@ -1,6 +1,7 @@
 <template>
     <div :class="classes" v-clickoutside="handleClose">
         <div ref="reference" @click="toggleVisible" :class="wrapClasses">
+            <input type="hidden" :name="name" :value="currentValue">
             <i class="ivu-icon ivu-icon-arrow-down-b ivu-input-icon ivu-input-icon-normal"></i>
             <div :class="inputClasses">
                 <div :class="[prefixCls + '-color']">
@@ -167,11 +168,15 @@
             transfer: {
                 type: Boolean,
                 default: false
+            },
+            name: {
+                type: String
             }
         },
         data () {
             return {
                 val: _colorChange(this.value),
+                currentValue: this.value,
                 prefixCls: prefixCls,
                 visible: false,
                 disableCloseUnderTransfer: false,  // transfer 模式下，点击Drop也会触发关闭
@@ -344,12 +349,14 @@
             },
             handleSuccess () {
                 const color = this.formatColor;
+                this.currentValue = color;
                 this.$emit('input', color);
                 this.$emit('on-change', color);
                 this.dispatch('FormItem', 'on-form-change', color);
                 this.handleClose();
             },
             handleClear () {
+                this.currentValue = '';
                 this.$emit('input', '');
                 this.$emit('on-change', '');
                 this.dispatch('FormItem', 'on-form-change', '');
diff --git a/src/components/date-picker/picker.vue b/src/components/date-picker/picker.vue
index 3fafbec2..bcdb03ad 100644
--- a/src/components/date-picker/picker.vue
+++ b/src/components/date-picker/picker.vue
@@ -9,6 +9,7 @@
                     :size="size"
                     :placeholder="placeholder"
                     :value="visualValue"
+                    :name="name"
                     @on-input-change="handleInputChange"
                     @on-focus="handleFocus"
                     @on-click="handleIconClick"
@@ -197,6 +198,9 @@
             transfer: {
                 type: Boolean,
                 default: false
+            },
+            name: {
+                type: String
             }
         },
         data () {
diff --git a/src/components/radio/radio.vue b/src/components/radio/radio.vue
index 9d17ac76..063a6740 100644
--- a/src/components/radio/radio.vue
+++ b/src/components/radio/radio.vue
@@ -7,6 +7,7 @@
                 :class="inputClasses"
                 :disabled="disabled"
                 :checked="currentValue"
+                :name="name"
                 @change="change">
         </span><slot>{{ label }}</slot>
     </label>
@@ -44,6 +45,9 @@
                 validator (value) {
                     return oneOf(value, ['small', 'large', 'default']);
                 }
+            },
+            name: {
+                type: String
             }
         },
         data () {
diff --git a/src/components/rate/rate.vue b/src/components/rate/rate.vue
index 07a3c1e9..0f23245e 100644
--- a/src/components/rate/rate.vue
+++ b/src/components/rate/rate.vue
@@ -1,5 +1,6 @@
 <template>
     <div :class="classes" @mouseleave="handleMouseleave">
+        <input type="hidden" :name="name" :value="currentValue">
         <div
             v-for="item in count"
             :class="starCls(item)"
@@ -19,6 +20,7 @@
     const prefixCls = 'ivu-rate';
 
     export default {
+        name: 'Rate',
         mixins: [ Locale, Emitter ],
         props: {
             count: {
@@ -40,6 +42,9 @@
             showText: {
                 type: Boolean,
                 default: false
+            },
+            name: {
+                type: String
             }
         },
         data () {
diff --git a/src/components/select/select.vue b/src/components/select/select.vue
index 94105376..ae554a70 100644
--- a/src/components/select/select.vue
+++ b/src/components/select/select.vue
@@ -5,6 +5,7 @@
             ref="reference"
             @click="toggleMenu">
             <slot name="input">
+                <input type="hidden" :name="name" :value="model">
                 <div class="ivu-tag" v-for="(item, index) in selectedMultiple">
                     <span class="ivu-tag-text">{{ item.label }}</span>
                     <Icon type="ios-close-empty" @click.native.stop="removeTag(index)"></Icon>
@@ -131,6 +132,9 @@
             autoComplete: {
                 type: Boolean,
                 default: false
+            },
+            name: {
+                type: String
             }
         },
         data () {
diff --git a/src/components/slider/slider.vue b/src/components/slider/slider.vue
index 5574fa32..df85723f 100644
--- a/src/components/slider/slider.vue
+++ b/src/components/slider/slider.vue
@@ -9,6 +9,7 @@
             :disabled="disabled"
             @on-change="handleInputChange"></Input-number>
         <div :class="[prefixCls + '-wrap']" ref="slider" @click.self="sliderClick">
+            <input type="hidden" :name="name" :value="currentValue">
             <template v-if="showStops">
                 <div :class="[prefixCls + '-stop']" v-for="item in stops" :style="{ 'left': item + '%' }" @click.self="sliderClick"></div>
             </template>
@@ -102,6 +103,9 @@
                 validator (value) {
                     return oneOf(value, ['hover', 'always', 'never']);
                 }
+            },
+            name: {
+                type: String
             }
         },
         data () {
diff --git a/src/components/switch/switch.vue b/src/components/switch/switch.vue
index 40e367b9..edee902b 100644
--- a/src/components/switch/switch.vue
+++ b/src/components/switch/switch.vue
@@ -1,5 +1,6 @@
 <template>
     <span :class="wrapClasses" @click="toggle">
+        <input type="hidden" :name="name" :value="currentValue">
         <span :class="innerClasses">
             <slot name="open" v-if="currentValue === trueValue"></slot>
             <slot name="close" v-if="currentValue === falseValue"></slot>
@@ -36,6 +37,9 @@
                 validator (value) {
                     return oneOf(value, ['large', 'small', 'default']);
                 }
+            },
+            name: {
+                type: String
             }
         },
         data () {