From 0f8de0411fac0f4c76569213372c1ee03851c0f8 Mon Sep 17 00:00:00 2001
From: SimaQ <sima.zhang1990@gmail.com>
Date: Tue, 21 Jul 2015 14:55:22 +0800
Subject: [PATCH] update form demo page

---
 components/form/demo/disabled.md        |   2 +-
 components/form/demo/form-controls.md   |   2 +-
 components/form/demo/horizontal-form.md |   1 +
 components/form/demo/inputs.md          | 112 ++++++++++++++----------
 components/form/demo/mix.md             |  15 ----
 5 files changed, 69 insertions(+), 63 deletions(-)

diff --git a/components/form/demo/disabled.md b/components/form/demo/disabled.md
index 58d34df96f..50adec7677 100644
--- a/components/form/demo/disabled.md
+++ b/components/form/demo/disabled.md
@@ -1,6 +1,6 @@
 # 禁用状态
 
-- order: 3
+- order: 2
 
 1) 单独为输入框设置 `disabled` 属性；
 
diff --git a/components/form/demo/form-controls.md b/components/form/demo/form-controls.md
index af5180ff05..669f184654 100644
--- a/components/form/demo/form-controls.md
+++ b/components/form/demo/form-controls.md
@@ -1,6 +1,6 @@
 # 表单控件
 
-- order: 2
+- order: 3
 
 展示所有支持的表单控件。
 
diff --git a/components/form/demo/horizontal-form.md b/components/form/demo/horizontal-form.md
index 97a9674caa..afd6ab79a4 100644
--- a/components/form/demo/horizontal-form.md
+++ b/components/form/demo/horizontal-form.md
@@ -44,6 +44,7 @@ React.render(
     <label for="password" className="col-6" required>备注：</label>
     <div className="col-14">
       <textarea className="ant-input" placeholder="随便写"></textarea>
+      <p className="ant-form-explain">随便写点什么</p>
     </div>
   </div>
   <div className="ant-form-item ant-form-item-compact">
diff --git a/components/form/demo/inputs.md b/components/form/demo/inputs.md
index 0e52f181c6..01ea963afa 100644
--- a/components/form/demo/inputs.md
+++ b/components/form/demo/inputs.md
@@ -2,79 +2,99 @@
 
 - order: 5
 
-
-带标签的输入框：使用 `.ant-input-group` 类并结合 `.ant-input-group-addon` `.ant-input-group-btn` 类可以创建带标签、按钮的 Input 输入框。
+带标签的输入框：使用 `.ant-input-group` 类并结合 `.ant-input-group-addon` 类可以创建带标签的输入框。
 
 输入框组合：`.ant-inputs` 类由多个 `.ant-inputs-item` 组成，使多个 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" />
+````jsx
+var Select = antd.Select;
+var Option = Select.Option;
+
+React.render(
+<form className="ant-form-horizontal">
+  <div className="ant-form-item">
+    <label className="col-6" for="site1">标签输入框：</label>
+    <div className="col-16">
+      <div className="ant-input-group">
+        <span className="ant-input-group-addon" id="basic-addon1">Http://</span>
+        <input type="text" id="site1" className="ant-input" value="mysite.com" />
+      </div>
+    </div>
+  </div>
+  <div className="ant-form-item">
+    <label className="col-6" for="site3">标签输入框：</label>
+    <div className="col-16">
+      <div className="ant-input-group">
+        <span className="ant-input-group-addon" id="basic-addon3">Http://</span>
+        <input type="text" className="ant-input" id="site3" value="mysite" />
+        <span className="ant-input-group-addon" id="basic-addon4">.com</span>
       </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 className="ant-form-item">
+    <label className="col-6" for="site4">select 标签输入框：</label>
+    <div className="col-16">
+      <div className="ant-input-group">
+        <input type="text" className="ant-input" id="site4" placeholder="www.mysite" />
+        <div className="ant-input-group-wrap">
+          <Select value=".com" style={{width:65}}>
+            <Option value=".com">.com</Option>
+            <Option value=".jp">.jp</Option>
+            <Option value=".cn">.cn</Option>
+            <Option value=".org">.org</Option>
+          </Select>
+        </div>
       </div>
     </div>
   </div>
-  <div class="ant-form-item">
-    <label class="col-6">输入身份证：</label>
-    <div class="col-16">
-      <div class="ant-input-group">
-        <div class="col-6">
-          <input class="ant-input" type="text" id="certNo1" />
+  <div className="ant-form-item">
+    <label className="col-6">输入身份证：</label>
+    <div className="col-16">
+      <div className="ant-input-group">
+        <div className="col-6">
+          <input className="ant-input" type="text" id="certNo1" />
         </div>
-        <div class="col-6">
-          <input class="ant-input" type="text" id="certNo2" />
+        <div className="col-6">
+          <input className="ant-input" type="text" id="certNo2" />
         </div>
-        <div class="col-6">
-          <input class="ant-input" type="text" id="certNo3" />
+        <div className="col-6">
+          <input className="ant-input" type="text" id="certNo3" />
         </div>
-        <div class="col-6">
-          <input class="ant-input" type="text" id="certNo4" />
+        <div className="col-6">
+          <input className="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">
-          <input class="ant-input" type="text" id="tel1" value="086" />
+  <div className="ant-form-item has-error">
+    <label className="col-6">电话号码：</label>
+    <div className="col-16">
+      <div className="row">
+        <div className="col-4">
+          <input className="ant-input" type="text" id="tel1" value="086" />
         </div>
-        <div class="col-2">
-          <p class="ant-form-split">--</p>
+        <div className="col-2">
+          <p className="ant-form-split">--</p>
         </div>
-        <div class="col-18">
-          <div class="ant-input-group">
-            <div class="col-8">
-              <input class="ant-input" type="text" id="tel1" />
+        <div className="col-18">
+          <div className="ant-input-group">
+            <div className="col-8">
+              <input className="ant-input" type="text" id="tel1" />
             </div>
-            <div class="col-8">
-              <input class="ant-input" type="text" id="tel2" />
+            <div className="col-8">
+              <input className="ant-input" type="text" id="tel2" />
             </div>
-            <div class="col-8">
-              <input class="ant-input" type="text" id="tel3" />
+            <div className="col-8">
+              <input className="ant-input" type="text" id="tel3" />
             </div>
           </div>
         </div>
       </div>
-      <p class="ant-form-explain">请输入正确的电话号码</p>
+      <p className="ant-form-explain">请输入正确的电话号码</p>
     </div>
   </div>
 </form>
+, document.getElementById('components-form-demo-inputs'));
 ````
diff --git a/components/form/demo/mix.md b/components/form/demo/mix.md
index 2f4f25ed8c..82a683061c 100644
--- a/components/form/demo/mix.md
+++ b/components/form/demo/mix.md
@@ -79,21 +79,6 @@ React.render(
       </Select>
     </div>
   </div>
-  <div className="ant-form-item">
-    <label className="col-6" for="site4">按钮式下拉输入框:</label>
-    <div className="col-16">
-      <div className="ant-input-group">
-        <input type="text" className="ant-input" id="site4" placeholder="Search for..." />
-        <div className="ant-input-group-btn">
-          <Dropdown overlay={menu}>
-          <button className="ant-btn ant-btn-menu">
-          .com <i className="anticon anticon-down"></i>
-          </button>
-          </Dropdown>
-        </div>
-      </div>
-    </div>
-  </div>
   <div className="ant-form-item">
     <label for="" className="col-6" required>Datepicker:</label>
     <div className="col-6">
-- 
GitLab