From 745b6d3be29f35e5afca512b3c9b7b7d429fe8d9 Mon Sep 17 00:00:00 2001
From: SimaQ <sima.zhang1990@gmail.com>
Date: Mon, 20 Jul 2015 20:35:48 +0800
Subject: [PATCH] form demo update: change radio checkbox select to ant-radio
 ant-checkbox ant-select

---
 components/form/demo/disabled.md        |  31 ++--
 components/form/demo/form-controls.md   | 132 ++++++++---------
 components/form/demo/horizontal-form.md |  66 +++++----
 components/form/demo/inline-form.md     |  37 ++---
 components/form/demo/input-size.md      |   1 -
 components/form/demo/inputs.md          |   2 +-
 components/form/demo/mix.md             | 188 +++++++++---------------
 style/components/form.less              |   1 +
 8 files changed, 198 insertions(+), 260 deletions(-)

diff --git a/components/form/demo/disabled.md b/components/form/demo/disabled.md
index fa300c3c57..58d34df96f 100644
--- a/components/form/demo/disabled.md
+++ b/components/form/demo/disabled.md
@@ -30,30 +30,21 @@
 ````html
 <form class="ant-form-horizontal">
   <fieldset disabled>
-    <div class="ant-form-item">
-      <label for="disabledTextInput" class="col-5">Input:</label>
-      <div class="col-12">
-        <input type="text" id="disabledTextInput" class="ant-input" placeholder="Disabled input">
-      </div>
-    </div>
-    <div class="ant-form-item">
-      <label for="disabledSelect" class="col-5">Select:</label>
-      <div class="col-12">
-        <select id="disabledSelect" class="ant-input">
-          <option>Disabled select</option>
-        </select>
-      </div>
-    </div>
     <div class="ant-form-item ant-form-item-compact">
-      <div class="col-14 col-offset-5">
-        <label class="ant-checkbo-inline">
-          <input type="checkbox"> checkbox
-        </label>
+      <label for="userName" class="col-5" required>用户名：</label>
+      <div class="col-12">
+        <p class="ant-form-text">大眼萌 minion</p>
+      </div>
+    </div>
+    <div class="ant-form-item">
+      <label for="password" class="col-5" required>密码：</label>
+      <div class="col-12">
+        <input class="ant-input" type="password" id="password" value="123456"/>
       </div>
     </div>
     <div class="row">
-      <div class="col-14 col-offset-5">
-        <input type="submit" class="ant-btn ant-btn-primary" value="确 定">
+      <div class="col-12 col-offset-5">
+        <input type="submit" class="ant-btn ant-btn-primary" value="确 定" />
       </div>
     </div>
   </fieldset>
diff --git a/components/form/demo/form-controls.md b/components/form/demo/form-controls.md
index e94b00f80c..999c40dfc4 100644
--- a/components/form/demo/form-controls.md
+++ b/components/form/demo/form-controls.md
@@ -8,92 +8,88 @@
 
 ---
 
-````html
-<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...">
+````jsx
+var Select = antd.Select;
+var Option = Select.Option;
+var Checkbox = antd.Checkbox;
+var Radio = antd.Radio;
+var RadioGroup = antd.RadioGroup;
+
+function handleSelectChange(value) {
+  console.log('selected ' + value);
+}
+
+React.render(
+<form className="ant-form-horizontal">
+  <div className="ant-form-item">
+    <label className="col-6">输入框：</label>
+    <div className="col-14">
+      <input type="text" className="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 className="ant-form-item">
+    <label className="col-6">文本域：</label>
+    <div className="col-14">
+      <textarea className="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 className="ant-form-item">
+    <label className="col-6">ant-select：</label>
+    <div className="col-14">
+      <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 class="ant-form-item ant-form-item-compact">
-    <label class="col-6">checkbox 复选框：</label>
-    <div class="col-18">
-      <label class="ant-checkbox-vertical">
-        <input type="checkbox" value="apple"> Apple
+  <div className="ant-form-item ant-form-item-compact">
+    <label className="col-6">ant-checkbox：</label>
+    <div className="col-18">
+      <label className="ant-checkbox-vertical">
+        <Checkbox /> 选项一
       </label>
-      <!-- disabled checkbox -->
-      <label class="ant-checkbox-vertical">
-        <input type="checkbox" value="banana" disabled> Banana(disabled)
+      <label className="ant-checkbox-vertical">
+        <Checkbox /> 选项二
+      </label>
+      <label className="ant-checkbox-vertical">
+        <Checkbox disabled={true} /> 选项三（不可选）
       </label>
     </div>
   </div>
-  <div class="ant-form-item ant-form-item-compact">
-    <label class="col-6">内联的 checkbox：</label>
-    <div class="col-18">
-      <!-- 内联的checkbox -->
-      <label class="ant-checkbox-inline">
-        <input type="checkbox" id="inlineCheckbox1" value="Kevin"> Kevin
+  <div className="ant-form-item ant-form-item-compact">
+    <label className="col-6">ant-checkbox：</label>
+    <div className="col-18">
+      <label className="ant-checkbox-inline">
+        <Checkbox />选项一
       </label>
-      <label class="ant-checkbox-inline">
-        <input type="checkbox" id="inlineCheckbox2" value="Bob"> Bob
+      <label className="ant-checkbox-inline">
+        <Checkbox />选项二
       </label>
-      <label class="ant-checkbox-inline">
-        <input type="checkbox" id="inlineCheckbox3" value="Stuart"> Stuart
+      <label className="ant-checkbox-inline">
+        <Checkbox />选项三
       </label>
     </div>
   </div>
-  <div class="ant-form-item ant-form-item-compact">
-    <label class="col-6">radio 单选框：</label>
-    <div class="col-18">
-      <label class="ant-radio-vertical">
-        <input type="radio" name="radios" id="optionsRadios1" value="option1" checked> Apple
-      </label>
-      <!-- disabled radio -->
-      <label class="ant-radio-vertical">
-        <input type="radio" name="radios" id="optionsRadios3" value="option3" disabled> Banana(disabled)
-      </label>
+  <div className="ant-form-item ant-form-item-compact">
+    <label className="col-6">ant-radio：</label>
+    <div className="col-18">
+      <RadioGroup>
+      <Radio value="a" checked={true}>A</Radio>
+      <Radio value="b" >B</Radio>
+      <Radio value="c" >C</Radio>
+      <Radio value="d" disabled={true}>D</Radio>
+      </RadioGroup>
     </div>
   </div>
-  <div class="ant-form-item ant-form-item-compact">
-    <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 ant-form-item-compact">
-    <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 className="ant-form-item ant-form-item-compact">
+    <label className="col-6" for="InputFile">头像：</label>
+    <div className="col-18">
+      <input type="file" id="InputFile" className="ant-upload" />
+      <p className="ant-form-explain">请选择一个文件</p>
     </div>
   </div>
 </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 1288880164..97a9674caa 100644
--- a/components/form/demo/horizontal-form.md
+++ b/components/form/demo/horizontal-form.md
@@ -12,48 +12,52 @@
 
 ---
 
-````html
-<form class="ant-form-horizontal">
-  <div class="ant-form-item ant-form-item-compact">
-    <label for="userName" class="col-6" required>用户名：</label>
-    <div class="col-6">
-      <p class="ant-form-text">大眼萌 minion</p>
+````jsx
+var Checkbox = antd.Checkbox;
+var Radio = antd.Radio;
+var RadioGroup = antd.RadioGroup;
+
+React.render(
+<form className="ant-form-horizontal">
+  <div className="ant-form-item ant-form-item-compact">
+    <label for="userName" className="col-6" required>用户名：</label>
+    <div className="col-6">
+      <p className="ant-form-text">大眼萌 minion</p>
     </div>
   </div>
-  <div class="ant-form-item">
-    <label for="password" class="col-6" required>密码：</label>
-    <div class="col-14">
-      <input class="ant-input" type="password" id="password" placeholder="请输入密码"/>
-	 </div>
-  </div>
-  <div class="ant-form-item ant-form-item-compact">
-    <label  class="col-6" required>您的性别：</label>
-    <div class="col-14">
-      <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 className="ant-form-item">
+    <label for="password" className="col-6" required>密码：</label>
+    <div className="col-14">
+      <input className="ant-input" type="password" id="password" placeholder="请输入密码"/>
     </div>
   </div>
-  <div class="ant-form-item">
-    <label for="password" class="col-6" required>备注：</label>
-    <div class="col-14">
-      <textarea class="ant-input" placeholder="随便写"></textarea>
+  <div className="ant-form-item ant-form-item-compact">
+    <label  className="col-6" required>您的性别：</label>
+    <div className="col-14">
+      <RadioGroup>
+        <Radio value="male" checked={true}>男的</Radio>
+        <Radio value="female">女的</Radio>
+      </RadioGroup>
     </div>
   </div>
-  <div class="ant-form-item ant-form-item-compact">
-    <div class="col-14 col-offset-6">
+  <div className="ant-form-item">
+    <label for="password" className="col-6" required>备注：</label>
+    <div className="col-14">
+      <textarea className="ant-input" placeholder="随便写"></textarea>
+    </div>
+  </div>
+  <div className="ant-form-item ant-form-item-compact">
+    <div className="col-14 col-offset-6">
       <label>
-        <input type="checkbox"> 我是同意的
+        <Checkbox /> 同意
       </label>
     </div>
   </div>
-  <div class="row">
-    <div class="col-16 col-offset-6">
-      <input type="submit" class="ant-btn ant-btn-primary" value="确 定" />
+  <div className="row">
+    <div className="col-16 col-offset-6">
+      <input type="submit" className="ant-btn ant-btn-primary" value="确 定" />
     </div>
   </div>
 </form>
+, document.getElementById('components-form-demo-horizontal-form'));
 ````
diff --git a/components/form/demo/inline-form.md b/components/form/demo/inline-form.md
index 2c6456edd1..f9c8c01cd9 100644
--- a/components/form/demo/inline-form.md
+++ b/components/form/demo/inline-form.md
@@ -6,34 +6,25 @@
 
 ---
 
-````html
-<form class="ant-form-inline">
-  <div class="ant-form-item">
+````jsx
+var Checkbox = antd.Checkbox;
+
+React.render(
+<form className="ant-form-inline">
+  <div className="ant-form-item">
     <label for="userName">账户：</label>
-    <input class="ant-input" type="text" id="userName" placeholder="请输入"/>
+    <input className="ant-input" type="text" id="userName" placeholder="请输入账户名" />
   </div>
-  <div class="ant-form-item">
+  <div className="ant-form-item">
     <label for="password">密码：</label>
-    <input class="ant-input" type="password" id="password" placeholder="请输入密码"/>
+    <input className="ant-input" type="password" id="password" placeholder="请输入密码" />
   </div>
-  <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="password" id="password" placeholder="请输入密码"/>
-  </div>
-  <div class="ant-checkbox-inline">
-    <label>
-      <input type="checkbox"> 记住我
+  <div className="ant-checkbox-inline">
+    <label className="ant-checkbox-inline">
+      <Checkbox /> 记住我
     </label>
   </div>
-  <input type="submit" class="ant-btn ant-btn-primary" value="登 录" />
+  <input type="submit" className="ant-btn ant-btn-primary" value="登 录" />
 </form>
-
+, document.getElementById('components-form-demo-inline-form'));
 ````
diff --git a/components/form/demo/input-size.md b/components/form/demo/input-size.md
index d3e52f2a22..ad019ddf60 100644
--- a/components/form/demo/input-size.md
+++ b/components/form/demo/input-size.md
@@ -22,5 +22,4 @@
     </div>
   </div>
 </div>
-
 ````
diff --git a/components/form/demo/inputs.md b/components/form/demo/inputs.md
index 261e99f556..0e52f181c6 100644
--- a/components/form/demo/inputs.md
+++ b/components/form/demo/inputs.md
@@ -76,5 +76,5 @@
       <p class="ant-form-explain">请输入正确的电话号码</p>
     </div>
   </div>
-</form> 
+</form>
 ````
diff --git a/components/form/demo/mix.md b/components/form/demo/mix.md
index 737c4ec54f..2f4f25ed8c 100644
--- a/components/form/demo/mix.md
+++ b/components/form/demo/mix.md
@@ -15,9 +15,6 @@ var Switch = antd.Switch;
 var Menu = antd.Menu;
 var Dropdown = antd.Dropdown;
 var Slider = antd.Slider;
-var Checkbox = antd.Checkbox;
-var Radio = antd.Radio;
-var RadioGroup = antd.RadioGroup;
 
 var menu = <Menu>
   <Menu.Item>
@@ -40,131 +37,90 @@ function onInputNumberChange(v){
 }
 
 React.render(
-  <form className="ant-form-horizontal">
-    <div className="ant-form-item">
-      <label className="col-6" required>Input-Number:</label>
-      <div className="col-10">
-        <InputNumber min={1} max={10} defaultValue={3} onChange={onInputNumberChange} style={{width:100}}/>
-        <span className="ant-form-text"> 台机器</span>
-      </div>
+<form className="ant-form-horizontal">
+  <div className="ant-form-item">
+    <label className="col-6" required>Input-Number:</label>
+    <div className="col-10">
+      <InputNumber min={1} max={10} defaultValue={3} onChange={onInputNumberChange} style={{width:100}}/>
+      <span className="ant-form-text"> 台机器</span>
     </div>
-    <div className="ant-form-item ant-form-item-compact">
-      <label className="col-6" required>
-        <i className="anticon anticon-exclamation-circle" style={{color: '#f60'}}></i> 我是标题:
-      </label>
-      <div className="col-7">
-        <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 ant-form-item-compact">
+    <label className="col-6" required>
+      <i className="anticon anticon-exclamation-circle" style={{color: '#f60'}}></i> 我是标题:
+    </label>
+    <div className="col-10">
+      <p className="ant-form-text">唧唧复唧唧木兰当户织呀</p>
+      <p className="ant-form-text">
+        <a href="javascript:;">链接文字</a>
+      </p>
     </div>
-    <div className="ant-form-item">
-      <label for="" className="col-6" required>Switch 开关:</label>
-      <div className="col-10">
-        <Switch />
-      </div>
+  </div>
+  <div className="ant-form-item">
+    <label for="" className="col-6" required>Switch 开关:</label>
+    <div className="col-10">
+      <Switch />
     </div>
-    <div className="ant-form-item">
-      <label for="" className="col-6" required>Slider 滑动输入条:</label>
-      <div className="col-10">
-        <Slider marks={["A","B","C","D","E","F","G"]} />
-      </div>
+  </div>
+  <div className="ant-form-item">
+    <label for="" className="col-6" required>Slider 滑动输入条:</label>
+    <div className="col-10">
+      <Slider marks={["A","B","C","D","E","F","G"]} />
     </div>
-    <div className="ant-form-item">
-      <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>
-          <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>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 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 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 className="ant-form-item ant-form-item-compact">
-      <label for="" className="col-6" required>ant-radio:</label>
-      <div className="col-16">
-        <RadioGroup>
-          <Radio value="a" checked={true}>选项一</Radio>
-          <Radio value="b">选项二</Radio>
-          <Radio value="c">选项三</Radio>
-          <Radio value="d">选项四</Radio>
-        </RadioGroup>
-      </div>
+  </div>
+  <div className="ant-form-item">
+    <label for="" className="col-6" required>Datepicker:</label>
+    <div className="col-6">
+      <Datepicker value="" />
     </div>
-    <div className="ant-form-item ant-form-item-compact">
-      <label for="" className="col-6" required>ant-checkbox:</label>
-      <div className="col-16">
-        <label className="ant-checkbox-inline">
-          <Checkbox />选项一
-        </label>
-        <label className="ant-checkbox-inline">
-          <Checkbox />选项二
-        </label>
-        <label className="ant-checkbox-inline">
-          <Checkbox />选项三
-        </label>
-      </div>
+    <div className="col-2">
+      <p className="ant-form-split">--</p>
     </div>
-    <div className="ant-form-item ant-form-item-compact">
-      <label for="" className="col-6" required>垂直的 ant-checkbox:</label>
-      <div className="col-16">
-         <label className="ant-checkbox-vertical">
-          <Checkbox /> 选项一
-        </label>
-         <label className="ant-checkbox-vertical">
-          <Checkbox /> 选项二
-        </label>
-         <label className="ant-checkbox-vertical">
-          <Checkbox /> 选项三
-        </label>
-      </div>
+    <div className="col-6">
+      <Datepicker value="" />
     </div>
-    <div className="ant-form-item">
-      <label for="" className="col-6" required>Datepicker:</label>
-      <div className="col-6">
-        <Datepicker value="" />
-      </div>
-      <div className="col-2">
-        <p className="ant-form-split">--</p>
-      </div>
-      <div className="col-6">
-        <Datepicker value="" />
-      </div>
+  </div>
+  <div className="ant-form-item has-error">
+    <label for="" className="col-6" required>Datepicker 校验:</label>
+    <div className="col-6">
+      <Datepicker value="" />
     </div>
-    <div className="ant-form-item has-error">
-      <label for="" className="col-6" required>Datepicker 校验:</label>
-      <div className="col-6">
-        <Datepicker value="" />
-      </div>
-      <div className="col-2">
-        <p className="ant-form-split">--</p>
-      </div>
-      <div className="col-6">
-        <Datepicker value="" />
-      </div>
-      <div className="col-19 col-offset-6">
-        <p className="ant-form-explain">请输入正确选项</p>
-      </div>
+    <div className="col-2">
+      <p className="ant-form-split">--</p>
     </div>
-  </form>
+    <div className="col-6">
+      <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'));
 ````
diff --git a/style/components/form.less b/style/components/form.less
index d4551b161a..eb5fb85333 100644
--- a/style/components/form.less
+++ b/style/components/form.less
@@ -92,6 +92,7 @@ input[type="checkbox"] {
 
 .@{css-prefix}form-text {
   display: inline-block;
+  padding-right: 8px;
 }
 
 .@{css-prefix}form-split {