diff --git a/components/form/demo/horizontal-form.md b/components/form/demo/horizontal-form.md
deleted file mode 100644
index f9dd76a0b7..0000000000
--- a/components/form/demo/horizontal-form.md
+++ /dev/null
@@ -1,88 +0,0 @@
----
-order: 2
-title:
-  zh-CN: 典型表单
-  en-US: Horizontal form
----
-
-## zh-CN
-
-示例展示了如何通过使用 `Form.create` 来获取和更新表单提交的数值。
-
-## en-US
-
-How to use `Form.create` to get and update values of form.
-
-````jsx
-import { Form, Input, Button, Checkbox, Radio, Tooltip, Icon } from 'antd';
-const FormItem = Form.Item;
-const RadioGroup = Radio.Group;
-
-let Demo = React.createClass({
-  handleSubmit(e) {
-    e.preventDefault();
-    console.log('Received values of form:', this.props.form.getFieldsValue());
-  },
-
-  render() {
-    const { getFieldDecorator } = this.props.form;
-    const formItemLayout = {
-      labelCol: { span: 6 },
-      wrapperCol: { span: 14 },
-    };
-    return (
-      <Form horizontal onSubmit={this.handleSubmit}>
-        <FormItem
-          {...formItemLayout}
-          label="User name"
-        >
-          <p className="ant-form-text" id="userName" name="userName">Big eye minion</p>
-        </FormItem>
-        <FormItem
-          {...formItemLayout}
-          label="Password"
-        >
-          {getFieldDecorator('pass', { initialValue: '' })(
-            <Input type="password" placeholder="Please input the password" />
-          )}
-        </FormItem>
-        <FormItem
-          {...formItemLayout}
-          label="Gender"
-        >
-          {getFieldDecorator('gender', { initialValue: 'female' })(
-            <RadioGroup>
-              <Radio value="male">male</Radio>
-              <Radio value="female">female</Radio>
-            </RadioGroup>
-          )}
-        </FormItem>
-        <FormItem
-          {...formItemLayout}
-          label="remarks"
-          help="Please input something"
-        >
-          {getFieldDecorator('remark', { initialValue: '' })(
-            <Input type="textarea" placeholder="Please input something" />
-          )}
-        </FormItem>
-        <FormItem
-          {...formItemLayout}
-          label={<span>Sold myself <Tooltip title="I come for Qiu Xiang"><Icon type="question-circle-o" /></Tooltip></span>}
-        >
-          {getFieldDecorator('agreement', { initialValue: false, valuePropName: 'checked' })(
-            <Checkbox>agree</Checkbox>
-          )}
-        </FormItem>
-        <FormItem wrapperCol={{ span: 16, offset: 6 }} style={{ marginTop: 24 }}>
-          <Button type="primary" htmlType="submit">OK</Button>
-        </FormItem>
-      </Form>
-    );
-  },
-});
-
-Demo = Form.create()(Demo);
-
-ReactDOM.render(<Demo />, mountNode);
-````
diff --git a/components/form/demo/input-group.md b/components/form/demo/input-group.md
deleted file mode 100644
index 32f81bacfb..0000000000
--- a/components/form/demo/input-group.md
+++ /dev/null
@@ -1,105 +0,0 @@
----
-order: 4
-title:
-  zh-CN: 输入框组合
-  en-US: Input group
----
-
-## zh-CN
-
-各类输入框的组合展现。
-
-## en-US
-
-Input group of different type input controls.
-
-````jsx
-import { Form, Input, Select, Col } from 'antd';
-const FormItem = Form.Item;
-const InputGroup = Input.Group;
-const Option = Select.Option;
-
-const selectAfter = (
-  <Select defaultValue=".com" style={{ width: 70 }}>
-    <Option value=".com">.com</Option>
-    <Option value=".jp">.jp</Option>
-    <Option value=".cn">.cn</Option>
-    <Option value=".org">.org</Option>
-  </Select>
-);
-
-ReactDOM.render(
-  <Form horizontal>
-    <FormItem
-      label="Input control"
-      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 16 }}
-    >
-      <Input addonBefore="Http://" defaultValue="mysite.com" id="site1" />
-    </FormItem>
-
-    <FormItem
-      label="Input control"
-      labelCol={{ span: 6 }}
-      validateStatus="success"
-      wrapperCol={{ span: 16 }}
-    >
-      <Input addonBefore="Http://" addonAfter=".com" defaultValue="mysite" id="site2" />
-    </FormItem>
-
-    <FormItem
-      label="Select input control"
-      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 16 }}
-    >
-      <Input addonAfter={selectAfter} placeholder="www.mysite" id="site4" />
-    </FormItem>
-
-    <FormItem
-      label="Identity number"
-      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 16 }}
-    >
-      <InputGroup>
-        <Col span="6">
-          <Input id="certNo1" />
-        </Col>
-        <Col span="6">
-          <Input id="certNo2" />
-        </Col>
-        <Col span="6">
-          <Input id="certNo3" />
-        </Col>
-        <Col span="6">
-          <Input id="certNo4" />
-        </Col>
-      </InputGroup>
-    </FormItem>
-
-    <FormItem
-      label="Tel"
-      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 16 }}
-    >
-      <InputGroup>
-        <Col span="4">
-          <Input id="tel1" defaultValue="086" />
-        </Col>
-        <Col span="2">
-          <p className="ant-form-split">--</p>
-        </Col>
-        <Col span="6">
-          <Input id="tel1" />
-        </Col>
-        <Col span="6">
-          <Input id="tel2" />
-        </Col>
-        <Col span="6">
-          <Input id="tel3" />
-        </Col>
-      </InputGroup>
-    </FormItem>
-  </Form>
-
-, mountNode);
-````
diff --git a/components/form/demo/register.md b/components/form/demo/register.md
new file mode 100644
index 0000000000..c24ff317d4
--- /dev/null
+++ b/components/form/demo/register.md
@@ -0,0 +1,220 @@
+---
+order: 2
+title:
+  zh-CN: 注册新用户
+  en-US: Registration
+---
+
+## zh-CN
+
+用户填写必须的信息以注册新用户。
+
+## en-US
+
+Fill in this form to create a new account for you.
+
+````jsx
+import { Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button } from 'antd';
+const FormItem = Form.Item;
+const Option = Select.Option;
+
+const residences = [{
+  value: 'zhejiang',
+  label: 'Zhejiang',
+  children: [{
+    value: 'hangzhou',
+    label: 'Hangzhou',
+    children: [{
+      value: 'xihu',
+      label: 'West Lake',
+    }],
+  }],
+}, {
+  value: 'jiangsu',
+  label: 'Jiangsu',
+  children: [{
+    value: 'nanjing',
+    label: 'Nanjing',
+    children: [{
+      value: 'zhonghuamen',
+      label: 'Zhong Hua Men',
+    }],
+  }],
+}];
+
+const RegistrationForm = Form.create()(React.createClass({
+  getInitialState() {
+    return {
+      passwordDirty: false,
+    };
+  },
+  handleSubmit(e) {
+    e.preventDefault();
+
+    this.props.form.validateFields((err, values) => {
+      if (err) {
+        return;
+      }
+
+      console.log('Received values of form: ', values);
+    });
+  },
+  handlePasswordBlur(e) {
+    const value = e.target.value;
+    this.setState({ passwordDirty: this.state.passwordDirty || !!value });
+  },
+  checkPassowrd(rule, value, callback) {
+    const form = this.props.form;
+    if (value && value !== form.getFieldValue('password')) {
+      callback('Two passwords that you enter is inconsistent!');
+    } else {
+      callback();
+    }
+  },
+  checkConfirm(rule, value, callback) {
+    const form = this.props.form;
+    if (value && this.state.passwordDirty) {
+      form.validateFields(['confirm'], { force: true });
+    }
+
+    callback();
+  },
+  render() {
+    const { getFieldDecorator } = this.props.form;
+    const formItemLayout = {
+      labelCol: { span: 6 },
+      wrapperCol: { span: 14 },
+    };
+    const prefixSelector = getFieldDecorator('prefix', {
+      initialValue: '86',
+    })(
+      <Select className="icp-selector">
+        <Option value="86">+86</Option>
+      </Select>
+    );
+    return (
+      <Form horizontal onSubmit={this.handleSubmit}>
+        <FormItem
+          {...formItemLayout}
+          label="E-mail"
+        >
+          {getFieldDecorator('email', {
+            rules: [{
+              type: 'email', message: 'The input is not valid E-mail!',
+            }, {
+              required: true, message: 'Please input your E-mail!',
+            }],
+          })(
+            <Input />
+          )}
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label="Password"
+        >
+          {getFieldDecorator('password', {
+            rules: [{
+              required: true, message: 'Please input your password!',
+            }, {
+              validator: this.checkConfirm,
+            }],
+          })(
+            <Input type="password" onBlur={this.handlePasswordBlur} />
+          )}
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label="Confirm Password"
+        >
+          {getFieldDecorator('confirm', {
+            rules: [{
+              required: true, message: 'Please confirm your password!',
+            }, {
+              validator: this.checkPassowrd,
+            }],
+          })(
+            <Input type="password" />
+          )}
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label={(
+            <span>
+              Nickname&nbsp;
+              <Tooltip title="What do you want other to call you?">
+                <Icon type="question-circle-o" />
+              </Tooltip>
+            </span>
+          )}
+        >
+          {getFieldDecorator('nickname', {
+            rules: [{ required: true, message: 'Please input your nickname!' }],
+          })(
+            <Input />
+          )}
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label="Habitual Residence"
+        >
+          {getFieldDecorator('residence', {
+            initialValue: ['zhejiang', 'hangzhou', 'xihu'],
+            rules: [{ type: 'array', required: true, message: 'Please select your habitual residence!' }],
+          })(
+            <Cascader options={residences} />
+          )}
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label="Phone Number"
+        >
+          {getFieldDecorator('phone', {
+            rules: [{ required: true, message: 'Please input your phone number!' }],
+          })(
+            <Input addonBefore={prefixSelector} />
+          )}
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label="Captcha"
+        >
+          <Row gutter={8}>
+            <Col span={12}>
+              {getFieldDecorator('captcha', {
+                rules: [{ required: true, message: 'Please input the captcha you got!' }],
+              })(
+                <Input size="large" />
+              )}
+            </Col>
+            <Col span={12}>
+              <Button size="large">Get captcha</Button>
+            </Col>
+          </Row>
+        </FormItem>
+        <FormItem>
+          <Row>
+            <Col span={14} offset={6}>
+              <p>
+                {getFieldDecorator('agreement', {
+                  valuePropName: 'checked',
+                })(
+                  <Checkbox>I had read the <a>agreement</a></Checkbox>
+                )}
+              </p>
+              <Button type="primary" htmlType="submit">Register</Button>
+            </Col>
+          </Row>
+        </FormItem>
+      </Form>
+    );
+  },
+}));
+
+ReactDOM.render(<RegistrationForm />, mountNode);
+````
+
+````css
+#components-form-demo-register .icp-selector {
+  width: 60px;
+}
+````