Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
wanjj_1210
ant-design
提交
2d9919d4
A
ant-design
项目概览
wanjj_1210
/
ant-design
与 Fork 源项目一致
从无法访问的项目Fork
通知
10
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
A
ant-design
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
2d9919d4
编写于
7月 07, 2015
作者:
S
simaQ
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
add form display page
上级
a54917bd
变更
10
隐藏空白更改
内联
并排
Showing
10 changed file
with
530 addition
and
147 deletion
+530
-147
components/form/demo/basic.md
components/form/demo/basic.md
+12
-13
components/form/demo/disabled.md
components/form/demo/disabled.md
+11
-10
components/form/demo/form-controls.md
components/form/demo/form-controls.md
+96
-85
components/form/demo/horizontal-form.md
components/form/demo/horizontal-form.md
+40
-12
components/form/demo/inline-form.md
components/form/demo/inline-form.md
+25
-9
components/form/demo/input-size.md
components/form/demo/input-size.md
+58
-0
components/form/demo/inputs.md
components/form/demo/inputs.md
+98
-0
components/form/demo/mix.md
components/form/demo/mix.md
+108
-0
components/form/demo/validate.md
components/form/demo/validate.md
+63
-17
components/form/index.md
components/form/index.md
+19
-1
未找到文件。
components/form/demo/basic.md
浏览文件 @
2d9919d4
#
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>
````
components/form/demo/disabled.md
浏览文件 @
2d9919d4
#
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 s
elect
</label>
<label
for=
"disabledSelect"
>
S
elect
</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>
...
...
components/form/demo/form-controls.md
浏览文件 @
2d9919d4
#
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>
````
components/form/demo/horizontal-form.md
浏览文件 @
2d9919d4
#
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>
````
components/form/demo/inline-form.md
浏览文件 @
2d9919d4
#
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>
````
components/form/demo/input-size.md
0 → 100644
浏览文件 @
2d9919d4
# 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>
````
components/form/demo/inputs.md
0 → 100644
浏览文件 @
2d9919d4
# 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>
````
components/form/demo/mix.md
0 → 100644
浏览文件 @
2d9919d4
# 表单组合
-
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
components/form/demo/validate.md
浏览文件 @
2d9919d4
#
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>
````
components/form/index.md
浏览文件 @
2d9919d4
...
...
@@ -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`
中。
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录