diff --git a/components/form/demo/disabled.md b/components/form/demo/disabled.md
index 02abcee78c..63d9a238ea 100644
--- a/components/form/demo/disabled.md
+++ b/components/form/demo/disabled.md
@@ -2,7 +2,7 @@
 
 - order: 2
 
-1) 单独为输入框设置 `disabled` 属性；
+1) 单独为输入控件设置 `disabled` 属性；
 
 2) 为 `<fieldset>` 设置 `disabled` 属性，可以禁用 `<fieldset>` 中包含的所有控件。
 
@@ -10,42 +10,39 @@
 
 ````jsx
 var Form = antd.Form;
-var Input = Form.Input;
-var FormItem = Form.Item;
 var Button = antd.Button;
 var Checkbox = antd.Checkbox;
 var Radio = antd.Radio;
 var RadioGroup = antd.Radio.Group;
 
-React.render(
+ReactDOM.render(
 <Form horizontal>
-  <FormItem
+  <Form.Item
     label="单独禁用输入框："
     labelClassName="col-5"
     wrapperClassName="col-12">
-    <Input type="text" value="我是禁用的" disabled />
-  </FormItem>
+    <Form.Input type="text" defaultValue="我是禁用的" disabled />
+  </Form.Item>
 
   <fieldset disabled>
     <legend>禁用的 fieldset</legend>
-    <FormItem
+    <Form.Item
       label="用户名："
       labelClassName="col-5"
       wrapperClassName="col-12"
-      required={true}
-      isCompact={true} >
-      <Input type="static" value="大眼萌 minion" id="userName" />
-    </FormItem>
-    <FormItem
+      required={true} >
+      <Form.Input type="static" value="大眼萌 minion" id="userName" />
+    </Form.Item>
+    <Form.Item
       label="密码："
       labelClassName="col-5"
       wrapperClassName="col-12"
       required={true} >
-      <Input type="password" value="123456" id="password" />
-    </FormItem>
+      <Form.Input type="password" defaultValue="123456" id="password" />
+    </Form.Item>
     <div className="row">
       <div className="col-12 col-offset-5">
-        <input type="submit" className="ant-btn ant-btn-primary" value="确 定" />
+        <Form.Input type="submit" className="ant-btn ant-btn-primary" defaultValue="确 定" />
       </div>
     </div>
   </fieldset>
diff --git a/components/form/demo/form-controls.md b/components/form/demo/form-controls.md
index 06ad7a6869..e785160c63 100644
--- a/components/form/demo/form-controls.md
+++ b/components/form/demo/form-controls.md
@@ -10,8 +10,6 @@
 
 ````jsx
 var Form = antd.Form;
-var Input = Form.Input;
-var FormItem = Form.Item;
 var Select = antd.Select;
 var Option = Select.Option;
 var Checkbox = antd.Checkbox;
@@ -22,23 +20,23 @@ function handleSelectChange(value) {
   console.log('selected ' + value);
 }
 
-React.render(
+ReactDOM.render(
 <Form horizontal>
-  <FormItem
+  <Form.Item
     label="输入框："
     labelClassName="col-6"
     wrapperClassName="col-14">
-    <Input type="text" id="control-input" placeholder="Please enter..." />
-  </FormItem>
+    <Form.Input type="text" id="control-input" placeholder="Please enter..." />
+  </Form.Item>
 
-  <FormItem
+  <Form.Item
     label="文本域："
     labelClassName="col-6"
     wrapperClassName="col-14">
-    <Input type="textarea" id="control-textarea"/>
-  </FormItem>
+    <Form.Input type="textarea" id="control-textarea"/>
+  </Form.Item>
 
-  <FormItem
+  <Form.Item
     label="Select 选择器："
     labelClassName="col-6"
     wrapperClassName="col-14">
@@ -48,13 +46,12 @@ React.render(
       <Option value="disabled" disabled>disabled</Option>
       <Option value="yiminghe">yiminghe</Option>
     </Select>
-  </FormItem>
+  </Form.Item>
 
-  <FormItem
+  <Form.Item
     label="Checkbox 多选框："
     labelClassName="col-6"
-    wrapperClassName="col-18"
-    isCompact>
+    wrapperClassName="col-18" >
       <label className="ant-checkbox-vertical">
         <Checkbox />选项一
       </label>
@@ -64,13 +61,12 @@ React.render(
       <label className="ant-checkbox-vertical">
         <Checkbox disabled={true} />选项三（不可选）
       </label>
-  </FormItem>
+  </Form.Item>
 
-  <FormItem
+  <Form.Item
     label="Checkbox 多选框："
     labelClassName="col-6"
-    wrapperClassName="col-18"
-    isCompact>
+    wrapperClassName="col-18" >
       <label className="ant-checkbox-inline">
         <Checkbox />选项一
       </label>
@@ -80,20 +76,19 @@ React.render(
       <label className="ant-checkbox-inline">
         <Checkbox />选项三
       </label>
-  </FormItem>
+  </Form.Item>
 
-  <FormItem
+  <Form.Item
     label="Radio 单选框："
     labelClassName="col-6"
-    wrapperClassName="col-18"
-    isCompact>
+    wrapperClassName="col-18" >
       <RadioGroup value="b">
         <Radio value="a">A</Radio>
         <Radio value="b">B</Radio>
         <Radio value="c">C</Radio>
         <Radio value="d">D</Radio>
       </RadioGroup>
-  </FormItem>
+  </Form.Item>
 </Form>
 , document.getElementById('components-form-demo-form-controls'));
 ````
diff --git a/components/form/demo/horizontal-form.md b/components/form/demo/horizontal-form.md
index 9b450e0199..fa0fbdf797 100644
--- a/components/form/demo/horizontal-form.md
+++ b/components/form/demo/horizontal-form.md
@@ -2,68 +2,90 @@
 
 - order: 0
 
-**注意**：在我们的设计里，表单域为静态文本、`checkbox`、`radio`以及`input[type="file"]`的，其高度不同于一般的表单域，**需要将 `<Form.Item>` 的 `isCompact` 设置为 true**。
+示例展示了如何通过使用 `Form.ValueMixin` 来获取和更新表单提交的数值。
+
+**注意：** 你需要为每个输入控件声明 `name` 属性。
 
 ---
 
 ````jsx
 var Form = antd.Form;
-var Input = Form.Input;
-var FormItem = Form.Item;
 var Button = antd.Button;
 var Checkbox = antd.Checkbox;
 var Radio = antd.Radio;
 var RadioGroup = antd.Radio.Group;
 var Button = antd.Button;
 
-React.render(
-<Form horizontal>
-  <FormItem
-    label="用户名："
-    labelClassName="col-6"
-    wrapperClassName="col-6"
-    required={true}
-    isCompact={true}>
-    <Input type="static" value="大眼萌 minion" id="userName" />
-  </FormItem>
-  <FormItem
-    label="密码："
-    labelClassName="col-6"
-    wrapperClassName="col-14"
-    required={true} >
-    <Input type="password" id="password" placeholder="请输入密码" />
-  </FormItem>
-  <FormItem
-    label="您的性别："
-    labelClassName="col-6"
-    wrapperClassName="col-14"
-    required={true}
-    isCompact={true}>
-      <RadioGroup value="male">
-        <Radio value="male">男的</Radio>
-        <Radio value="female">女的</Radio>
-      </RadioGroup>
-  </FormItem>
-  <FormItem
-    label="备注："
-    labelClassName="col-6"
-    wrapperClassName="col-14"
-    required={true}
-    help="随便写点什么" >
-    <Input type="textarea" placeholder="随便写" id="remark" />
-  </FormItem>
-  <FormItem
-    wrapperClassName="col-14 col-offset-6">
-    <label>
-      <Checkbox /> 同意
-    </label>
-  </FormItem>
-  <div className="row">
-    <div className="col-16 col-offset-6">
-      <Button type="primary">确定</Button>
-    </div>
-  </div>
-</Form>
+var Demo = React.createClass({
+  mixins: [Form.ValueMixin],
 
-, document.getElementById('components-form-demo-horizontal-form'));
+  getInitialState() {
+    return {
+      formData: {
+        userName: '大眼萌 minion',
+        password: undefined,
+        gender: 'male',
+        remark: undefined,
+        agreement: undefined,
+      }
+    };
+  },
+
+  handleSubmit(e) {
+    e.preventDefault();
+    console.log(this.state.formData);
+  },
+
+  render() {
+    var formData = this.state.formData;
+    return (
+      <Form horizontal onSubmit={this.handleSubmit}>
+        <Form.Item
+          label="用户名："
+          labelClassName="col-6"
+          wrapperClassName="col-6"
+          required={true} >
+          <Form.Input type="static" value="大眼萌 minion" id="userName" name="userName" />
+        </Form.Item>
+        <Form.Item
+          label="密码："
+          labelClassName="col-6"
+          wrapperClassName="col-14"
+          required={true} >
+          <Form.Input type="password" id="password" name="password" placeholder="请输入密码" value={formData.password} onChange={this.setValue.bind(this, 'password')} />
+        </Form.Item>
+        <Form.Item
+          label="您的性别："
+          labelClassName="col-6"
+          wrapperClassName="col-14"
+          required={true} >
+            <RadioGroup value="male" name="gender" value={formData.gender} onChange={this.setValue.bind(this, 'gender')} >
+              <Radio value="male">男的</Radio>
+              <Radio value="female">女的</Radio>
+            </RadioGroup>
+        </Form.Item>
+        <Form.Item
+          label="备注："
+          labelClassName="col-6"
+          wrapperClassName="col-14"
+          required={true}
+          help="随便写点什么" >
+          <Form.Input type="textarea" placeholder="随便写" id="remark" name="remark" value={formData.remark} onChange={this.setValue.bind(this, 'remark')} />
+        </Form.Item>
+        <Form.Item
+          wrapperClassName="col-14 col-offset-6" >
+          <label>
+            <Checkbox name="agreement" value={formData.agreement} onChange={this.setValue.bind(this, 'agreement')} /> 同意
+          </label>
+        </Form.Item>
+        <div className="row">
+          <div className="col-16 col-offset-6">
+            <Button type="primary" htmlType="submit">确定</Button>
+          </div>
+        </div>
+      </Form>
+    );
+  }
+});
+ReactDOM.render(<Demo />, document.getElementById('components-form-demo-horizontal-form'));
 ````
diff --git a/components/form/demo/inline-form.md b/components/form/demo/inline-form.md
index 3eb0766455..a825d4eeb9 100644
--- a/components/form/demo/inline-form.md
+++ b/components/form/demo/inline-form.md
@@ -6,28 +6,49 @@
 
 ````jsx
 var Form = antd.Form;
-var Input = Form.Input;
-var FormItem = Form.Item;
 var Checkbox = antd.Checkbox;
 var Button = antd.Button;
 
-React.render(
-<Form inline>
-  <FormItem
-    label="账户：">
-    <Input type="text" placeholder="请输入账户名" id="userName" />
-  </FormItem>
-  <FormItem
-    label="密码：">
-    <Input type="password" placeholder="请输入密码" id="password2" />
-  </FormItem>
-  <FormItem
-    type="checkbox">
-    <label className="ant-checkbox-inline">
-      <Checkbox /> 记住我
-    </label>
-  </FormItem>
-  <input type="submit" className="ant-btn ant-btn-primary" value="登 录" />
-</Form>
-, document.getElementById('components-form-demo-inline-form'));
+var Demo = React.createClass({
+  mixins: [Form.ValueMixin],
+
+  getInitialState() {
+    return {
+      formData: {
+        userName: undefined,
+        password: undefined,
+        agreement: undefined,
+      }
+    };
+  },
+
+  handleSubmit(e) {
+    e.preventDefault();
+    console.log(this.state.formData);
+  },
+
+  render() {
+    var formData = this.state.formData;
+    return (
+      <Form inline onSubmit={this.handleSubmit}>
+        <Form.Item
+          label="账户：">
+          <Form.Input type="text" placeholder="请输入账户名" id="userName" name="userName" onChange={this.setValue.bind(this, 'userName')} />
+        </Form.Item>
+        <Form.Item
+          label="密码：">
+          <Form.Input type="password" placeholder="请输入密码" id="password" name="password" onChange={this.setValue.bind(this, 'password')} />
+        </Form.Item>
+        <Form.Item>
+          <label className="ant-checkbox-inline">
+            <Checkbox  name="agreement" value={formData.agreement} onChange={this.setValue.bind(this, 'agreement')} /> 记住我
+          </label>
+        </Form.Item>
+        <Form.Input type="submit" className="ant-btn ant-btn-primary" defaultValue="登 录" />
+      </Form>
+    );
+  }
+});
+
+ReactDOM.render(<Demo />, document.getElementById('components-form-demo-inline-form'));
 ````
diff --git a/components/form/demo/input-size.md b/components/form/demo/input-size.md
index ad019ddf60..18e5a3f9b4 100644
--- a/components/form/demo/input-size.md
+++ b/components/form/demo/input-size.md
@@ -2,24 +2,33 @@
 
 - order: 6
 
-我们为定义了 `.ant-input` 类的输入框提供了三种尺寸：大（-lg）、中(默认)、小（-sm），往类名添加以上后缀即可。
+我们为 `<input />` 输入框定义了三种尺寸（大、默认、小）。
 
-但是在 `<form>` 表单里面，我们只使用**大尺寸**， 即高度为 **32px**，作为唯一的尺寸。
+css 样式引用： 定义 `.ant-input` 类的基础上加上 `.ant-input-lg .ant-input-sm` 即可。 
+
+`<Form.Input />` 组件引用需要声明 `site` 属性即可，属性值为 ['small', 'default', 'large']。
+
+注意： 在 `<form>` 表单里面，我们只使用**大尺寸**， 即高度为 **32px**，作为唯一的尺寸。
 
 ---
 
-````html
-<div class="row">
-  <div class="ant-input-group">
-    <div class="col-6">
-      <input class="ant-input ant-input-lg" type="text" id="largeInput" placeholder="大尺寸"/>
-    </div>
-    <div class="col-6">
-      <input class="ant-input" type="text" id="defaultInput" placeholder="默认尺寸"/>
-    </div>
-    <div class="col-6">
-      <input class="ant-input ant-input-sm" type="text" id="smallInput" placeholder="小尺寸"/>
-    </div>
+
+````jsx
+var Form = antd.Form;
+
+ReactDOM.render(
+  <div className="row">
+    <Form.InputGroup>
+      <div className="col-6">
+        <Form.Input type="text" id="largeInput" size="large" placeholder="大尺寸" />
+      </div>
+      <div className="col-6">
+        <Form.Input type="text" id="defaultInput" placeholder="默认尺寸" />
+      </div>
+      <div className="col-6">
+        <Form.Input type="text" id="smallInput" placeholder="小尺寸" size="small" />
+      </div>
+    </Form.InputGroup>
   </div>
-</div>
+, document.getElementById('components-form-demo-input-size'));
 ````
diff --git a/components/form/demo/inputs.md b/components/form/demo/inputs.md
index 7162ca44c9..51c2542d18 100644
--- a/components/form/demo/inputs.md
+++ b/components/form/demo/inputs.md
@@ -6,34 +6,31 @@
 
 ````jsx
 var Form = antd.Form;
-var Input = Form.Input;
-var FormItem = Form.Item;
-var InputGroup = Input.Group;
 var Select = antd.Select;
 var Option = Select.Option;
 
-React.render(
+ReactDOM.render(
 <Form horizontal>
-  <FormItem
+  <Form.Item
     label="标签输入框："
     labelClassName="col-6"
     wrapperClassName="col-16">
-    <Input type="text" addonBefore="Http://" value="mysite.com" id="site1"/>
-  </FormItem>
+    <Form.Input type="text" addonBefore="Http://" value="mysite.com" id="site1"/>
+  </Form.Item>
 
-  <FormItem
+  <Form.Item
     label="标签输入框："
     labelClassName="col-6"
     wrapperClassName="col-16">
-    <Input type="text" addonBefore="Http://"  addonAfter=".com" value="mysite" id="site2"/>
-  </FormItem>
+    <Form.Input type="text" addonBefore="Http://"  addonAfter=".com" value="mysite" id="site2"/>
+  </Form.Item>
 
-  <FormItem
+  <Form.Item
     label="select 标签输入框："
     labelClassName="col-6"
     wrapperClassName="col-16">
-    <InputGroup>
-      <Input type="text" id="site4" placeholder="www.mysite" />
+    <Form.InputGroup>
+      <Form.Input type="text" id="site4" placeholder="www.mysite" />
       <div className="ant-input-group-wrap">
         <Select defaultValue=".com" style={{width:70}}>
           <Option value=".com">.com</Option>
@@ -42,55 +39,55 @@ React.render(
           <Option value=".org">.org</Option>
         </Select>
       </div>
-    </InputGroup>
-  </FormItem>
+    </Form.InputGroup>
+  </Form.Item>
 
-  <FormItem
+  <Form.Item
     label="输入身份证："
     labelClassName="col-6"
     wrapperClassName="col-16">
-    <InputGroup>
+    <Form.InputGroup>
       <div className="col-6">
-        <Input type="text" id="certNo1" />
+        <Form.Input type="text" id="certNo1" />
       </div>
       <div className="col-6">
-        <Input type="text" id="certNo2" />
+        <Form.Input type="text" id="certNo2" />
       </div>
       <div className="col-6">
-        <Input type="text" id="certNo3" />
+        <Form.Input type="text" id="certNo3" />
       </div>
       <div className="col-6">
-        <Input type="text" id="certNo4" />
+        <Form.Input type="text" id="certNo4" />
       </div>
-    </InputGroup>
-  </FormItem>
+    </Form.InputGroup>
+  </Form.Item>
 
-  <FormItem
+  <Form.Item
     label="电话号码："
     labelClassName="col-6"
     wrapperClassName="col-16">
     <div className="row">
       <div className="col-4">
-        <Input type="text" id="tel1" value="086" />
+        <Form.Input type="text" id="tel1" value="086" />
       </div>
       <div className="col-2">
         <p className="ant-form-split">--</p>
       </div>
       <div className="col-18">
-        <InputGroup type="group">
+        <Form.InputGroup type="group">
           <div className="col-8">
-            <Input type="text" id="tel1" />
+            <Form.Input type="text" id="tel1" />
           </div>
           <div className="col-8">
-            <Input type="text" id="tel2" />
+            <Form.Input type="text" id="tel2" />
           </div>
           <div className="col-8">
-            <Input type="text" id="tel3" />
+            <Form.Input type="text" id="tel3" />
           </div>
-        </InputGroup>
+        </Form.InputGroup>
       </div>
     </div>
-  </FormItem>
+  </Form.Item>
 </Form>
 
 , document.getElementById('components-form-demo-inputs'));
diff --git a/components/form/demo/mix.md b/components/form/demo/mix.md
index 90673f3100..4c2aacae32 100644
--- a/components/form/demo/mix.md
+++ b/components/form/demo/mix.md
@@ -8,9 +8,6 @@
 
 ````jsx
 var Form = antd.Form;
-var Input = Form.Input;
-var FormItem = Form.Item;
-var InputGroup = Input.Group;
 var Select = antd.Select;
 var Option = Select.Option;
 var InputNumber = antd.InputNumber;
@@ -20,112 +17,106 @@ var Menu = antd.Menu;
 var Dropdown = antd.Dropdown;
 var Slider = antd.Slider;
 var Icon = antd.Icon;
+var Button = antd.Button;
 
-var menu = <Menu>
-  <Menu.Item>
-    <a target="_blank" href="http://www.alipay.com/">.net</a>
-  </Menu.Item>
-  <Menu.Item>
-    <a target="_blank" href="http://www.taobao.com/">.jp</a>
-  </Menu.Item>
-  <Menu.Item>
-    <a target="_blank" href="http://www.tmall.com/">.org</a>
-  </Menu.Item>
-</Menu>;
+var Demo = React.createClass({
+  mixins: [Form.ValueMixin],
 
-function handleSelectChange(value) {
-  console.log('selected ' + value);
-}
+  getInitialState() {
+    return {
+      formData: {
+        inputNumber: undefined,
+        static: "唧唧复唧唧木兰当户织呀",
+        switch: undefined,
+        slider: undefined,
+        select: undefined,
+        startDate: undefined,
+        endDate: undefined,
+      }
+    };
+  },
 
-function onInputNumberChange(v){
-  console.log('changed',v);
-}
+  handleSubmit(e) {
+    e.preventDefault();
+    console.log(this.state.formData);
+  },
 
-React.render(
-<Form horizontal>
-  <FormItem
-    label="InputNumber 数字输入框："
-    labelClassName="col-8"
-    wrapperClassName="col-10"
-    required={true} >
-    <InputNumber size="large" min={1} max={10} defaultValue={3} onChange={onInputNumberChange} style={{width:100}}/>
-    <span className="ant-form-text"> 台机器</span>
-  </FormItem>
+  render() {
+    var formData = this.state.formData;
+    return (
+      <Form horizontal onSubmit={this.handleSubmit} >
+        <Form.Item
+          label="InputNumber 数字输入框："
+          labelClassName="col-8"
+          wrapperClassName="col-10"
+          required={true} >
+          <InputNumber size="large" min={1} max={10} style={{width:100}} defaultValue={3} name="inputNumber" onChange={this.setValue.bind(this, 'inputNumber')} value={formData.inputNumber} />
+          <span className="ant-form-text"> 台机器</span>
+        </Form.Item>
 
-  <FormItem
-    label="我是标题："
-    labelClassName="col-8"
-    wrapperClassName="col-10"
-    required={true}
-    isCompact={true} >
-    <p className="ant-form-text">唧唧复唧唧木兰当户织呀</p>
-    <p className="ant-form-text">
-      <a href="javascript:;">链接文字</a>
-    </p>
-  </FormItem>
+        <Form.Item
+          label="我是标题："
+          labelClassName="col-8"
+          wrapperClassName="col-10"
+          required={true} >
+          <Form.Input type="static" id="static" name="static" onChange={this.setValue.bind(this, 'static')} value="唧唧复唧唧木兰当户织呀" />
+          <p className="ant-form-text">
+            <a href="javascript:;">链接文字</a>
+          </p>
+        </Form.Item>
 
-  <FormItem
-    label="Switch 开关："
-    labelClassName="col-8"
-    wrapperClassName="col-10"
-    required={true}>
-    <Switch />
-  </FormItem>
+        <Form.Item
+          label="Switch 开关："
+          labelClassName="col-8"
+          wrapperClassName="col-10"
+          required={true} >
+          <Switch name="switch" onChange={this.setValue.bind(this, 'switch')} value={formData.switch} />
+        </Form.Item>
 
-  <FormItem
-    label="Slider 滑动输入条："
-    labelClassName="col-8"
-    wrapperClassName="col-10"
-    required={true}>
-    <Slider marks={["A","B","C","D","E","F","G"]} />
-  </FormItem>
+        <Form.Item
+          label="Slider 滑动输入条："
+          labelClassName="col-8"
+          wrapperClassName="col-10"
+          required={true}>
+          <Slider marks={["A","B","C","D","E","F","G"]} name="slider" onChange={this.setValue.bind(this, 'slider')} />
+        </Form.Item>
 
-  <FormItem
-    label="Select 选择器："
-    labelClassName="col-8"
-    wrapperClassName="col-16"
-    required={true}>
-    <Select size="large" defaultValue="lucy" style={{width:200}} onChange={handleSelectChange}>
-      <Option value="jack">jack</Option>
-      <Option value="lucy">lucy</Option>
-      <Option value="disabled" disabled>disabled</Option>
-      <Option value="yiminghe">yiminghe</Option>
-    </Select>
-  </FormItem>
+        <Form.Item
+          label="Select 选择器："
+          labelClassName="col-8"
+          wrapperClassName="col-16"
+          required={true}>
+          <Select size="large" defaultValue="lucy" style={{width:200}} name="select" onChange={this.setValue.bind(this, 'select')} value={formData.select}>
+            <Option value="jack">jack</Option>
+            <Option value="lucy">lucy</Option>
+            <Option value="disabled" disabled>disabled</Option>
+            <Option value="yiminghe">yiminghe</Option>
+          </Select>
+        </Form.Item>
 
-  <FormItem
-    label="Datepicker 日期选择框："
-    labelClassName="col-8"
-    required={true}>
-    <div className="col-6">
-      <Datepicker />
-    </div>
-    <div className="col-1">
-      <p className="ant-form-split">-</p>
-    </div>
-    <div className="col-6">
-      <Datepicker />
-    </div>
-  </FormItem>
+        <Form.Item
+          label="Datepicker 日期选择框："
+          labelClassName="col-8"
+          required={true}>
+          <div className="col-6">
+            <Datepicker name="startDate" onChange={this.setValue.bind(this, 'startDate')} value={formData.startDate} />
+          </div>
+          <div className="col-1">
+            <p className="ant-form-split">-</p>
+          </div>
+          <div className="col-6">
+            <Datepicker name="endDate" onChange={this.setValue.bind(this, 'endDate')} value={formData.endDate} />
+          </div>
+        </Form.Item>
+        <div className="row">
+          <div className="col-16 col-offset-8">
+            <Button type="primary" htmlType="submit">确定</Button>
+          </div>
+        </div>
+      </Form>
+    );
+  }
+});
 
-  <FormItem
-    label="Datepicker 校验："
-    labelClassName="col-8"
-    validateStatus="error"
-    required={true}>
-    <div className="col-6">
-      <Datepicker />
-    </div>
-    <div className="col-1">
-      <p className="ant-form-split">-</p>
-    </div>
-    <div className="col-6">
-      <Datepicker />
-    </div>
-    <div className="col-19 col-offset-8">
-      <p className="ant-form-explain">请输入正确选项</p>
-    </div>
-  </FormItem>
-</Form>
-, document.getElementById('components-form-demo-mix'));
+ReactDOM.render(<Demo />, document.getElementById('components-form-demo-mix'));
 ````
diff --git a/components/form/demo/validate.md b/components/form/demo/validate.md
index 6f678b4f9b..43f423f0c4 100644
--- a/components/form/demo/validate.md
+++ b/components/form/demo/validate.md
@@ -2,79 +2,94 @@
 
 - order: 4
 
-我们为表单控件的校验状态定义了样式，共有三种校验状态类：
+我们为表单控件定义了三种校验状态，为 `<Form.Item>` 定义 `validateStatus` 属性即可。
 
-`.has-success` `.has-error` `.has-warning`, 分别代表校验成功、校验失败、有警告。
+validateStatus: ['success', 'warning', 'error', 'validating']。
 
-将以上三种校验状态类添加到这些控件的父级元素即可。
+另外为输入框添加反馈图标，设置 `<Form.Item>` 的 `hasFeedback` 属性值为 `true` 即可。 
 
-另外为输入框添加反馈图标，可以更好地反馈当前的校验状态，使用 `.has-feedback` 类包裹 input 输入框即可，在这里校验状态类就要和 `.has-feedback` 类同级。
-
-**注意**: 反馈图标只能使用在文本输入框 `<input class="ant-input">` 元素上。
+**注意**: 反馈图标只对 `<Form.Input>` 有效。
 
 ---
 
 ````jsx
 var Form = antd.Form;
-var Input = Form.Input;
-var FormItem = Form.Item;
-var InputGroup = Input.Group;
+var Datepicker = antd.Datepicker;
 
-React.render(
+ReactDOM.render(
 <Form horizontal>
-  <FormItem
+  <Form.Item
     label="失败校验："
     labelClassName="col-5"
     wrapperClassName="col-12"
     validateStatus="error"
     help="请输入数字和字母组合">
-    <Input type="text" value="无效选择" id="error" />
-  </FormItem>
+    <Form.Input type="text" value="无效选择" id="error" />
+  </Form.Item>
 
-  <FormItem
+  <Form.Item
     label="警告校验："
     labelClassName="col-5"
     wrapperClassName="col-12"
     validateStatus="warning">
-    <Input type="text" value="前方高能预警" id="warning" />
-  </FormItem>
-  <FormItem
+    <Form.Input type="text" value="前方高能预警" id="warning" />
+  </Form.Item>
+
+  <Form.Item
     label="校验中："
     labelClassName="col-5"
     wrapperClassName="col-12"
     hasFeedback={true}
     validateStatus="validating"
     help="信息审核中...">
-    <Input type="text" value="我是被校验的内容" id="validating" />
-  </FormItem>
+    <Form.Input type="text" value="我是被校验的内容" id="validating" />
+  </Form.Item>
 
-  <FormItem
+  <Form.Item
     label="成功校验："
     labelClassName="col-5"
     wrapperClassName="col-12"
     hasFeedback={true}
     validateStatus="success">
-    <Input type="text" value="我是正文" id="success" />
-  </FormItem>
+    <Form.Input type="text" value="我是正文" id="success" />
+  </Form.Item>
 
-  <FormItem
+  <Form.Item
+    label="警告校验："
+    labelClassName="col-5"
+    wrapperClassName="col-12"
+    hasFeedback={true}
+    validateStatus="warning">
+    <Form.Input type="text" value="前方高能预警" id="warning" />
+  </Form.Item>
+
+  <Form.Item
     label="失败校验："
     labelClassName="col-5"
     wrapperClassName="col-12"
     hasFeedback={true}
     validateStatus="error"
     help="请输入数字和字母组合">
-    <Input type="text" value="无效选择" id="error" />
-  </FormItem>
+    <Form.Input type="text" value="无效选择" id="error" />
+  </Form.Item>
 
-  <FormItem
-    label="警告校验："
+  <Form.Item
+    label="Datepicker 失败："
     labelClassName="col-5"
-    wrapperClassName="col-12"
-    hasFeedback={true}
-    validateStatus="warning">
-    <Input type="text" value="前方高能预警" id="warning" />
-  </FormItem>
+    validateStatus="error">
+    <div className="col-6">
+      <Datepicker />
+    </div>
+    <div className="col-1">
+      <p className="ant-form-split">-</p>
+    </div>
+    <div className="col-6">
+      <Datepicker />
+    </div>
+    <div className="col-19 col-offset-5">
+      <p className="ant-form-explain">请输入正确选项</p>
+    </div>
+  </Form.Item>
 </Form>
 , document.getElementById('components-form-demo-validate'));
 ````