提交 2d9919d4 编写于 作者: S simaQ

add form display page

上级 a54917bd
# 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>
````
# 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 select</label>
<label for="disabledSelect">Select</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>
......
# 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>
````
# 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>
````
# 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>
````
# 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>
````
# 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>
````
# 表单组合
- 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
# 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>
````
......@@ -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.
先完成此消息的编辑!
想要评论请 注册