add form page

10 years ago · c4cd3ce495
15 changed files with 629 additions and 5 deletions
--- a/components/form/demo/basic.md
+++ b/components/form/demo/basic.md
@ -0,0 +1,30 @@
+# Basic from
+
+- order: 1 
+
+表单基本实例
+
+`.ant-input`  类为 `<input>`、`<textarea>`、`<select>` 元素默认设置了 `width: 100%`。
+
+为了获得更好的排列，请将 label 元素和 `<input>`、`<textarea>`、`<select>` 控件包裹在 `.ant-form-item` 中。
+
+---
+
+````html
+<form>
+  <div class="ant-form-item">
+    <label for="userName">Username</label>
+	  <input class="ant-input" type="text" id="userName" placeholder="Please enter userName"/>
+  </div>
+  <div class="ant-form-item">
+    <label for="password">Password</label>
+	  <input class="ant-input" type="text" id="password" placeholder="Please enter password"/>
+  </div>
+  <div class="ant-checkbox">
+    <label>
+      <input type="checkbox"> Remember me!
+    </label>
+  </div>
+  <input type="submit" class="ant-btn ant-btn-primary" value="Submit" />
+</form>
+````
--- a/components/form/demo/disabled.md
+++ b/components/form/demo/disabled.md
@ -0,0 +1,38 @@
+# Disabled status
+
+- order: 6
+
+禁用状态
+  
+  1. 单独为输入框设置 disabled 属性
+  2. 为<fieldset> 设置 disabled 属性，可以禁用 <fieldset> 中包含的所有控件
+
+---
+
+````html
+<h4>禁用的表单控件</h4>
+<input class="ant-input" type="text" placeholder="Disabled input here..." disabled>
+
+<h4>禁用的fieldset</h4>
+<form>
+  <fieldset disabled>
+    <div class="ant-form-item">
+      <label for="disabledTextInput">Disabled 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>
+      <select id="disabledSelect" class="ant-input">
+        <option>Disabled select</option>
+      </select>
+    </div>
+    <div class="ant-checkbox">
+      <label>
+        <input type="checkbox"> Disabled checkbox
+      </label>
+    </div>
+    <button type="submit" class="ant-btn ant-btn-primary">Submit</button>
+  </fieldset>
+</form>
+
+````
--- a/components/form/demo/explain-text.md
+++ b/components/form/demo/explain-text.md
@ -0,0 +1,19 @@
+# Form explain 
+
+- order: 11
+
+表单辅助文本
+
+针对表单控件的块级辅助文本。
+
+---
+
+````html
+<form>
+  <div class="ant-form-item">
+    <label for="userName">Username</label>
+	  <input class="ant-input" type="text" id="userName" placeholder="Please enter userName"/>
+    <div class="ant-form-explain">这里是提示信息。</div>
+  </div>
+</form>
+````
--- a/components/form/demo/feedback-input.md
+++ b/components/form/demo/feedback-input.md
@ -0,0 +1,51 @@
+# Feedback input
+
+- order: 8
+
+带反馈图标的输入框
+
+为输入框添加反馈图标，可以更好地反馈当前的状态。只需用 `.has-feedback` 类包裹 input 输入框即可。
+
+另外可为 `label` 标签添加 `required` 属性，表示该项必选。
+
+> 注意: 反馈图标只能使用在文本输入框 `<input class="ant-input">` 元素上哦~
+
+---
+
+````html
+<!-- 校验失败 -->
+<div class="ant-form-item has-error">
+  <label for="userName">Username</label>
+  <div class="has-feedback">
+    <input class="ant-input" type="text" id="userName" placeholder="有错误啦"/>
+    <i class="anticon anticon-cross-round"></i>
+  </div>
+</div>
+
+<!-- 警告状态 -->
+<div class="ant-form-item has-warning">
+  <label for="userName" ant-input-group>Username</label>
+  <div class="has-feedback">
+    <input class="ant-input" type="text" id="userName" placeholder="前方高能预警"/>
+    <i class="anticon anticon-exclamation-round"></i>
+  </div>
+  <div class="ant-form-explain">该项必选</div>
+</div>
+
+<!-- 校验成功 -->
+<div class="ant-form-item has-success">
+  <label for="userName">Username</label>
+  <div class="has-feedback">
+    <input class="ant-input" type="text" id="userName" placeholder="请输入"/>
+    <i class="anticon anticon-check-round"></i>
+  </div>
+</div>
+
+<div class="ant-form-item">
+  <label for="userName">Username</label>
+  <div class="has-feedback">
+    <input class="ant-input" type="text" id="userName" placeholder="努力加载中..."/>
+    <i class="anticon anticon-loading"></i>
+  </div>
+</div>
+````
--- a/components/form/demo/form-controls.md
+++ b/components/form/demo/form-controls.md
@ -0,0 +1,87 @@
+# Form controls
+
+- order: 4
+
+表单控件
+
+展示所有支持的表单控件。
+
+1. 输入框：只有正确设置了 type 属性的输入控件才能被赋予正确的样式。
+
+---
+
+````html
+<h4>input 输入框</h4>
+<input type="text" class="ant-input" placeholder="Please enter...">
+<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>
+````
--- a/components/form/demo/horizontal-form.md
+++ b/components/form/demo/horizontal-form.md
@ -0,0 +1,34 @@
+# Horizontal form
+
+- order: 2
+
+水平排列的表单
+
+为 `<form>` 标签添加 `.ant-form-horizontal` 类(这让 `.ant-form-item` 表现为栅格系统中的 row)，并结合使用我们提供的 [栅格系统](http://ant.design/components/layout/)，可以实现 label 标签和表单控件的水平并排排列。
+
+---
+
+````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"/>
+    </div>
+  </div>
+  <div class="ant-form-item">
+    <label for="password" class="col-6">Password</label>
+    <div class="col-18">
+      <input class="ant-input" type="text" id="password" placeholder="Please enter password"/>
+	 </div>
+  </div>
+  <div class="ant-form-item">
+    <div class="ant-checkbox col-24">
+      <label>
+        <input type="checkbox"> Remember me!
+      </label>
+    </div>
+  </div>
+  <input type="submit" class="ant-btn ant-btn-primary" value="Submit" />
+</form>
+````
--- a/components/form/demo/inline-form.md
+++ b/components/form/demo/inline-form.md
@ -0,0 +1,23 @@
+# Horizontal form
+
+- order: 3
+
+内联的表单
+
+在**视口宽度大于等于 768px **时，你可以为 `<form>` 标签添加 `.ant-form-inline` 类可使其表现为 inline-block 级别的控件。
+
+---
+
+````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"/>
+  </div>
+  <div class="ant-form-item">
+    <label for="password">Password</label>
+    <input class="ant-input" type="text" id="password" placeholder="Please enter password"/>
+  </div>
+  <input type="submit" class="ant-btn ant-btn-primary" value="Submit" />
+</form>
+````
--- a/components/form/demo/input-group.md
+++ b/components/form/demo/input-group.md
@ -0,0 +1,60 @@
+# Input group
+
+- order: 9
+
+输入框组合
+
+
+
+---
+
+````html
+<h4>带标签的输入框</h4>
+<div class="ant-input-group">
+  <span class="ant-input-group-addon" id="basic-addon1">Http://</span>
+  <input type="text" class="ant-input" placeholder="Username">
+</div>
+<br>
+<div class="ant-input-group">
+  <input type="text" class="ant-input" placeholder="Username">
+  <span class="ant-input-group-addon" id="basic-addon1">.com</span>
+</div>
+<br>
+<div class="ant-input-group">
+  <span class="ant-input-group-addon" id="basic-addon1">Http://</span>
+  <input type="text" class="ant-input" placeholder="Username">
+  <span class="ant-input-group-addon" id="basic-addon1">.com</span>
+</div>
+
+<h4>作为额外元素的按钮式下拉菜单</h4>
+<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-down"></i>
+    </button>
+  </div>
+</div>
+
+<h4>带按钮的菜单</h4>
+<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">Go!</button>
+  </div>
+</div>
+
+<h4>微调输入框</h4>
+<div class="ant-input-group">
+  <input type="text" class="ant-input" placeholder="请输入数字">
+  <div class="ant-input-group-btn-vertical">
+    <button class="input-btn" type="button">  
+      <i class="anticon anticon-up"></i>
+    </button>
+    <button class="input-btn" type="button">  
+      <i class="anticon anticon-down"></i>
+    </button>
+  </div>
+</div>
+````
--- a/components/form/demo/sizing.md
+++ b/components/form/demo/sizing.md
@ -0,0 +1,61 @@
+# Sizing options
+
+- order: 10
+
+关于尺寸，我们提供大、中、小三种尺寸，默认为中尺寸。
+
+待续...
+
+---
+
+````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="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">
+  <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="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>
+
+<h4>form-item</h4>
+故事未完待续...
+
+````
--- a/components/form/demo/static-control.md
+++ b/components/form/demo/static-control.md
@ -0,0 +1,27 @@
+# Static control
+
+- order: 5
+
+静态文本表单控件：将一行静态文本和 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">
+      <p class="ant-form-text">Ant</p>
+    </div>
+  </div>
+  <div class="ant-form-item">
+    <label for="password" class="col-6">Password</label>
+    <div class="col-18">
+      <input class="ant-input" type="text" id="password" placeholder="Please enter password"/>
+   </div>
+  </div>
+  <input type="submit" class="ant-btn ant-btn-primary" value="Submit" />
+</form>
+````
--- a/components/form/demo/validate.md
+++ b/components/form/demo/validate.md
@ -0,0 +1,35 @@
+# Validate status
+
+- order: 7
+
+校验状态
+
+提供三种校验状态类：`.has-success` `.has-error` `.has-warning`, 分别代表成功、失败、警告
+
+为 `ant-form-item` 类添加以上三种校验状态类即可。
+
+---
+
+````html
+<h4>成功</h4>
+<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>
+</div>
+
+<h4>失败</h4>
+<div class="ant-form-item has-error">
+  <label for="userName">Username</label>
+  <input class="ant-input" type="text" id="userName" placeholder="有错误啦"/>
+</div>
+
+<h4>警告</h4>
+<div class="ant-form-item has-warning">
+  <label for="userName">Username</label>
+  <input class="ant-input" type="text" id="userName" placeholder="前方高能预警"/>
+</div>
+
+````
--- a/components/form/index.md
+++ b/components/form/index.md
@ -0,0 +1,11 @@
+# Form
+
+- category: CSS
+- chinese: 表单
+- order: 3
+
+---
+
+## 如何使用
+
+孵化中，待完善......
--- a/style/components/form.less
+++ b/style/components/form.less
@ -19,7 +19,25 @@ label[required]:before {
 }

 // Input styles
-//== Basic
+// Shared size and type resets for form controls. Apply `.form-control` to any
+// of the following form controls:
+//
+// select
+// textarea
+// input[type="text"]
+// input[type="password"]
+// input[type="datetime"]
+// input[type="datetime-local"]
+// input[type="date"]
+// input[type="month"]
+// input[type="time"]
+// input[type="week"]
+// input[type="number"]
+// input[type="email"]
+// input[type="url"]
+// input[type="search"]
+// input[type="tel"]
+// input[type="color"]
 .@{css-prefix}input {
  .input;
 }
@ -35,12 +53,106 @@ label[required]:before {
  .input-group(~"@{css-prefix}input");
 }

+// Other form controls
+// Radio & Checkbox
+.@{css-prefix}radio,
+.@{css-prefix}checkbox {
+  position: relative;
+  display: block;
+  margin-top: 10px;
+  margin-bottom: 10px;
+
+  label {
+    min-height: @line-height-computed;
+    padding-left: 20px;
+    margin-bottom: 0;
+    font-weight: normal;
+    cursor: pointer;
+  }
+}
+.@{css-prefix}radio input[type="radio"],
+.@{css-prefix}radio-inline input[type="radio"],
+.@{css-prefix}checkbox input[type="checkbox"],
+.@{css-prefix}checkbox-inline input[type="checkbox"] {
+  position: absolute;
+  margin-left: -20px;
+  margin-top: 4px \9;
+}
+
+.@{css-prefix}radio + .@{css-prefix}radio,
+.@{css-prefix}checkbox + .@{css-prefix}checkbox {
+  margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing
+}
+
+// Radios and checkboxes on same line
+.@{css-prefix}radio-inline,
+.@{css-prefix}checkbox-inline {
+  position: relative;
+  display: inline-block;
+  padding-left: 20px;
+  margin-bottom: 0;
+  vertical-align: middle;
+  font-weight: normal;
+  cursor: pointer;
+}
+.@{css-prefix}radio-inline + .@{css-prefix}radio-inline,
+.@{css-prefix}checkbox-inline + .@{css-prefix}checkbox-inline {
+  margin-top: 0;
+  margin-left: 10px; // space out consecutive inline controls
+}
+
+// Apply same disabled cursor tweak as for inputs
+// Some special care is needed because <label>s don't inherit their parent's `cursor`.
+//
+// Note: Neither radios nor checkboxes can be readonly.
+input[type="radio"],
+input[type="checkbox"] {
+  &[disabled],
+  &.disabled,
+  fieldset[disabled] & {
+    cursor: @cursor-disabled;
+  }
+}
+// These classes are used directly on <label>s
+.@{css-prefix}radio-inline,
+.@{css-prefix}checkbox-inline {
+  &.disabled,
+  fieldset[disabled] & {
+    cursor: @cursor-disabled;
+  }
+}
+// These classes are used on elements with <label> descendants
+.@{css-prefix}radio,
+.@{css-prefix}checkbox {
+  &.disabled,
+  fieldset[disabled] & {
+    label {
+      cursor: @cursor-disabled;
+    }
+  }
+}
+
 // Form layout
 //== Horizontal Form
 .@{css-prefix}form-horizontal {
  .@{css-prefix}form-item {
    .make-row;
  }
+
+  .@{css-prefix}radio,
+  .@{css-prefix}checkbox,
+  .@{css-prefix}radio-inline,
+  .@{css-prefix}checkbox-inline {
+    margin-top: 0;
+    margin-bottom: 0;
+    padding-top: (@input-padding-vertical-base + 1); // Default padding plus a border
+  }
+  // Account for padding we're adding to ensure the alignment and of help text
+  // and other content below items
+  .@{css-prefix}radio,
+  .@{css-prefix}checkbox {
+    min-height: (@line-height-computed + (@input-padding-vertical-base + 1));
+  }
 }

 //== Inline Form
@ -60,9 +172,42 @@ label[required]:before {
      vertical-align: middle;
    }

+    .@{css-prefix}form-text {
+      display: inline-block;
+    }
+
    .has-feedback {
      display: inline-block;
    }
+
+    .@{css-prefix}radio,
+    .@{css-prefix}checkbox {
+      display: inline-block;
+      margin-top: 0;
+      margin-bottom: 0;
+      vertical-align: middle;
+
+      label {
+        padding-left: 0;
+      }
+    }
+    .@{css-prefix}radio input[type="radio"],
+    .@{css-prefix}checkbox input[type="checkbox"] {
+      position: relative;
+      margin-left: 0;
+    }
+
+  }
+}
+
+.@{css-prefix}form-text {
+  // min-height: (@line-height-computed + @font-size-base);
+  margin: 0!important;
+
+  &.@{css-prefix}input-lg,
+  &.@{css-prefix}input-sm {
+    padding-left: 0;
+    padding-right: 0;
  }
 }

--- a/style/mixins/input.less
+++ b/style/mixins/input.less
@ -50,7 +50,7 @@
  .placeholder();
  .transition(~"border @{duration-300} @{ease-in-out}, background @{duration-300} @{ease-in-out}, box-shadow @{duration-300} @{ease-in-out}");

-  &:not([disabled]):hover {
+  &:hover {
    border-color: @input-hover-border-color;
  }

@ -66,6 +66,9 @@
  fieldset[disabled] & {
    background-color: @input-disabled-bg;
    opacity: 1; 
+    &:hover {
+      border-color: @input-border-color;
+    }
  }

  &[disabled],
@ -171,6 +174,7 @@
    .button-variant(@input-color; #eee; @input-border-color);

    .@{iconfont-css-prefix} {
+      line-height: 1;
      margin-left: 8px;
    }
  }
@ -265,9 +269,6 @@
  &-sm > &-btn > .@{inputBtn} {
    .input-sm();
  }
-  &-sm > &-btn > .@{inputBtn} {
-    top: -2px;
-  }

  // TODO: input-group-btn-vertical: different button size
 }
--- a/style/themes/default/custom.less
+++ b/style/themes/default/custom.less
@ -15,6 +15,8 @@
@text-color             : #666;
@font-size-base         : 12px;
@line-height-base       : 1.5;
+@line-height-computed:    floor((@font-size-base * @line-height-base));
+

 // ICONFONT
@iconfont-css-prefix    : anticon;