update form display page

components/form/demo/input-size.md

@@ -10,14 +10,14 @@
 
 ````html
 
-<div class="row">
-  <div class="col-6">
+<div class="ant-inputs">
+  <div class="ant-inputs-item">
     <input class="ant-input ant-input-lg" type="text" id="largeInput" placeholder="大尺寸"/>
   </div>
-  <div class="col-6">
+  <div class="ant-inputs-item">
     <input class="ant-input" type="text" id="defaultInput" placeholder="默认尺寸"/>
   </div>
-  <div class="col-6">
+  <div class="ant-inputs-item">
     <input class="ant-input ant-input-sm" type="text" id="smallInput" placeholder="小尺寸"/>
   </div>
 </div>

components/form/demo/inputs.md

@@ -2,116 +2,90 @@
 
 - order: 5
 
-使用 `.ant-input-group` 类并结合 `.ant-input-group-addon` 类可以创建带标签的 Input 输入框。
 
----
-
-````jsx
+带标签的输入框：使用 `.ant-input-group` 类并结合 `.ant-input-group-addon` `.ant-input-group-btn` 类可以创建带标签、按钮的 Input 输入框。
 
-var Menu = antd.Menu;
-var Dropdown = antd.Dropdown;
+输入框组合：`.ant-inputs` 类由多个 `.ant-inputs-item` 组成，使多个 Input 可以在一行显示出来。
 
-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>;
+---
 
-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" />
+````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 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 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 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 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="ant-btn" type="button">GO!</button>
         </div>
       </div>
     </div>
   </div>
-  <div className="ant-form-item">
-    <label className="col-6" for="site5">带按钮的输入框：</label>
-    <div className="col-16">
-      <div className="ant-input-group">
-        <input type="text" className="ant-input" id="site5" placeholder="Search for..." />
-        <div className="ant-input-group-btn">
-          <button className="ant-btn" type="button">GO!</button>
+  <div class="ant-form-item">
+    <label class="col-6">输入身份证：</label>
+    <div class="col-16">
+      <div class="ant-inputs">
+        <div class="ant-inputs-item">
+          <input class="ant-input" type="text" id="certNo1" />
+        </div>
+        <div class="ant-inputs-item">
+          <input class="ant-input" type="text" id="certNo2" />
+        </div>
+        <div class="ant-inputs-item">
+          <input class="ant-input" type="text" id="certNo3" />
+        </div>
+        <div class="ant-inputs-item">
+          <input class="ant-input" type="text" id="certNo4" />
         </div>
       </div>
     </div>
   </div>
-  <div className="ant-form-item">
-    <label className="col-6">输入身份证：</label>
-    <div className="col-16">
-    <div className="row">
-      <div className="col-6">
-        <input className="ant-input" type="text" id="certNo1" />
-      </div>
-      <div className="col-6">
-        <input className="ant-input" type="text" id="certNo2" />
-      </div>
-      <div className="col-6">
-        <input className="ant-input" type="text" id="certNo3" />
-      </div>      
-      <div className="col-6">
-        <input className="ant-input" type="text" id="certNo4" />
-      </div>
-    </div>
-    </div>
-  </div>
-  <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 className="col-2">
-          <p className="ant-form-split">--</p>
+  <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>
-        <div className="col-6">
-          <input className="ant-input" type="text" id="tel2" />
+        <div class="col-2">
+          <p class="ant-form-split">--</p>
         </div>
-        <div className="col-6">
-          <input className="ant-input" type="text" id="tel3" />
-        </div>      
-        <div className="col-6">
-          <input className="ant-input" type="text" id="tel4" />
+        <div class="col-18">
+          <div class="ant-inputs">
+            <div class="ant-inputs-item">
+              <input class="ant-input" type="text" id="tel1" />
+            </div>
+            <div class="ant-inputs-item">
+              <input class="ant-input" type="text" id="tel2" />
+            </div>
+            <div class="ant-inputs-item">
+              <input class="ant-input" type="text" id="tel3" />
+            </div>
+          </div>
         </div>
-        <p className="ant-form-explain">请输入正确的电话号码</p>
+        <p class="ant-form-explain">请输入正确的电话号码</p>
       </div>
     </div>
   </div>
 </form> 
-, document.getElementById('components-form-demo-inputs'));
 ````

components/form/demo/mix.md

@@ -12,13 +12,26 @@ var Option = Select.Option;
 var InputNumber = antd.InputNumber;
 var Datepicker = antd.Datepicker;
 var Switch = antd.Switch;
+var Menu = antd.Menu;
+var Dropdown = antd.Dropdown;
 
+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>;
 
 function handleSelectChange(value) {
   console.log('selected ' + value);
 }
 
-function onChange(v){
+function onInputNumberChange(v){
   console.log('changed',v);
 }
 
@@ -27,7 +40,7 @@ React.render(
     <div className="ant-form-item">
       <label className="col-6" required>Input-Number:</label>
       <div className="col-6">
-        <InputNumber min={1} max={10} defaultValue={3} onChange={onChange} style={{width:100}}/>
+        <InputNumber min={1} max={10} defaultValue={3} onChange={onInputNumberChange} style={{width:100}}/>
       </div>
       <div className="col-3"><p className="ant-form-text"> 台机器</p></div>
     </div>
@@ -55,7 +68,7 @@ React.render(
       </div>
     </div>
     <div className="ant-form-item">
-      <label for="password" className="col-6" required>Select 选择器:</label>
+      <label for="" className="col-6" required>Select 选择器:</label>
       <div className="col-18">
         <Select value="lucy" style={{width:200}} onChange={handleSelectChange}>
           <Option value="jack">jack</Option>
@@ -65,6 +78,21 @@ 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>ant-radio:</label>
       <div className="col-10">