From 2d9919d4c66bf4ed8efaaa13361291052e44cece Mon Sep 17 00:00:00 2001
From: simaQ <sima.zhang1990@gmail.com>
Date: Tue, 7 Jul 2015 11:25:16 +0800
Subject: [PATCH] add form display page

---
 components/form/demo/basic.md           |  25 ++--
 components/form/demo/disabled.md        |  21 +--
 components/form/demo/form-controls.md   | 181 +++++++++++++-----------
 components/form/demo/horizontal-form.md |  52 +++++--
 components/form/demo/inline-form.md     |  34 +++--
 components/form/demo/input-size.md      |  58 ++++++++
 components/form/demo/inputs.md          |  98 +++++++++++++
 components/form/demo/mix.md             | 108 ++++++++++++++
 components/form/demo/validate.md        |  80 ++++++++---
 components/form/index.md                |  20 ++-
 10 files changed, 530 insertions(+), 147 deletions(-)
 create mode 100644 components/form/demo/input-size.md
 create mode 100644 components/form/demo/inputs.md
 create mode 100644 components/form/demo/mix.md

diff --git a/components/form/demo/basic.md b/components/form/demo/basic.md
index ff26cea92..885688449 100644
--- a/components/form/demo/basic.md
+++ b/components/form/demo/basic.md
@@ -1,32 +1,31 @@
-# Basic from
+# 基本使用
 
-- order: 1 
+- order: 0
 
-表单基本实例
-
-表单一定会包含表单域，表单域包含了一个标签和一个输入控件，这里我们用类 `.ant-form-item` 表示。
-
-为了获得更好的排列，请将 label 元素和 `<input>`、`<textarea>`、`<select>` 控件包裹在 `.ant-form-item` 中。
+为了获得更好的排列，请将 `label` 标签和 `<input>`、`<textarea>`、`<select>` 控件包裹在 `.ant-form-item` 中。
 
 `注`：`.ant-input`  类为 `<input>`、`<textarea>`、`<select>` 元素默认设置了 `width: 100%`。
 
+为 `label` 标签添加 `required` 属性，表示该项必选。
+
 ---
 
 ````html
 <form>
   <div class="ant-form-item">
-    <label for="userName">Username</label>
-	  <input class="ant-input" type="text" id="userName" placeholder="Please enter userName"/>
+    <label for="userName" required>用户名：</label>
+	  <input class="ant-input" type="text" id="userName" placeholder="请输入"/>
   </div>
   <div class="ant-form-item">
-    <label for="password">Password</label>
-	  <input class="ant-input" type="text" id="password" placeholder="Please enter password"/>
+    <label for="password" required>密码：</label>
+	  <input class="ant-input" type="password" id="password" placeholder="请输入密码"/>
   </div>
   <div class="ant-checkbox">
     <label>
-      <input type="checkbox"> Remember me!
+      <input type="checkbox"> 保持登录
     </label>
   </div>
-  <input type="submit" class="ant-btn ant-btn-primary" value="Submit" />
+  <input type="submit" class="ant-btn ant-btn-primary" value="确定" />
+  <input type="submit" class="ant-btn" value="取消" />
 </form>
 ````
diff --git a/components/form/demo/disabled.md b/components/form/demo/disabled.md
index 181e25379..346526489 100644
--- a/components/form/demo/disabled.md
+++ b/components/form/demo/disabled.md
@@ -1,34 +1,35 @@
-# Disabled status
+# 禁用状态
 
-- order: 6
+- order: 4
 
-禁用状态
-  
-  1. 单独为输入框设置 disabled 属性
-  2. 为<fieldset> 设置 disabled 属性，可以禁用 <fieldset> 中包含的所有控件
+1) 单独为输入框设置 `disabled` 属性；
+
+2) 为 `<fieldset>` 设置 `disabled` 属性，可以禁用 `<fieldset>` 中包含的所有控件。
 
 ---
 
 ````html
 <h4>禁用的表单控件</h4>
-<input class="ant-input" type="text" placeholder="Disabled input here..." disabled>
+<input class="ant-input" type="text" value="我是禁用的" disabled>
+
+<br />
 
 <h4>禁用的fieldset</h4>
 <form>
   <fieldset disabled>
     <div class="ant-form-item">
-      <label for="disabledTextInput">Disabled input</label>
+      <label for="disabledTextInput">Input:</label>
       <input type="text" id="disabledTextInput" class="ant-input" placeholder="Disabled input">
     </div>
     <div class="ant-form-item">
-      <label for="disabledSelect">Disabled select</label>
+      <label for="disabledSelect">Select</label>
       <select id="disabledSelect" class="ant-input">
         <option>Disabled select</option>
       </select>
     </div>
     <div class="ant-checkbox">
       <label>
-        <input type="checkbox"> Disabled checkbox
+        <input type="checkbox"> checkbox
       </label>
     </div>
     <button type="submit" class="ant-btn ant-btn-primary">Submit</button>
diff --git a/components/form/demo/form-controls.md b/components/form/demo/form-controls.md
index dce111574..416ca97cc 100644
--- a/components/form/demo/form-controls.md
+++ b/components/form/demo/form-controls.md
@@ -1,8 +1,6 @@
-# Form controls
+# 表单控件
 
-- order: 4
-
-表单控件
+- order: 3
 
 展示所有支持的表单控件。
 
@@ -11,86 +9,99 @@
 ---
 
 ````html
-<h4>input 输入框</h4>
-<!-- text input -->
-<input type="text" class="ant-input" placeholder="Please enter...">
-<!-- password input -->
-<input type="password" class="ant-input" value="123456">
-
-<h4>textarea 文本域</h4>
-<textarea class="ant-input"></textarea>
-
-<h4>select 下拉列表</h4>
-<select class="ant-input">
-  <option>1</option>
-  <option>2</option>
-  <option>3</option>
-  <option>4</option>
-  <option>5</option>
-</select>
-
-<h4>checkbox 复选框</h4>
-<div class="ant-checkbox">
-  <label>
-    <input type="checkbox" value="">
-    Apple
-  </label>
-</div>
-<!-- disabled checkbox -->
-<div class="ant-checkbox disabled">
-  <label>
-    <input type="checkbox" value="" disabled>
-    Banana disabled
-  </label>
-</div>
-
-<!-- 内联的checkbox -->
-<label class="ant-checkbox-inline">
-  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
-</label>
-<label class="ant-checkbox-inline">
-  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
-</label>
-<label class="ant-checkbox-inline">
-  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
-</label>
-
-<h4>radio 单选框</h4>
-<div class="ant-radio">
-  <label>
-    <input type="radio" name="radios" id="optionsRadios1" value="option1" checked>
-    Apple
-  </label>
-</div>
-<div class="ant-radio">
-  <label>
-    <input type="radio" name="radios" id="optionsRadios2" value="option2">
-    Peach
-  </label>
-</div>
-<!-- disabled radio -->
-<div class="ant-radio disabled">
-  <label>
-    <input type="radio" name="radios" id="optionsRadios3" value="option3" disabled>
-    Banana
-  </label>
-</div>
-
-<!-- 内联的radio -->
-<label class="ant-radio-inline">
-  <input type="radio" name="inlineRadios" id="inlineRadio1" value="option1"> 1
-</label>
-<label class="ant-radio-inline">
-  <input type="radio" name="inlineRadios" id="inlineRadio2" value="option2"> 2
-</label>
-<label class="ant-radio-inline">
-  <input type="radio" name="inlineRadios" id="inlineRadio3" value="option3"> 3
-</label>
-
-<h4>文件输入框</h4>
-<div class="ant-form-item">
-    <label for="InputFile">File input</label>
-    <input type="file" id="InputFile">
-    <p class="ant-form-explain">Choose a file...</p>
+<form class="ant-form-horizontal">
+  <div class="ant-form-item">
+    <label class="col-6">输入框：</label>
+    <div class="col-18">
+      <input type="text" class="ant-input" placeholder="Please enter...">  
+    </div>
   </div>
+  <div class="ant-form-item">
+    <label class="col-6">文本域：</label>
+    <div class="col-18">
+      <textarea class="ant-input"></textarea>
+    </div>
+  </div>
+  <div class="ant-form-item">
+    <label class="col-6">下拉列表：</label>
+    <div class="col-18">
+      <select class="ant-input">
+        <option>选项一</option>
+        <option>选项二</option>
+        <option>选项三</option>
+        <option>选项四</option>
+        <option>选线五</option>
+      </select>
+    </div>
+  </div>
+  <div class="ant-form-item">
+    <label class="col-6">checkbox 复选框：</label>
+    <div class="col-18">
+      <div class="ant-checkbox">
+        <label>
+          <input type="checkbox" value="apple"> Apple
+        </label>
+      </div>
+      <!-- disabled checkbox -->
+      <div class="ant-checkbox disabled">
+        <label>
+          <input type="checkbox" value="banana" disabled> Banana(disabled)
+        </label>
+      </div>
+    </div>
+  </div>
+  <div class="ant-form-item">
+    <label class="col-6">内联的 checkbox：</label>
+    <div class="col-18">
+      <!-- 内联的checkbox -->
+      <label class="ant-checkbox-inline">
+        <input type="checkbox" id="inlineCheckbox1" value="Kevin"> Kevin
+      </label>
+      <label class="ant-checkbox-inline">
+        <input type="checkbox" id="inlineCheckbox2" value="Bob"> Bob
+      </label>
+      <label class="ant-checkbox-inline">
+        <input type="checkbox" id="inlineCheckbox3" value="Stuart"> Stuart
+      </label>
+    </div>
+  </div>
+  <div class="ant-form-item">
+    <label class="col-6">radio 单选框：</label>
+    <div class="col-18">
+      <div class="ant-radio">
+        <label>
+          <input type="radio" name="radios" id="optionsRadios1" value="option1" checked> Apple
+        </label>
+      </div>
+      <!-- disabled radio -->
+      <div class="ant-radio disabled">
+        <label>
+          <input type="radio" name="radios" id="optionsRadios3" value="option3" disabled> Banana(disabled)
+        </label>
+      </div>
+    </div>
+  </div>
+  <div class="ant-form-item">
+    <label class="col-6">内联的 radio：</label>
+    <div class="col-18">
+      <!-- 内联的radio -->
+      <label class="ant-radio-inline">
+        <input type="radio" name="inlineRadios" id="inlineRadio1" value="Kevin"> Kevin
+      </label>
+      <label class="ant-radio-inline">
+        <input type="radio" name="inlineRadios" id="inlineRadio2" value="Stuart"> Stuart
+      </label>
+      <label class="ant-radio-inline">
+        <input type="radio" name="inlineRadios" id="inlineRadio3" value="Bob"> Bob
+      </label>
+    </div>
+  </div>
+  <div class="ant-form-item">
+    <label class="col-6" for="InputFile">头像：</label>
+    <div class="col-18">
+      <input type="file" id="InputFile" class="ant-upload">
+      <p class="ant-form-explain">请选择一个文件</p>
+    </div>
+  </div>
+</form>
 ````
diff --git a/components/form/demo/horizontal-form.md b/components/form/demo/horizontal-form.md
index d71d56422..c808ff8fb 100644
--- a/components/form/demo/horizontal-form.md
+++ b/components/form/demo/horizontal-form.md
@@ -1,34 +1,62 @@
-# Horizontal form
+# 水平排列的表单
 
-- order: 2
-
-水平排列的表单
+- order: 1
 
 为 `<form>` 标签添加 `.ant-form-horizontal` 类(这让 `.ant-form-item` 表现为栅格系统中的 `row`)，并结合使用我们提供的 [栅格系统](http://ant.design/components/layout/)，可以实现 label 标签和表单控件的水平排列。
 
+如需将一行静态文本和 `<label>` 标签置于同一行，则只需为 `<p>` 标签添加 `.ant-form-text` 类即可。
+
+
 ---
 
 ````html
 <form class="ant-form-horizontal">
   <div class="ant-form-item">
-    <label for="userName" class="col-6">Username</label>
-    <div class="col-18">
-      <input class="ant-input" type="text" id="userName" placeholder="Please enter userName"/>
+    <label for="userName" class="col-6" required>用户名：</label>
+    <div class="col-4">
+      <p class="ant-form-text">大眼萌 minion</p>
+    </div>
+    <div class="col-9">
+      <p class="ant-form-text">
+        <a href="javascript:;">什么鬼？</a>
+      </p>
     </div>
   </div>
   <div class="ant-form-item">
-    <label for="password" class="col-6">Password</label>
+    <label for="password" class="col-6" required>密码：</label>
     <div class="col-18">
-      <input class="ant-input" type="text" id="password" placeholder="Please enter password"/>
+      <input class="ant-input" type="password" id="password" placeholder="请输入密码"/>
 	 </div>
   </div>
   <div class="ant-form-item">
-    <div class="ant-checkbox col-24">
+    <label  class="col-6" required>您的性别：</label>
+    <div class="col-18">
+      <label class="ant-radio-inline">
+        <input type="radio" name="radios" id="male-radio" value="male" checked> 男的
+      </label>
+      <label class="ant-radio-inline">
+        <input type="radio" name="radios" id="female-radio" value="female"> 女的
+      </label>
+    </div>
+  </div>  
+  <div class="ant-form-item">
+    <label for="password" class="col-6" required>备注：</label>
+    <div class="col-18">
+      <textarea class="ant-input" placeholder="随便写"></textarea>
+      <p class="ant-form-explain">随便写点什么吧</p>
+    </div>
+  </div>
+  <div class="ant-form-item">
+    <div class="ant-checkbox col-18 col-offset-6">
       <label>
-        <input type="checkbox"> Remember me!
+        <input type="checkbox"> 我是同意的
       </label>
     </div>
   </div>
-  <input type="submit" class="ant-btn ant-btn-primary" value="Submit" />
+  <div class="row">
+    <div class="col-16 col-offset-6">
+      <input type="submit" class="ant-btn ant-btn-primary" value="确定" />
+    </div>
+  </div>
 </form>
 ````
diff --git a/components/form/demo/inline-form.md b/components/form/demo/inline-form.md
index dc0494a7a..6aa32690a 100644
--- a/components/form/demo/inline-form.md
+++ b/components/form/demo/inline-form.md
@@ -1,8 +1,6 @@
-# Horizontal form
+# 行内排列的表单
 
-- order: 3
-
-内联的表单
+- order: 2
 
 在**视口宽度大于等于 768px **时，你可以为 `<form>` 标签添加 `.ant-form-inline` 类可使其表现为 inline-block 级别的控件。
 
@@ -11,13 +9,31 @@
 ````html
 <form class="ant-form-inline">
   <div class="ant-form-item">
-    <label for="userName">Username</label>
-    <input class="ant-input" type="text" id="userName" placeholder="Please enter userName"/>
+    <label for="userName">账户：</label>
+    <input class="ant-input" type="text" id="userName" placeholder="请输入"/>
   </div>
   <div class="ant-form-item">
-    <label for="password">Password</label>
-    <input class="ant-input" type="text" id="password" placeholder="Please enter password"/>
+    <label for="password">密码：</label>
+    <input class="ant-input" type="text" id="password" placeholder="请输入密码"/>
   </div>
-  <input type="submit" class="ant-btn ant-btn-primary" value="Submit" />
+  <input type="submit" class="ant-btn ant-btn-primary" value="登录" />
 </form>
+
+<br />
+
+<form class="ant-form-inline">
+  <div class="ant-form-item">
+    <input class="ant-input" type="text" id="userName" placeholder="请输入账户名"/>
+  </div>
+  <div class="ant-form-item">
+    <input class="ant-input" type="text" id="password" placeholder="请输入密码"/>
+  </div>
+  <div class="ant-checkbox">
+    <label>
+      <input type="checkbox"> 记住我
+    </label>
+  </div>
+  <input type="submit" class="ant-btn ant-btn-primary" value="登录" />
+</form>
+
 ````
diff --git a/components/form/demo/input-size.md b/components/form/demo/input-size.md
new file mode 100644
index 000000000..c17f48b9d
--- /dev/null
+++ b/components/form/demo/input-size.md
@@ -0,0 +1,58 @@
+# Input 尺寸
+
+- order: 7
+
+关于尺寸，我们为 `.ant-input` `.ant-input-group` 均提供了三种尺寸：大（-lg）、中(默认)、小（-sm），往类名后添加后缀即可。
+
+但是在 `<form>` 表单里面，我们只使用**大尺寸**作为唯一的尺寸。
+
+---
+
+````html
+<h4>input</h4>
+<!-- 大尺寸 -->
+<input class="ant-input ant-input-lg" type="text" id="userName" placeholder="大输入框"/>
+<br>
+<!-- 默认尺寸 -->
+<input class="ant-input" type="text" id="userName" placeholder="默认大小输入框"/>
+<br>
+<!-- 小尺寸 -->
+<input class="ant-input ant-input-sm" type="text" id="userName" placeholder="小输入框"/>
+
+<h4>input-group</h4>
+<!-- 大尺寸 -->
+<div class="ant-input-group ant-input-group-lg">
+  <input type="text" class="ant-input" placeholder="大输入框组合">
+  <div class="ant-input-group-btn">
+    <button class="input-btn" type="button">
+      <span>.com</span>
+      <i class="anticon anticon-caret-down"></i>
+    </button>
+  </div>
+</div>
+
+<br>
+<!-- 默认尺寸 -->
+<div class="ant-input-group">
+  <input type="text" class="ant-input" placeholder="Search for...">
+  <div class="ant-input-group-btn">
+    <button class="input-btn" type="button">
+      <span>.com</span>
+      <i class="anticon anticon-caret-down"></i>
+    </button>
+  </div>
+</div>
+
+<br>
+<!-- 小尺寸 -->
+<div class="ant-input-group ant-input-group-sm">
+  <input type="text" class="ant-input" placeholder="小输入框组合">
+  <div class="ant-input-group-btn">
+    <button class="input-btn" type="button">
+      <span>.com</span>
+      <i class="anticon anticon-caret-down"></i>
+    </button>
+  </div>
+</div>
+
+````
diff --git a/components/form/demo/inputs.md b/components/form/demo/inputs.md
new file mode 100644
index 000000000..7d2342805
--- /dev/null
+++ b/components/form/demo/inputs.md
@@ -0,0 +1,98 @@
+# Input 输入框集合
+
+- order: 6
+
+使用 `.ant-input-group` 类并结合 `.ant-input-group-addon` 类可以创建带标签的 Input 输入框。
+
+---
+
+````html
+<form class="ant-form-horizontal">
+  <div class="ant-form-item">
+    <label class="col-6" for="site1">标签输入框：</label>
+    <div class="col-16">
+      <div class="ant-input-group">
+        <span class="ant-input-group-addon" id="basic-addon1">Http://</span>
+        <input type="text" id="site1" class="ant-input" value="mysite.com">
+      </div>
+    </div>
+  </div>
+  <div class="ant-form-item">
+    <label class="col-6" for="site3">标签输入框：</label>
+    <div class="col-16">
+      <div class="ant-input-group">
+        <span class="ant-input-group-addon" id="basic-addon3">Http://</span>
+        <input type="text" class="ant-input" id="site3" value="mysite">
+        <span class="ant-input-group-addon" id="basic-addon4">.com</span>
+      </div>
+    </div>
+  </div>
+  <div class="ant-form-item">
+    <label class="col-6" for="site4">按钮式下拉输入框：</label>
+    <div class="col-16">
+      <div class="ant-input-group">
+        <input type="text" class="ant-input" id="site4" placeholder="Search for...">
+        <div class="ant-input-group-btn">
+          <button class="input-btn" type="button">
+            <span>.com</span>
+            <i class="anticon anticon-down"></i>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="ant-form-item">
+    <label class="col-6" for="site5">带按钮的输入框：</label>
+    <div class="col-16">
+      <div class="ant-input-group">
+        <input type="text" class="ant-input" id="site5" placeholder="Search for...">
+        <div class="ant-input-group-btn">
+          <button class="input-btn" type="button">GO!</button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="ant-form-item">
+    <label class="col-6">输入身份证：</label>
+    <div class="col-16">
+    <div class="row">
+      <div class="col-6 pdrg-8">
+        <input class="ant-input" type="text" id="certNo1" />
+      </div>
+      <div class="col-6 pdrg-8">
+        <input class="ant-input" type="text" id="certNo2" />
+      </div>
+      <div class="col-6 pdrg-8">
+        <input class="ant-input" type="text" id="certNo3" />
+      </div>      
+      <div class="col-6 pdrg-8">
+        <input class="ant-input" type="text" id="certNo4" />
+      </div>
+    </div>
+    </div>
+  </div>
+  <div class="ant-form-item has-error">
+    <label class="col-6">电话号码：</label>
+    <div class="col-16">
+      <div class="row">
+        <div class="col-4 pdrg-8">
+          <input class="ant-input" type="text" id="tel1" value="086" />
+        </div>
+        <div class="col-2 pdrg-8">
+          <p class="ant-form-split">--</p>
+        </div>
+        <div class="col-6 pdrg-8">
+          <input class="ant-input" type="text" id="tel2" />
+        </div>
+        <div class="col-6 pdrg-8">
+          <input class="ant-input" type="text" id="tel3" />
+        </div>      
+        <div class="col-6 pdrg-8">
+          <input class="ant-input" type="text" id="tel4" />
+        </div>
+        <p class="ant-form-explain">请输入正确的电话号码</p>
+      </div>
+    </div>
+  </div>
+</form>
+````
diff --git a/components/form/demo/mix.md b/components/form/demo/mix.md
new file mode 100644
index 000000000..1cb807742
--- /dev/null
+++ b/components/form/demo/mix.md
@@ -0,0 +1,108 @@
+# 表单组合
+
+- order: 8
+
+展示和表单相关的其他 ant-design 组件。
+
+---
+
+````jsx
+var Select = antd.Select;
+var Option = Select.Option;
+var InputNumber = antd.InputNumber;
+var Datepicker = antd.Datepicker;
+
+
+function handleSelectChange(value) {
+  console.log('selected ' + value);
+}
+
+function onChange(v){
+  console.log('changed',v);
+}
+
+React.render(
+  <form className="ant-form-horizontal">
+    <div className="ant-form-item">
+      <label className="col-6" required>Input-Number:</label>
+      <div className="col-6 pdrg-8">
+        <InputNumber min={1} max={10} defaultValue={3} onChange={onChange} style={{width:100}}/>
+      </div>
+      <div className="col-3"><p className="ant-form-text"> 台机器</p></div>
+    </div>
+    <div className="ant-form-item">
+      <label className="col-6" required><i className="anticon anticon-exclamation-circle"></i>我是标题:</label>
+      <div className="col-7 pdrg-8">
+        <p className="ant-form-text">唧唧复唧唧木兰当户织呀</p>
+      </div>
+      <div className="col-9">
+        <p className="ant-form-text">
+          <a href="javascript:;">链接文字</a>
+        </p>
+      </div>
+    </div>
+    <div className="ant-form-item">
+      <label for="" className="col-6" required>Switch 开关:</label>
+      <div className="col-10">
+        <p className="ant-form-text">请填写 switch</p>
+      </div>
+    </div>
+    <div className="ant-form-item">
+      <label for="" className="col-6" required>Slider 滑动输入条:</label>
+      <div className="col-10">
+        <p className="ant-form-text">请填写 slider</p>
+      </div>
+    </div>
+    <div className="ant-form-item">
+      <label for="password" className="col-6" required>Select 选择器:</label>
+      <div className="col-18">
+        <Select value="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>
+      </div>
+    </div>
+    <div className="ant-form-item">
+      <label for="" className="col-6" required>ant-radio:</label>
+      <div className="col-10">
+        <p className="ant-form-text">请填写 ant-design 的 radio</p>
+      </div>
+    </div>
+    <div className="ant-form-item">
+      <label for="" className="col-6" required>ant-checkbox:</label>
+      <div className="col-10">
+        <p className="ant-form-text">请填写 ant-design 的 checkbox</p>
+      </div>
+    </div>
+    <div className="ant-form-item">
+      <label for="" className="col-6" required>Datepicker:</label>
+      <div className="col-8">
+        <Datepicker value="" />
+      </div>
+      <div className="col-2">
+        <p className="ant-form-split">--</p>
+      </div>
+      <div className="col-8">
+        <Datepicker value="" />
+      </div>
+    </div>
+    <div className="ant-form-item has-error">
+      <label for="" className="col-6" required>Datepicker 校验:</label>
+      <div className="col-8">
+        <Datepicker value="" />
+      </div>
+      <div className="col-2">
+        <p className="ant-form-split">--</p>
+      </div>
+      <div className="col-8">
+        <Datepicker value="" />
+      </div>
+      <div className="col-19 col-offset-6">
+        <p className="ant-form-explain">请输入正确选项</p>
+      </div>
+    </div>
+  </form>
+, document.getElementById('components-form-demo-mix'));
+````
\ No newline at end of file
diff --git a/components/form/demo/validate.md b/components/form/demo/validate.md
index ff3ca4b6c..9e468ba04 100644
--- a/components/form/demo/validate.md
+++ b/components/form/demo/validate.md
@@ -1,35 +1,81 @@
-# Validate status
+# 校验提示
 
-- order: 7
+- order: 5
 
-校验状态
+我们为表单控件的校验状态定义了样式，共有三种校验状态类：
 
-提供三种校验状态类：`.has-success` `.has-error` `.has-warning`, 分别代表成功、失败、警告
+`.has-success` `.has-error` `.has-warning`, 分别代表校验成功、校验失败、有警告。
 
-为 `ant-form-item` 类添加以上三种校验状态类即可。
+将以上三种校验状态类添加到这些控件的父级元素即可。
+
+另外为输入框添加反馈图标，可以更好地反馈当前的校验状态，使用 `.has-feedback` 类包裹 input 输入框即可。
+
+**注意**: 反馈图标只能使用在文本输入框 `<input class="ant-input">` 元素上。
 
 ---
 
 ````html
-<h4>成功</h4>
+<h4>校验提示</h4>
+<br />
 <div class="ant-form-item has-success">
-  <label for="userName">Username</label>
-  <input class="ant-input" type="text" id="userName" value="ant"/>
-  <div class="ant-form-explain">
-    Yes, I know you are ant.
-  </div>
+  <label for="success">成功校验：</label>
+  <input class="ant-input" type="text" id="success" value="我是正文"/>
 </div>
 
-<h4>失败</h4>
 <div class="ant-form-item has-error">
-  <label for="userName">Username</label>
-  <input class="ant-input" type="text" id="userName" placeholder="有错误啦"/>
+  <label for="error">失败校验：</label>
+  <input class="ant-input" type="text" id="error" value="无效选择"/>
+  <div class="ant-form-explain">请输入数字和字母组合</div>
 </div>
 
-<h4>警告</h4>
 <div class="ant-form-item has-warning">
-  <label for="userName">Username</label>
-  <input class="ant-input" type="text" id="userName" placeholder="前方高能预警"/>
+  <label for="warning">警告校验：</label>
+  <input class="ant-input" type="text" id="warning" value="前方高能预警"/>
 </div>
 
+<h4>带图标的校验提示（水平排列的表单）</h4>
+<br />
+<form class="ant-form-horizontal">
+	<div class="ant-form-item">
+  	<label class="col-5" for="validating">校验中：</label>
+  	<div class="col-12">
+  		<div class="has-feedback">
+    		<input class="ant-input" type="text" id="validating" value="我是被校验的内容"/>
+    		<i class="anticon anticon-loading"></i>
+  		</div>
+  		<div class="ant-form-explain">信息审核中...</div>
+  	</div>
+	</div>
+
+	<div class="ant-form-item has-success">
+  	<label class="col-5" for="input1">成功校验：</label>
+  	<div class="col-12">
+  		<div class="has-feedback">
+    		<input class="ant-input" type="text" id="input1" value="我是正文"/>
+    		<i class="anticon anticon-check-circle"></i>
+  		</div>
+  	</div>
+	</div>
+
+	<div class="ant-form-item has-error">
+  	<label class="col-5" for="input2">失败校验：</label>
+  	<div class="col-12">
+  		<div class="has-feedback">
+    		<input class="ant-input" type="text" id="input2" value="无效选择"/>
+    		<i class="anticon anticon-cross-circle"></i>
+  		</div>
+  		<div class="ant-form-explain">请输入数字和字母组合</div>
+  	</div>
+	</div>
+
+	<div class="ant-form-item has-warning">
+  	<label class="col-5" for="input3">警告校验：</label>
+  	<div class="col-12">
+  		<div class="has-feedback">
+    		<input class="ant-input" type="text" id="input3" value="前方高能预警"/>
+    		<i class="anticon anticon-exclamation-circle"></i>
+  		</div>
+  	</div>
+	</div>
+</form>
 ````
diff --git a/components/form/index.md b/components/form/index.md
index 3d746c8d2..8ce364812 100644
--- a/components/form/index.md
+++ b/components/form/index.md
@@ -6,4 +6,22 @@
 
 ---
 
-表单是用来接受用户各种输入的控件（元素）。
+具有数据收集、校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素。
+
+
+### 表单
+
+除了默认的排列方式，我们还为 `form` 提供了以下两种排列方式：
+
+- 水平排列：`.ant-form-horizontal` 类可以实现 `label` 标签和表单控件的水平排列;
+- 行内排列：`.ant-form-inline` 类可使其表现为 inline-block 级别的控件。
+
+**注**: `.ant-form-inline` 类只适用于**视口宽度大于等于 768px **的情形。
+
+### 表单域
+
+表单一定会包含表单域，表单域可以是输入控件，标准表单域，标签，下拉菜单，文本域等。
+
+在这里，我们使用 `.ant-form-item` 类来表示表单域，它包含了一个标签和一个输入控件。
+
+为了获得更好的排列，请将 `label` 标签和 `<input>`、`<textarea>`、`<select>` 控件包裹在 `.ant-form-item` 中。