home/ant-design
2
0
Fork 0
mirror of https://github.com/wahyd4/ant-design.git synced 2026-08-22 19:28:47 +10:00
Code Issues Packages Projects Releases Wiki Activity
Files
0ef28f0ff718f12da15245b3ead9c19b2e97a970
ant-design/components/form/index.html
T
afc163 0ef28f0ff7 Updates
2015-07-22 15:35:36 +08:00

1911 lines
106 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="description" content="一个设计&前端框架"/>
<title>
Form 表单 - Ant Design
</title>
<link rel="icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
<link rel="shortcut icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
<link rel="stylesheet" href="/dist/antd-0.7.1.css">
<link rel="stylesheet" href="/static/style.css">
<link rel="stylesheet" href="/static/tomorrow.css">
<script>
(function (con) {
'use strict';
var prop, method;
var empty = {};
var dummy = function () {
};
var properties = 'memory'.split(',');
var methods = ('assert,clear,count,debug,dir,dirxml,error,exception,group,' +
'groupCollapsed,groupEnd,info,log,markTimeline,profile,profiles,profileEnd,' +
'show,table,time,timeEnd,timeline,timelineEnd,timeStamp,trace,warn').split(',');
while (prop = properties.pop()) {
con[prop] = con[prop] || empty;
}
while (method = methods.pop()) {
con[method] = con[method] || dummy;
}
})(this.console = this.console || {});
</script>
<script src="https://a.alipayobjects.com/??bluebird/2.9.30/bluebird.js,jquery/jquery/1.11.1/jquery.js,es5-shim/4.0.5/es5-shim-debug.js,es5-shim/4.0.5/es5-sham-debug.js,html5shiv/3.7.2/src/html5shiv.js,react/0.13.3/react.js,react-router/0.13.3/ReactRouter.js"></script>
<script>
var ANT_COMPONENTS = [];
ANT_COMPONENTS.push({
title: 'Layout',
desc: '布局'
});
ANT_COMPONENTS.push({
title: 'Checkbox',
desc: '多选框'
});
ANT_COMPONENTS.push({
title: 'Iconfont',
desc: '字体图标'
});
ANT_COMPONENTS.push({
title: 'Button',
desc: '按钮'
});
ANT_COMPONENTS.push({
title: 'Radio',
desc: '单选框'
});
ANT_COMPONENTS.push({
title: 'Form',
desc: '表单'
});
ANT_COMPONENTS.push({
title: 'Switch',
desc: '开关'
});
ANT_COMPONENTS.push({
title: 'InputNumber',
desc: '数字输入框'
});
ANT_COMPONENTS.push({
title: 'Motion',
desc: '组件动画'
});
ANT_COMPONENTS.push({
title: 'Slider',
desc: '滑动输入条'
});
ANT_COMPONENTS.push({
title: 'Datepicker',
desc: '日期选择框'
});
ANT_COMPONENTS.push({
title: 'Select',
desc: '选择器'
});
ANT_COMPONENTS.push({
title: 'Tabs',
desc: '标签页'
});
ANT_COMPONENTS.push({
title: 'Steps',
desc: '步骤条'
});
ANT_COMPONENTS.push({
title: 'Breadcrumb',
desc: '面包屑'
});
ANT_COMPONENTS.push({
title: 'Collapse',
desc: '折叠面板'
});
ANT_COMPONENTS.push({
title: 'Alert',
desc: '通知栏'
});
ANT_COMPONENTS.push({
title: 'Notification',
desc: '系统通知框'
});
ANT_COMPONENTS.push({
title: 'Pagination',
desc: '分页'
});
ANT_COMPONENTS.push({
title: 'Tree',
desc: '树形控件'
});
ANT_COMPONENTS.push({
title: 'Carousel',
desc: '走马灯'
});
ANT_COMPONENTS.push({
title: 'Menu',
desc: '导航菜单'
});
ANT_COMPONENTS.push({
title: 'Tag',
desc: '标签'
});
ANT_COMPONENTS.push({
title: 'Affix',
desc: '固定'
});
ANT_COMPONENTS.push({
title: 'Upload',
desc: '文件上传'
});
ANT_COMPONENTS.push({
title: 'Modal',
desc: '对话框'
});
ANT_COMPONENTS.push({
title: 'Message',
desc: '全局提示'
});
ANT_COMPONENTS.push({
title: 'Dropdown',
desc: '下拉菜单'
});
ANT_COMPONENTS.push({
title: 'Popover',
desc: '气泡卡片'
});
ANT_COMPONENTS.push({
title: 'Popconfirm',
desc: '气泡确认框'
});
ANT_COMPONENTS.push({
title: 'Tooltip',
desc: '文字提示'
});
ANT_COMPONENTS.push({
title: 'Progress',
desc: '进度条'
});
ANT_COMPONENTS.push({
title: 'Table',
desc: '表格'
});
</script>
<script src="/static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.7.1',
stable: '0.7.0'
};
</script>
<script src="/dist/antd-0.7.1.js"></script>
<script src="/dist/demo.js"></script>
<script>
window.require = function (path) {
var result = window;
var namespaces = path.split('/');
namespaces.forEach(function (key, i) {
if (i !== 0 && i === namespaces.length - 1) {
key = capitalizeFirstLetter(key);
}
if (key !== 'lib') {
if (result[key]) {
result = result[key];
} else {
throw 'There should not have modules here 2.';
}
}
});
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
return result;
};
</script>
</head>
<body >
<header id="header">
<a class="logo" href="/">
<img width="60" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg">
Ant Design
</a>
<div class="search">
<div id="autoComplete"></div>
</div>
<nav class="nav">
<span class="bar"></span>
<ul>
<li class="">
<a href="/">首页</a>
</li>
<li class="">
<a href="/docs/introduce">使用</a>
</li>
<li class="">
<a class="disabled" href="/design/">设计</a>
</li>
<li class="current">
<a href="/components">组件</a>
</li>
<li>
<a target="_blank" href="https://github.com/ant-design/ant-design">Github</a>
</li>
</ul>
</nav>
</header>
<div class="main-wrapper">
<aside class="aside-container">
<ul>
<li>
<h4>CSS</h4>
<ul class="aside-list-show">
<li class="">
<a href="../layout/">
Layout
<span class="chinese">布局</span>
</a>
</li>
<li class="">
<a href="../iconfont/">
Iconfont
<span class="chinese">字体图标</span>
</a>
</li>
<li class="">
<a href="../button/">
Button
<span class="chinese">按钮</span>
</a>
</li>
<li class="current">
<a href="./">
Form
<span class="chinese">表单</span>
</a>
</li>
<li class="">
<a href="../motion/">
Motion
<span class="chinese">组件动画</span>
</a>
</li>
<li class="">
<a href="../alert/">
Alert
<span class="chinese">通知栏</span>
</a>
</li>
</ul>
</li>
<li>
<h4>Components</h4>
<ul class="">
<li class="">
<a href="../checkbox/">
Checkbox
<span class="chinese">多选框</span>
</a>
</li>
<li class="">
<a href="../radio/">
Radio
<span class="chinese">单选框</span>
</a>
</li>
<li class="">
<a href="../switch/">
Switch
<span class="chinese">开关</span>
</a>
</li>
<li class="">
<a href="../slider/">
Slider
<span class="chinese">滑动输入条</span>
</a>
</li>
<li class="">
<a href="../input-number/">
InputNumber
<span class="chinese">数字输入框</span>
</a>
</li>
<li class="">
<a href="../select/">
Select
<span class="chinese">选择器</span>
</a>
</li>
<li class="">
<a href="../datepicker/">
Datepicker
<span class="chinese">日期选择框</span>
</a>
</li>
<li class="">
<a href="../tabs/">
Tabs
<span class="chinese">标签页</span>
</a>
</li>
<li class="">
<a href="../steps/">
Steps
<span class="chinese">步骤条</span>
</a>
</li>
<li class="">
<a href="../breadcrumb/">
Breadcrumb
<span class="chinese">面包屑</span>
</a>
</li>
<li class="">
<a href="../collapse/">
Collapse
<span class="chinese">折叠面板</span>
</a>
</li>
<li class="">
<a href="../affix/">
Affix
<span class="chinese">固定</span>
</a>
</li>
<li class="">
<a href="../pagination/">
Pagination
<span class="chinese">分页</span>
</a>
</li>
<li class="">
<a href="../tree/">
Tree
<span class="chinese">树形控件</span>
</a>
</li>
<li class="">
<a href="../carousel/">
Carousel
<span class="chinese">走马灯</span>
</a>
</li>
<li class="">
<a href="../menu/">
Menu
<span class="chinese">导航菜单</span>
</a>
</li>
<li class="">
<a href="../tag/">
Tag
<span class="chinese">标签</span>
</a>
</li>
<li class="">
<a href="../upload/">
Upload
<span class="chinese">文件上传</span>
</a>
</li>
<li class="">
<a href="../notification/">
Notification
<span class="chinese">系统通知框</span>
</a>
</li>
<li class="">
<a href="../modal/">
Modal
<span class="chinese">对话框</span>
</a>
</li>
<li class="">
<a href="../message/">
Message
<span class="chinese">全局提示</span>
</a>
</li>
<li class="">
<a href="../dropdown/">
Dropdown
<span class="chinese">下拉菜单</span>
</a>
</li>
<li class="">
<a href="../popover/">
Popover
<span class="chinese">气泡卡片</span>
</a>
</li>
<li class="">
<a href="../popconfirm/">
Popconfirm
<span class="chinese">气泡确认框</span>
</a>
</li>
<li class="">
<a href="../tooltip/">
Tooltip
<span class="chinese">文字提示</span>
</a>
</li>
<li class="">
<a href="../progress/">
Progress
<span class="chinese">进度条</span>
</a>
</li>
<li class="">
<a href="../table/">
Table
<span class="chinese">表格</span>
</a>
</li>
</ul>
</li>
</ul>
</aside>
<section class="main-container">
<article class="markdown">
<h1>
Form 表单
</h1>
<p>具有数据收集、校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素。</p>
<h3 id="表单">表单</h3><p>我们为 <code>form</code> 提供了以下两种排列方式：</p>
<ul>
<li>水平排列：<code>.ant-form-horizontal</code> 类可以实现 <code>label</code> 标签和表单控件的水平排列;</li>
<li>行内排列：<code>.ant-form-inline</code> 类可使其表现为 inline-block 级别的控件。</li>
</ul>
<p><strong>注</strong>: <code>.ant-form-inline</code> 类只适用于<strong>视口宽度大于等于 768px </strong>的情形。</p>
<h3 id="表单域">表单域</h3><p>表单一定会包含表单域，表单域可以是输入控件，标准表单域，标签，下拉菜单，文本域等。</p>
<p>在这里，我们使用 <code>.ant-form-item</code> 类来表示表单域，它包含了一个标签和一个输入控件。</p>
<p>为了获得更好的排列，请将 <code>label</code> 标签和 <code>&lt;input&gt;</code>、<code>&lt;textarea&gt;</code>、<code>&lt;select&gt;</code> 控件包裹在 <code>.ant-form-item</code> 中。</p>
</article><h2 class="component-demos">
组件演示
<i class="iconfont-home icon-all" title="展开全部代码"></i>
</h2>
<div class="code-boxes clearfix">
<div class="code-boxes-col-2-1"><div class="code-box">
<div class="code-box-demo">
<div id="components-form-demo-horizontal-form"></div>
<script>(function(){"use strict";
var Checkbox = antd.Checkbox;
var Radio = antd.Radio;
var RadioGroup = antd.RadioGroup;
React.render(React.createElement(
"form",
{ className: "ant-form-horizontal" },
React.createElement(
"div",
{ className: "ant-form-item ant-form-item-compact" },
React.createElement(
"label",
{ "for": "userName", className: "col-6", required: true },
"用户名："
),
React.createElement(
"div",
{ className: "col-6" },
React.createElement(
"p",
{ className: "ant-form-text" },
"大眼萌 minion"
)
)
),
React.createElement(
"div",
{ className: "ant-form-item" },
React.createElement(
"label",
{ "for": "password", className: "col-6", required: true },
"密码："
),
React.createElement(
"div",
{ className: "col-14" },
React.createElement("input", { className: "ant-input", type: "password", id: "password", placeholder: "请输入密码" })
)
),
React.createElement(
"div",
{ className: "ant-form-item ant-form-item-compact" },
React.createElement(
"label",
{ className: "col-6", required: true },
"您的性别："
),
React.createElement(
"div",
{ className: "col-14" },
React.createElement(
RadioGroup,
{ value: "male" },
React.createElement(
Radio,
{ value: "male" },
"男的"
),
React.createElement(
Radio,
{ value: "female" },
"女的"
)
)
)
),
React.createElement(
"div",
{ className: "ant-form-item" },
React.createElement(
"label",
{ "for": "password", className: "col-6", required: true },
"备注："
),
React.createElement(
"div",
{ className: "col-14" },
React.createElement("textarea", { className: "ant-input", placeholder: "随便写" }),
React.createElement(
"p",
{ className: "ant-form-explain" },
"随便写点什么"
)
)
),
React.createElement(
"div",
{ className: "ant-form-item ant-form-item-compact" },
React.createElement(
"div",
{ className: "col-14 col-offset-6" },
React.createElement(
"label",
null,
React.createElement(Checkbox, null),
" 同意"
)
)
),
React.createElement(
"div",
{ className: "row" },
React.createElement(
"div",
{ className: "col-16 col-offset-6" },
React.createElement("input", { type: "submit", className: "ant-btn ant-btn-primary", value: "确 定" })
)
)
), document.getElementById('components-form-demo-horizontal-form'));})()</script><div class="highlight"><pre><code class="javascript"><span class="keyword">var</span> Checkbox = antd.Checkbox;
<span class="keyword">var</span> Radio = antd.Radio;
<span class="keyword">var</span> RadioGroup = antd.RadioGroup;
React.render(
<span class="xml"><span class="tag">&lt;<span class="title">form</span> <span class="attribute">className</span>=<span class="value">"ant-form-horizontal"</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"ant-form-item ant-form-item-compact"</span>&gt;</span>
<span class="tag">&lt;<span class="title">label</span> <span class="attribute">for</span>=<span class="value">"userName"</span> <span class="attribute">className</span>=<span class="value">"col-6"</span> <span class="attribute">required</span>&gt;</span>用户名：<span class="tag">&lt;/<span class="title">label</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"col-6"</span>&gt;</span>
<span class="tag">&lt;<span class="title">p</span> <span class="attribute">className</span>=<span class="value">"ant-form-text"</span>&gt;</span>大眼萌 minion<span class="tag">&lt;/<span class="title">p</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"ant-form-item"</span>&gt;</span>
<span class="tag">&lt;<span class="title">label</span> <span class="attribute">for</span>=<span class="value">"password"</span> <span class="attribute">className</span>=<span class="value">"col-6"</span> <span class="attribute">required</span>&gt;</span>密码：<span class="tag">&lt;/<span class="title">label</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"col-14"</span>&gt;</span>
<span class="tag">&lt;<span class="title">input</span> <span class="attribute">className</span>=<span class="value">"ant-input"</span> <span class="attribute">type</span>=<span class="value">"password"</span> <span class="attribute">id</span>=<span class="value">"password"</span> <span class="attribute">placeholder</span>=<span class="value">"请输入密码"</span>/&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"ant-form-item ant-form-item-compact"</span>&gt;</span>
<span class="tag">&lt;<span class="title">label</span> <span class="attribute">className</span>=<span class="value">"col-6"</span> <span class="attribute">required</span>&gt;</span>您的性别：<span class="tag">&lt;/<span class="title">label</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"col-14"</span>&gt;</span>
<span class="tag">&lt;<span class="title">RadioGroup</span> <span class="attribute">value</span>=<span class="value">"male"</span>&gt;</span>
<span class="tag">&lt;<span class="title">Radio</span> <span class="attribute">value</span>=<span class="value">"male"</span>&gt;</span>男的<span class="tag">&lt;/<span class="title">Radio</span>&gt;</span>
<span class="tag">&lt;<span class="title">Radio</span> <span class="attribute">value</span>=<span class="value">"female"</span>&gt;</span>女的<span class="tag">&lt;/<span class="title">Radio</span>&gt;</span>
<span class="tag">&lt;/<span class="title">RadioGroup</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"ant-form-item"</span>&gt;</span>
<span class="tag">&lt;<span class="title">label</span> <span class="attribute">for</span>=<span class="value">"password"</span> <span class="attribute">className</span>=<span class="value">"col-6"</span> <span class="attribute">required</span>&gt;</span>备注：<span class="tag">&lt;/<span class="title">label</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"col-14"</span>&gt;</span>
<span class="tag">&lt;<span class="title">textarea</span> <span class="attribute">className</span>=<span class="value">"ant-input"</span> <span class="attribute">placeholder</span>=<span class="value">"随便写"</span>&gt;</span><span class="tag">&lt;/<span class="title">textarea</span>&gt;</span>
<span class="tag">&lt;<span class="title">p</span> <span class="attribute">className</span>=<span class="value">"ant-form-explain"</span>&gt;</span>随便写点什么<span class="tag">&lt;/<span class="title">p</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"ant-form-item ant-form-item-compact"</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"col-14 col-offset-6"</span>&gt;</span>
<span class="tag">&lt;<span class="title">label</span>&gt;</span>
<span class="tag">&lt;<span class="title">Checkbox</span> /&gt;</span> 同意
<span class="tag">&lt;/<span class="title">label</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"row"</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"col-16 col-offset-6"</span>&gt;</span>
<span class="tag">&lt;<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"submit"</span> <span class="attribute">className</span>=<span class="value">"ant-btn ant-btn-primary"</span> <span class="attribute">value</span>=<span class="value">"确 定"</span> /&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">form</span>&gt;</span>
, document.getElementById('components-form-demo-horizontal-form'));</span></code></pre></div>
</div>
<div class="code-box-meta markdown">
<div class="code-box-title">水平排列的表单</div>
<p>为 <code>&lt;form&gt;</code> 标签添加 <code>.ant-form-horizontal</code> 类(这让 <code>.ant-form-item</code> 表现为栅格系统中的 <code>row</code>)，并结合使用我们提供的 <a href="http://ant.design/components/layout/">栅格系统</a>，可以实现 label 标签和表单控件的水平排列。</p>
<p>如需将一行静态文本和 <code>&lt;label&gt;</code> 标签置于同一行，则只需为 <code>&lt;p&gt;</code> 标签添加 <code>.ant-form-text</code> 类即可。</p>
<p>为 <code>label</code> 标签添加 <code>required</code> 属性，表示该项必选。</p>
<p><strong>注意</strong>：对于表单域(<code>.ant-form-item</code>) 为静态文本、<code>checkbox</code>、<code>radio</code>以及<code>input[type=&quot;file&quot;]</code>的，其高度不同于一般的表单域，需要在 <code>.ant-form-item</code> 类后再加上 <code>.ant-form-item-compact</code>。</p>
<span class="collapse anticon anticon-circle-o-right"></span>
</div>
</div><div class="code-box">
<div class="code-box-demo">
<div id="components-form-demo-disabled"></div>
<h4 id="禁用的表单控件">禁用的表单控件</h4><p><br></p>
<div class="nico-insert-code"><form class="ant-form-horizontal">
<div class="ant-form-item">
<label class="col-5">禁用的输入框：</label>
<div class="col-12">
<input class="ant-input" type="text" value="我是禁用的" disabled>
</div>
</div>
</form></div><div class="highlight"><pre><code class="xml"><span class="tag">&lt;<span class="title">form</span> <span class="attribute">class</span>=<span class="value">"ant-form-horizontal"</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"ant-form-item"</span>&gt;</span>
<span class="tag">&lt;<span class="title">label</span> <span class="attribute">class</span>=<span class="value">"col-5"</span>&gt;</span>禁用的输入框：<span class="tag">&lt;/<span class="title">label</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"col-12"</span>&gt;</span>
<span class="tag">&lt;<span class="title">input</span> <span class="attribute">class</span>=<span class="value">"ant-input"</span> <span class="attribute">type</span>=<span class="value">"text"</span> <span class="attribute">value</span>=<span class="value">"我是禁用的"</span> <span class="attribute">disabled</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">form</span>&gt;</span></code></pre></div><h4 id="禁用的-fieldset">禁用的 fieldset</h4><p><br></p>
<div class="nico-insert-code"><form class="ant-form-horizontal">
<fieldset disabled>
<div class="ant-form-item ant-form-item-compact">
<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-12 col-offset-5">
<input type="submit" class="ant-btn ant-btn-primary" value="确 定" />
</div>
</div>
</fieldset>
</form></div><div class="highlight"><pre><code class="xml"><span class="tag">&lt;<span class="title">form</span> <span class="attribute">class</span>=<span class="value">"ant-form-horizontal"</span>&gt;</span>
<span class="tag">&lt;<span class="title">fieldset</span> <span class="attribute">disabled</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"ant-form-item ant-form-item-compact"</span>&gt;</span>
<span class="tag">&lt;<span class="title">label</span> <span class="attribute">for</span>=<span class="value">"userName"</span> <span class="attribute">class</span>=<span class="value">"col-5"</span> <span class="attribute">required</span>&gt;</span>用户名：<span class="tag">&lt;/<span class="title">label</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"col-12"</span>&gt;</span>
<span class="tag">&lt;<span class="title">p</span> <span class="attribute">class</span>=<span class="value">"ant-form-text"</span>&gt;</span>大眼萌 minion<span class="tag">&lt;/<span class="title">p</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"ant-form-item"</span>&gt;</span>
<span class="tag">&lt;<span class="title">label</span> <span class="attribute">for</span>=<span class="value">"password"</span> <span class="attribute">class</span>=<span class="value">"col-5"</span> <span class="attribute">required</span>&gt;</span>密码：<span class="tag">&lt;/<span class="title">label</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"col-12"</span>&gt;</span>
<span class="tag">&lt;<span class="title">input</span> <span class="attribute">class</span>=<span class="value">"ant-input"</span> <span class="attribute">type</span>=<span class="value">"password"</span> <span class="attribute">id</span>=<span class="value">"password"</span> <span class="attribute">value</span>=<span class="value">"123456"</span>/&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"row"</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"col-12 col-offset-5"</span>&gt;</span>
<span class="tag">&lt;<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"submit"</span> <span class="attribute">class</span>=<span class="value">"ant-btn ant-btn-primary"</span> <span class="attribute">value</span>=<span class="value">"确 定"</span> /&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">fieldset</span>&gt;</span>
<span class="tag">&lt;/<span class="title">form</span>&gt;</span></code></pre></div>
</div>
<div class="code-box-meta markdown">
<div class="code-box-title">禁用状态</div>
<p>1) 单独为输入框设置 <code>disabled</code> 属性；</p>
<p>2) 为 <code>&lt;fieldset&gt;</code> 设置 <code>disabled</code> 属性，可以禁用 <code>&lt;fieldset&gt;</code> 中包含的所有控件。</p>
<span class="collapse anticon anticon-circle-o-right"></span>
</div>
</div><div class="code-box">
<div class="code-box-demo">
<div id="components-form-demo-validate"></div>
<div class="nico-insert-code"><h4>不带反馈图标的校验提示</h4>
<br />
<form class="ant-form-horizontal">
<div class="ant-form-item has-error">
<label for="error" class="col-5">失败校验：</label>
<div class="col-12">
<input class="ant-input" type="text" id="error" value="无效选择"/>
<div class="ant-form-explain">请输入数字和字母组合</div>
</div>
</div>
<div class="ant-form-item has-warning">
<label for="warning" class="col-5">警告校验：</label>
<div class="col-12">
<input class="ant-input" type="text" id="warning" value="前方高能预警"/>
</div>
</div>
</form>
<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></div><div class="highlight"><pre><code class="xml"><span class="tag">&lt;<span class="title">h4</span>&gt;</span>不带反馈图标的校验提示<span class="tag">&lt;/<span class="title">h4</span>&gt;</span>
<span class="tag">&lt;<span class="title">br</span> /&gt;</span>
<span class="tag">&lt;<span class="title">form</span> <span class="attribute">class</span>=<span class="value">"ant-form-horizontal"</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"ant-form-item has-error"</span>&gt;</span>
<span class="tag">&lt;<span class="title">label</span> <span class="attribute">for</span>=<span class="value">"error"</span> <span class="attribute">class</span>=<span class="value">"col-5"</span>&gt;</span>失败校验：<span class="tag">&lt;/<span class="title">label</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"col-12"</span>&gt;</span>
<span class="tag">&lt;<span class="title">input</span> <span class="attribute">class</span>=<span class="value">"ant-input"</span> <span class="attribute">type</span>=<span class="value">"text"</span> <span class="attribute">id</span>=<span class="value">"error"</span> <span class="attribute">value</span>=<span class="value">"无效选择"</span>/&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"ant-form-explain"</span>&gt;</span>请输入数字和字母组合<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"ant-form-item has-warning"</span>&gt;</span>
<span class="tag">&lt;<span class="title">label</span> <span class="attribute">for</span>=<span class="value">"warning"</span> <span class="attribute">class</span>=<span class="value">"col-5"</span>&gt;</span>警告校验：<span class="tag">&lt;/<span class="title">label</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"col-12"</span>&gt;</span>
<span class="tag">&lt;<span class="title">input</span> <span class="attribute">class</span>=<span class="value">"ant-input"</span> <span class="attribute">type</span>=<span class="value">"text"</span> <span class="attribute">id</span>=<span class="value">"warning"</span> <span class="attribute">value</span>=<span class="value">"前方高能预警"</span>/&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">form</span>&gt;</span>
<span class="tag">&lt;<span class="title">h4</span>&gt;</span>带图标的校验提示（水平排列的表单）<span class="tag">&lt;/<span class="title">h4</span>&gt;</span>
<span class="tag">&lt;<span class="title">br</span> /&gt;</span>
<span class="tag">&lt;<span class="title">form</span> <span class="attribute">class</span>=<span class="value">"ant-form-horizontal"</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"ant-form-item"</span>&gt;</span>
<span class="tag">&lt;<span class="title">label</span> <span class="attribute">class</span>=<span class="value">"col-5"</span> <span class="attribute">for</span>=<span class="value">"validating"</span>&gt;</span>校验中：<span class="tag">&lt;/<span class="title">label</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"col-12"</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"has-feedback"</span>&gt;</span>
<span class="tag">&lt;<span class="title">input</span> <span class="attribute">class</span>=<span class="value">"ant-input"</span> <span class="attribute">type</span>=<span class="value">"text"</span> <span class="attribute">id</span>=<span class="value">"validating"</span> <span class="attribute">value</span>=<span class="value">"我是被校验的内容"</span>/&gt;</span>
<span class="tag">&lt;<span class="title">i</span> <span class="attribute">class</span>=<span class="value">"anticon anticon-loading"</span>&gt;</span><span class="tag">&lt;/<span class="title">i</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"ant-form-explain"</span>&gt;</span>信息审核中...<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"ant-form-item has-success"</span>&gt;</span>
<span class="tag">&lt;<span class="title">label</span> <span class="attribute">class</span>=<span class="value">"col-5"</span> <span class="attribute">for</span>=<span class="value">"input1"</span>&gt;</span>成功校验：<span class="tag">&lt;/<span class="title">label</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"col-12"</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"has-feedback"</span>&gt;</span>
<span class="tag">&lt;<span class="title">input</span> <span class="attribute">class</span>=<span class="value">"ant-input"</span> <span class="attribute">type</span>=<span class="value">"text"</span> <span class="attribute">id</span>=<span class="value">"input1"</span> <span class="attribute">value</span>=<span class="value">"我是正文"</span>/&gt;</span>
<span class="tag">&lt;<span class="title">i</span> <span class="attribute">class</span>=<span class="value">"anticon anticon-check-circle"</span>&gt;</span><span class="tag">&lt;/<span class="title">i</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"ant-form-item has-error"</span>&gt;</span>
<span class="tag">&lt;<span class="title">label</span> <span class="attribute">class</span>=<span class="value">"col-5"</span> <span class="attribute">for</span>=<span class="value">"input2"</span>&gt;</span>失败校验：<span class="tag">&lt;/<span class="title">label</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"col-12"</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"has-feedback"</span>&gt;</span>
<span class="tag">&lt;<span class="title">input</span> <span class="attribute">class</span>=<span class="value">"ant-input"</span> <span class="attribute">type</span>=<span class="value">"text"</span> <span class="attribute">id</span>=<span class="value">"input2"</span> <span class="attribute">value</span>=<span class="value">"无效选择"</span>/&gt;</span>
<span class="tag">&lt;<span class="title">i</span> <span class="attribute">class</span>=<span class="value">"anticon anticon-cross-circle"</span>&gt;</span><span class="tag">&lt;/<span class="title">i</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"ant-form-explain"</span>&gt;</span>请输入数字和字母组合<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"ant-form-item has-warning"</span>&gt;</span>
<span class="tag">&lt;<span class="title">label</span> <span class="attribute">class</span>=<span class="value">"col-5"</span> <span class="attribute">for</span>=<span class="value">"input3"</span>&gt;</span>警告校验：<span class="tag">&lt;/<span class="title">label</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"col-12"</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"has-feedback"</span>&gt;</span>
<span class="tag">&lt;<span class="title">input</span> <span class="attribute">class</span>=<span class="value">"ant-input"</span> <span class="attribute">type</span>=<span class="value">"text"</span> <span class="attribute">id</span>=<span class="value">"input3"</span> <span class="attribute">value</span>=<span class="value">"前方高能预警"</span>/&gt;</span>
<span class="tag">&lt;<span class="title">i</span> <span class="attribute">class</span>=<span class="value">"anticon anticon-exclamation-circle"</span>&gt;</span><span class="tag">&lt;/<span class="title">i</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">form</span>&gt;</span></code></pre></div>
</div>
<div class="code-box-meta markdown">
<div class="code-box-title">校验提示</div>
<p>我们为表单控件的校验状态定义了样式，共有三种校验状态类：</p>
<p><code>.has-success</code> <code>.has-error</code> <code>.has-warning</code>, 分别代表校验成功、校验失败、有警告。</p>
<p>将以上三种校验状态类添加到这些控件的父级元素即可。</p>
<p>另外为输入框添加反馈图标，可以更好地反馈当前的校验状态，使用 <code>.has-feedback</code> 类包裹 input 输入框即可。</p>
<p><strong>注意</strong>: 反馈图标只能使用在文本输入框 <code>&lt;input class=&quot;ant-input&quot;&gt;</code> 元素上。</p>
<span class="collapse anticon anticon-circle-o-right"></span>
</div>
</div><div class="code-box">
<div class="code-box-demo">
<div id="components-form-demo-input-size"></div>
<div class="nico-insert-code"><div class="row">
<div class="ant-input-group">
<div class="col-6">
<input class="ant-input ant-input-lg" type="text" id="largeInput" placeholder="大尺寸"/>
</div>
<div class="col-6">
<input class="ant-input" type="text" id="defaultInput" placeholder="默认尺寸"/>
</div>
<div class="col-6">
<input class="ant-input ant-input-sm" type="text" id="smallInput" placeholder="小尺寸"/>
</div>
</div>
</div></div><div class="highlight"><pre><code class="xml"><span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"row"</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"ant-input-group"</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"col-6"</span>&gt;</span>
<span class="tag">&lt;<span class="title">input</span> <span class="attribute">class</span>=<span class="value">"ant-input ant-input-lg"</span> <span class="attribute">type</span>=<span class="value">"text"</span> <span class="attribute">id</span>=<span class="value">"largeInput"</span> <span class="attribute">placeholder</span>=<span class="value">"大尺寸"</span>/&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"col-6"</span>&gt;</span>
<span class="tag">&lt;<span class="title">input</span> <span class="attribute">class</span>=<span class="value">"ant-input"</span> <span class="attribute">type</span>=<span class="value">"text"</span> <span class="attribute">id</span>=<span class="value">"defaultInput"</span> <span class="attribute">placeholder</span>=<span class="value">"默认尺寸"</span>/&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"col-6"</span>&gt;</span>
<span class="tag">&lt;<span class="title">input</span> <span class="attribute">class</span>=<span class="value">"ant-input ant-input-sm"</span> <span class="attribute">type</span>=<span class="value">"text"</span> <span class="attribute">id</span>=<span class="value">"smallInput"</span> <span class="attribute">placeholder</span>=<span class="value">"小尺寸"</span>/&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></pre></div>
</div>
<div class="code-box-meta markdown">
<div class="code-box-title">Input 尺寸</div>
<p>我们为定义了 <code>.ant-input</code> 类的输入框提供了三种尺寸：大（-lg）、中(默认)、小（-sm），往类名添加以上后缀即可。</p>
<p>但是在 <code>&lt;form&gt;</code> 表单里面，我们只使用<strong>大尺寸</strong>， 即高度为 <strong>32px</strong>，作为唯一的尺寸。</p>
<span class="collapse anticon anticon-circle-o-right"></span>
</div>
</div>
</div>
<div class="code-boxes-col-2-1"><div class="code-box">
<div class="code-box-demo">
<div id="components-form-demo-inline-form"></div>
<script>(function(){"use strict";
var Checkbox = antd.Checkbox;
React.render(React.createElement(
"form",
{ className: "ant-form-inline" },
React.createElement(
"div",
{ className: "ant-form-item" },
React.createElement(
"label",
{ "for": "userName" },
"账户："
),
React.createElement("input", { className: "ant-input", type: "text", id: "userName", placeholder: "请输入账户名" })
),
React.createElement(
"div",
{ className: "ant-form-item" },
React.createElement(
"label",
{ "for": "password" },
"密码："
),
React.createElement("input", { className: "ant-input", type: "password", id: "password", placeholder: "请输入密码" })
),
React.createElement(
"div",
{ className: "ant-form-item" },
React.createElement(
"label",
{ className: "ant-checkbox-inline" },
React.createElement(Checkbox, null),
" 记住我"
)
),
React.createElement("input", { type: "submit", className: "ant-btn ant-btn-primary", value: "登 录" })
), document.getElementById('components-form-demo-inline-form'));})()</script><div class="highlight"><pre><code class="javascript"><span class="keyword">var</span> Checkbox = antd.Checkbox;
React.render(
<span class="xml"><span class="tag">&lt;<span class="title">form</span> <span class="attribute">className</span>=<span class="value">"ant-form-inline"</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"ant-form-item"</span>&gt;</span>
<span class="tag">&lt;<span class="title">label</span> <span class="attribute">for</span>=<span class="value">"userName"</span>&gt;</span>账户：<span class="tag">&lt;/<span class="title">label</span>&gt;</span>
<span class="tag">&lt;<span class="title">input</span> <span class="attribute">className</span>=<span class="value">"ant-input"</span> <span class="attribute">type</span>=<span class="value">"text"</span> <span class="attribute">id</span>=<span class="value">"userName"</span> <span class="attribute">placeholder</span>=<span class="value">"请输入账户名"</span> /&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"ant-form-item"</span>&gt;</span>
<span class="tag">&lt;<span class="title">label</span> <span class="attribute">for</span>=<span class="value">"password"</span>&gt;</span>密码：<span class="tag">&lt;/<span class="title">label</span>&gt;</span>
<span class="tag">&lt;<span class="title">input</span> <span class="attribute">className</span>=<span class="value">"ant-input"</span> <span class="attribute">type</span>=<span class="value">"password"</span> <span class="attribute">id</span>=<span class="value">"password"</span> <span class="attribute">placeholder</span>=<span class="value">"请输入密码"</span> /&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"ant-form-item"</span>&gt;</span>
<span class="tag">&lt;<span class="title">label</span> <span class="attribute">className</span>=<span class="value">"ant-checkbox-inline"</span>&gt;</span>
<span class="tag">&lt;<span class="title">Checkbox</span> /&gt;</span> 记住我
<span class="tag">&lt;/<span class="title">label</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"submit"</span> <span class="attribute">className</span>=<span class="value">"ant-btn ant-btn-primary"</span> <span class="attribute">value</span>=<span class="value">"登 录"</span> /&gt;</span>
<span class="tag">&lt;/<span class="title">form</span>&gt;</span>
, document.getElementById('components-form-demo-inline-form'));</span></code></pre></div>
</div>
<div class="code-box-meta markdown">
<div class="code-box-title">行内排列的表单</div>
<p>在<strong>视口宽度大于等于 768px </strong>时，你可以为 <code>&lt;form&gt;</code> 标签添加 <code>.ant-form-inline</code> 类可使其表现为 inline-block 级别的控件。</p>
<span class="collapse anticon anticon-circle-o-right"></span>
</div>
</div><div class="code-box">
<div class="code-box-demo">
<div id="components-form-demo-form-controls"></div>
<script>(function(){"use strict";
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(React.createElement(
"form",
{ className: "ant-form-horizontal" },
React.createElement(
"div",
{ className: "ant-form-item" },
React.createElement(
"label",
{ className: "col-6" },
"输入框："
),
React.createElement(
"div",
{ className: "col-14" },
React.createElement("input", { type: "text", className: "ant-input", placeholder: "Please enter..." })
)
),
React.createElement(
"div",
{ className: "ant-form-item" },
React.createElement(
"label",
{ className: "col-6" },
"文本域："
),
React.createElement(
"div",
{ className: "col-14" },
React.createElement("textarea", { className: "ant-input" })
)
),
React.createElement(
"div",
{ className: "ant-form-item" },
React.createElement(
"label",
{ className: "col-6" },
"ant-select："
),
React.createElement(
"div",
{ className: "col-14" },
React.createElement(
Select,
{ value: "lucy", style: { width: 200 }, onChange: handleSelectChange },
React.createElement(
Option,
{ value: "jack" },
"jack"
),
React.createElement(
Option,
{ value: "lucy" },
"lucy"
),
React.createElement(
Option,
{ value: "disabled", disabled: true },
"disabled"
),
React.createElement(
Option,
{ value: "yiminghe" },
"yiminghe"
)
)
)
),
React.createElement(
"div",
{ className: "ant-form-item ant-form-item-compact" },
React.createElement(
"label",
{ className: "col-6" },
"ant-checkbox："
),
React.createElement(
"div",
{ className: "col-18" },
React.createElement(
"label",
{ className: "ant-checkbox-vertical" },
React.createElement(Checkbox, null),
" 选项一"
),
React.createElement(
"label",
{ className: "ant-checkbox-vertical" },
React.createElement(Checkbox, null),
" 选项二"
),
React.createElement(
"label",
{ className: "ant-checkbox-vertical" },
React.createElement(Checkbox, { disabled: true }),
" 选项三（不可选）"
)
)
),
React.createElement(
"div",
{ className: "ant-form-item ant-form-item-compact" },
React.createElement(
"label",
{ className: "col-6" },
"ant-checkbox："
),
React.createElement(
"div",
{ className: "col-18" },
React.createElement(
"label",
{ className: "ant-checkbox-inline" },
React.createElement(Checkbox, null),
"选项一"
),
React.createElement(
"label",
{ className: "ant-checkbox-inline" },
React.createElement(Checkbox, null),
"选项二"
),
React.createElement(
"label",
{ className: "ant-checkbox-inline" },
React.createElement(Checkbox, null),
"选项三"
)
)
),
React.createElement(
"div",
{ className: "ant-form-item ant-form-item-compact" },
React.createElement(
"label",
{ className: "col-6" },
"ant-radio："
),
React.createElement(
"div",
{ className: "col-18" },
React.createElement(
RadioGroup,
{ value: "b" },
React.createElement(
Radio,
{ value: "a" },
"A"
),
React.createElement(
Radio,
{ value: "b" },
"B"
),
React.createElement(
Radio,
{ value: "c" },
"C"
),
React.createElement(
Radio,
{ value: "d" },
"D"
)
)
)
),
React.createElement(
"div",
{ className: "ant-form-item ant-form-item-compact" },
React.createElement(
"label",
{ className: "col-6", "for": "InputFile" },
"头像："
),
React.createElement(
"div",
{ className: "col-18" },
React.createElement("input", { type: "file", id: "InputFile", className: "ant-upload" }),
React.createElement(
"p",
{ className: "ant-form-explain" },
"请选择一个文件"
)
)
)
), document.getElementById('components-form-demo-form-controls'));})()</script><div class="highlight"><pre><code class="javascript"><span class="keyword">var</span> Select = antd.Select;
<span class="keyword">var</span> Option = Select.Option;
<span class="keyword">var</span> Checkbox = antd.Checkbox;
<span class="keyword">var</span> Radio = antd.Radio;
<span class="keyword">var</span> RadioGroup = antd.RadioGroup;
<span class="function"><span class="keyword">function</span> <span class="title">handleSelectChange</span><span class="params">(value)</span> {</span>
console.log(<span class="string">'selected '</span> + value);
}
React.render(
<span class="xml"><span class="tag">&lt;<span class="title">form</span> <span class="attribute">className</span>=<span class="value">"ant-form-horizontal"</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"ant-form-item"</span>&gt;</span>
<span class="tag">&lt;<span class="title">label</span> <span class="attribute">className</span>=<span class="value">"col-6"</span>&gt;</span>输入框：<span class="tag">&lt;/<span class="title">label</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"col-14"</span>&gt;</span>
<span class="tag">&lt;<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"text"</span> <span class="attribute">className</span>=<span class="value">"ant-input"</span> <span class="attribute">placeholder</span>=<span class="value">"Please enter..."</span> /&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"ant-form-item"</span>&gt;</span>
<span class="tag">&lt;<span class="title">label</span> <span class="attribute">className</span>=<span class="value">"col-6"</span>&gt;</span>文本域：<span class="tag">&lt;/<span class="title">label</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"col-14"</span>&gt;</span>
<span class="tag">&lt;<span class="title">textarea</span> <span class="attribute">className</span>=<span class="value">"ant-input"</span>&gt;</span><span class="tag">&lt;/<span class="title">textarea</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"ant-form-item"</span>&gt;</span>
<span class="tag">&lt;<span class="title">label</span> <span class="attribute">className</span>=<span class="value">"col-6"</span>&gt;</span>ant-select：<span class="tag">&lt;/<span class="title">label</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"col-14"</span>&gt;</span>
<span class="tag">&lt;<span class="title">Select</span> <span class="attribute">value</span>=<span class="value">"lucy"</span> <span class="attribute">style</span>=<span class="value">{{width:200}}</span> <span class="attribute">onChange</span>=<span class="value">{handleSelectChange}</span>&gt;</span>
<span class="tag">&lt;<span class="title">Option</span> <span class="attribute">value</span>=<span class="value">"jack"</span>&gt;</span>jack<span class="tag">&lt;/<span class="title">Option</span>&gt;</span>
<span class="tag">&lt;<span class="title">Option</span> <span class="attribute">value</span>=<span class="value">"lucy"</span>&gt;</span>lucy<span class="tag">&lt;/<span class="title">Option</span>&gt;</span>
<span class="tag">&lt;<span class="title">Option</span> <span class="attribute">value</span>=<span class="value">"disabled"</span> <span class="attribute">disabled</span>&gt;</span>disabled<span class="tag">&lt;/<span class="title">Option</span>&gt;</span>
<span class="tag">&lt;<span class="title">Option</span> <span class="attribute">value</span>=<span class="value">"yiminghe"</span>&gt;</span>yiminghe<span class="tag">&lt;/<span class="title">Option</span>&gt;</span>
<span class="tag">&lt;/<span class="title">Select</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"ant-form-item ant-form-item-compact"</span>&gt;</span>
<span class="tag">&lt;<span class="title">label</span> <span class="attribute">className</span>=<span class="value">"col-6"</span>&gt;</span>ant-checkbox：<span class="tag">&lt;/<span class="title">label</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"col-18"</span>&gt;</span>
<span class="tag">&lt;<span class="title">label</span> <span class="attribute">className</span>=<span class="value">"ant-checkbox-vertical"</span>&gt;</span>
<span class="tag">&lt;<span class="title">Checkbox</span> /&gt;</span> 选项一
<span class="tag">&lt;/<span class="title">label</span>&gt;</span>
<span class="tag">&lt;<span class="title">label</span> <span class="attribute">className</span>=<span class="value">"ant-checkbox-vertical"</span>&gt;</span>
<span class="tag">&lt;<span class="title">Checkbox</span> /&gt;</span> 选项二
<span class="tag">&lt;/<span class="title">label</span>&gt;</span>
<span class="tag">&lt;<span class="title">label</span> <span class="attribute">className</span>=<span class="value">"ant-checkbox-vertical"</span>&gt;</span>
<span class="tag">&lt;<span class="title">Checkbox</span> <span class="attribute">disabled</span>=<span class="value">{true}</span> /&gt;</span> 选项三（不可选）
<span class="tag">&lt;/<span class="title">label</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"ant-form-item ant-form-item-compact"</span>&gt;</span>
<span class="tag">&lt;<span class="title">label</span> <span class="attribute">className</span>=<span class="value">"col-6"</span>&gt;</span>ant-checkbox：<span class="tag">&lt;/<span class="title">label</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"col-18"</span>&gt;</span>
<span class="tag">&lt;<span class="title">label</span> <span class="attribute">className</span>=<span class="value">"ant-checkbox-inline"</span>&gt;</span>
<span class="tag">&lt;<span class="title">Checkbox</span> /&gt;</span>选项一
<span class="tag">&lt;/<span class="title">label</span>&gt;</span>
<span class="tag">&lt;<span class="title">label</span> <span class="attribute">className</span>=<span class="value">"ant-checkbox-inline"</span>&gt;</span>
<span class="tag">&lt;<span class="title">Checkbox</span> /&gt;</span>选项二
<span class="tag">&lt;/<span class="title">label</span>&gt;</span>
<span class="tag">&lt;<span class="title">label</span> <span class="attribute">className</span>=<span class="value">"ant-checkbox-inline"</span>&gt;</span>
<span class="tag">&lt;<span class="title">Checkbox</span> /&gt;</span>选项三
<span class="tag">&lt;/<span class="title">label</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"ant-form-item ant-form-item-compact"</span>&gt;</span>
<span class="tag">&lt;<span class="title">label</span> <span class="attribute">className</span>=<span class="value">"col-6"</span>&gt;</span>ant-radio：<span class="tag">&lt;/<span class="title">label</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"col-18"</span>&gt;</span>
<span class="tag">&lt;<span class="title">RadioGroup</span> <span class="attribute">value</span>=<span class="value">"b"</span>&gt;</span>
<span class="tag">&lt;<span class="title">Radio</span> <span class="attribute">value</span>=<span class="value">"a"</span>&gt;</span>A<span class="tag">&lt;/<span class="title">Radio</span>&gt;</span>
<span class="tag">&lt;<span class="title">Radio</span> <span class="attribute">value</span>=<span class="value">"b"</span>&gt;</span>B<span class="tag">&lt;/<span class="title">Radio</span>&gt;</span>
<span class="tag">&lt;<span class="title">Radio</span> <span class="attribute">value</span>=<span class="value">"c"</span>&gt;</span>C<span class="tag">&lt;/<span class="title">Radio</span>&gt;</span>
<span class="tag">&lt;<span class="title">Radio</span> <span class="attribute">value</span>=<span class="value">"d"</span>&gt;</span>D<span class="tag">&lt;/<span class="title">Radio</span>&gt;</span>
<span class="tag">&lt;/<span class="title">RadioGroup</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"ant-form-item ant-form-item-compact"</span>&gt;</span>
<span class="tag">&lt;<span class="title">label</span> <span class="attribute">className</span>=<span class="value">"col-6"</span> <span class="attribute">for</span>=<span class="value">"InputFile"</span>&gt;</span>头像：<span class="tag">&lt;/<span class="title">label</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"col-18"</span>&gt;</span>
<span class="tag">&lt;<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"file"</span> <span class="attribute">id</span>=<span class="value">"InputFile"</span> <span class="attribute">className</span>=<span class="value">"ant-upload"</span> /&gt;</span>
<span class="tag">&lt;<span class="title">p</span> <span class="attribute">className</span>=<span class="value">"ant-form-explain"</span>&gt;</span>请选择一个文件<span class="tag">&lt;/<span class="title">p</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">form</span>&gt;</span>
, document.getElementById('components-form-demo-form-controls'));</span></code></pre></div>
</div>
<div class="code-box-meta markdown">
<div class="code-box-title">表单控件</div>
<p>展示所有支持的表单控件。</p>
<p><code>注</code>： 输入框：只有正确设置了 type 属性的输入控件才能被赋予正确的样式。</p>
<span class="collapse anticon anticon-circle-o-right"></span>
</div>
</div><div class="code-box">
<div class="code-box-demo">
<div id="components-form-demo-inputs"></div>
<script>(function(){"use strict";
var Select = antd.Select;
var Option = Select.Option;
React.render(React.createElement(
"form",
{ className: "ant-form-horizontal" },
React.createElement(
"div",
{ className: "ant-form-item" },
React.createElement(
"label",
{ className: "col-6", "for": "site1" },
"标签输入框："
),
React.createElement(
"div",
{ className: "col-16" },
React.createElement(
"div",
{ className: "ant-input-group" },
React.createElement(
"span",
{ className: "ant-input-group-addon", id: "basic-addon1" },
"Http://"
),
React.createElement("input", { type: "text", id: "site1", className: "ant-input", value: "mysite.com" })
)
)
),
React.createElement(
"div",
{ className: "ant-form-item" },
React.createElement(
"label",
{ className: "col-6", "for": "site3" },
"标签输入框："
),
React.createElement(
"div",
{ className: "col-16" },
React.createElement(
"div",
{ className: "ant-input-group" },
React.createElement(
"span",
{ className: "ant-input-group-addon", id: "basic-addon3" },
"Http://"
),
React.createElement("input", { type: "text", className: "ant-input", id: "site3", value: "mysite" }),
React.createElement(
"span",
{ className: "ant-input-group-addon", id: "basic-addon4" },
".com"
)
)
)
),
React.createElement(
"div",
{ className: "ant-form-item" },
React.createElement(
"label",
{ className: "col-6", "for": "site4" },
"select 标签输入框："
),
React.createElement(
"div",
{ className: "col-16" },
React.createElement(
"div",
{ className: "ant-input-group" },
React.createElement("input", { type: "text", className: "ant-input", id: "site4", placeholder: "www.mysite" }),
React.createElement(
"div",
{ className: "ant-input-group-wrap" },
React.createElement(
Select,
{ value: ".com", style: { width: 65 } },
React.createElement(
Option,
{ value: ".com" },
".com"
),
React.createElement(
Option,
{ value: ".jp" },
".jp"
),
React.createElement(
Option,
{ value: ".cn" },
".cn"
),
React.createElement(
Option,
{ value: ".org" },
".org"
)
)
)
)
)
),
React.createElement(
"div",
{ className: "ant-form-item" },
React.createElement(
"label",
{ className: "col-6" },
"输入身份证："
),
React.createElement(
"div",
{ className: "col-16" },
React.createElement(
"div",
{ className: "ant-input-group" },
React.createElement(
"div",
{ className: "col-6" },
React.createElement("input", { className: "ant-input", type: "text", id: "certNo1" })
),
React.createElement(
"div",
{ className: "col-6" },
React.createElement("input", { className: "ant-input", type: "text", id: "certNo2" })
),
React.createElement(
"div",
{ className: "col-6" },
React.createElement("input", { className: "ant-input", type: "text", id: "certNo3" })
),
React.createElement(
"div",
{ className: "col-6" },
React.createElement("input", { className: "ant-input", type: "text", id: "certNo4" })
)
)
)
),
React.createElement(
"div",
{ className: "ant-form-item has-error" },
React.createElement(
"label",
{ className: "col-6" },
"电话号码："
),
React.createElement(
"div",
{ className: "col-16" },
React.createElement(
"div",
{ className: "row" },
React.createElement(
"div",
{ className: "col-4" },
React.createElement("input", { className: "ant-input", type: "text", id: "tel1", value: "086" })
),
React.createElement(
"div",
{ className: "col-2" },
React.createElement(
"p",
{ className: "ant-form-split" },
"--"
)
),
React.createElement(
"div",
{ className: "col-18" },
React.createElement(
"div",
{ className: "ant-input-group" },
React.createElement(
"div",
{ className: "col-8" },
React.createElement("input", { className: "ant-input", type: "text", id: "tel1" })
),
React.createElement(
"div",
{ className: "col-8" },
React.createElement("input", { className: "ant-input", type: "text", id: "tel2" })
),
React.createElement(
"div",
{ className: "col-8" },
React.createElement("input", { className: "ant-input", type: "text", id: "tel3" })
)
)
)
),
React.createElement(
"p",
{ className: "ant-form-explain" },
"请输入正确的电话号码"
)
)
)
), document.getElementById('components-form-demo-inputs'));})()</script><div class="highlight"><pre><code class="javascript"><span class="keyword">var</span> Select = antd.Select;
<span class="keyword">var</span> Option = Select.Option;
React.render(
<span class="xml"><span class="tag">&lt;<span class="title">form</span> <span class="attribute">className</span>=<span class="value">"ant-form-horizontal"</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"ant-form-item"</span>&gt;</span>
<span class="tag">&lt;<span class="title">label</span> <span class="attribute">className</span>=<span class="value">"col-6"</span> <span class="attribute">for</span>=<span class="value">"site1"</span>&gt;</span>标签输入框：<span class="tag">&lt;/<span class="title">label</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"col-16"</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"ant-input-group"</span>&gt;</span>
<span class="tag">&lt;<span class="title">span</span> <span class="attribute">className</span>=<span class="value">"ant-input-group-addon"</span> <span class="attribute">id</span>=<span class="value">"basic-addon1"</span>&gt;</span>Http://<span class="tag">&lt;/<span class="title">span</span>&gt;</span>
<span class="tag">&lt;<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"text"</span> <span class="attribute">id</span>=<span class="value">"site1"</span> <span class="attribute">className</span>=<span class="value">"ant-input"</span> <span class="attribute">value</span>=<span class="value">"mysite.com"</span> /&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"ant-form-item"</span>&gt;</span>
<span class="tag">&lt;<span class="title">label</span> <span class="attribute">className</span>=<span class="value">"col-6"</span> <span class="attribute">for</span>=<span class="value">"site3"</span>&gt;</span>标签输入框：<span class="tag">&lt;/<span class="title">label</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"col-16"</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"ant-input-group"</span>&gt;</span>
<span class="tag">&lt;<span class="title">span</span> <span class="attribute">className</span>=<span class="value">"ant-input-group-addon"</span> <span class="attribute">id</span>=<span class="value">"basic-addon3"</span>&gt;</span>Http://<span class="tag">&lt;/<span class="title">span</span>&gt;</span>
<span class="tag">&lt;<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"text"</span> <span class="attribute">className</span>=<span class="value">"ant-input"</span> <span class="attribute">id</span>=<span class="value">"site3"</span> <span class="attribute">value</span>=<span class="value">"mysite"</span> /&gt;</span>
<span class="tag">&lt;<span class="title">span</span> <span class="attribute">className</span>=<span class="value">"ant-input-group-addon"</span> <span class="attribute">id</span>=<span class="value">"basic-addon4"</span>&gt;</span>.com<span class="tag">&lt;/<span class="title">span</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"ant-form-item"</span>&gt;</span>
<span class="tag">&lt;<span class="title">label</span> <span class="attribute">className</span>=<span class="value">"col-6"</span> <span class="attribute">for</span>=<span class="value">"site4"</span>&gt;</span>select 标签输入框：<span class="tag">&lt;/<span class="title">label</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"col-16"</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"ant-input-group"</span>&gt;</span>
<span class="tag">&lt;<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"text"</span> <span class="attribute">className</span>=<span class="value">"ant-input"</span> <span class="attribute">id</span>=<span class="value">"site4"</span> <span class="attribute">placeholder</span>=<span class="value">"www.mysite"</span> /&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"ant-input-group-wrap"</span>&gt;</span>
<span class="tag">&lt;<span class="title">Select</span> <span class="attribute">value</span>=<span class="value">".com"</span> <span class="attribute">style</span>=<span class="value">{{width:65}}</span>&gt;</span>
<span class="tag">&lt;<span class="title">Option</span> <span class="attribute">value</span>=<span class="value">".com"</span>&gt;</span>.com<span class="tag">&lt;/<span class="title">Option</span>&gt;</span>
<span class="tag">&lt;<span class="title">Option</span> <span class="attribute">value</span>=<span class="value">".jp"</span>&gt;</span>.jp<span class="tag">&lt;/<span class="title">Option</span>&gt;</span>
<span class="tag">&lt;<span class="title">Option</span> <span class="attribute">value</span>=<span class="value">".cn"</span>&gt;</span>.cn<span class="tag">&lt;/<span class="title">Option</span>&gt;</span>
<span class="tag">&lt;<span class="title">Option</span> <span class="attribute">value</span>=<span class="value">".org"</span>&gt;</span>.org<span class="tag">&lt;/<span class="title">Option</span>&gt;</span>
<span class="tag">&lt;/<span class="title">Select</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"ant-form-item"</span>&gt;</span>
<span class="tag">&lt;<span class="title">label</span> <span class="attribute">className</span>=<span class="value">"col-6"</span>&gt;</span>输入身份证：<span class="tag">&lt;/<span class="title">label</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"col-16"</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"ant-input-group"</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"col-6"</span>&gt;</span>
<span class="tag">&lt;<span class="title">input</span> <span class="attribute">className</span>=<span class="value">"ant-input"</span> <span class="attribute">type</span>=<span class="value">"text"</span> <span class="attribute">id</span>=<span class="value">"certNo1"</span> /&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"col-6"</span>&gt;</span>
<span class="tag">&lt;<span class="title">input</span> <span class="attribute">className</span>=<span class="value">"ant-input"</span> <span class="attribute">type</span>=<span class="value">"text"</span> <span class="attribute">id</span>=<span class="value">"certNo2"</span> /&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"col-6"</span>&gt;</span>
<span class="tag">&lt;<span class="title">input</span> <span class="attribute">className</span>=<span class="value">"ant-input"</span> <span class="attribute">type</span>=<span class="value">"text"</span> <span class="attribute">id</span>=<span class="value">"certNo3"</span> /&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"col-6"</span>&gt;</span>
<span class="tag">&lt;<span class="title">input</span> <span class="attribute">className</span>=<span class="value">"ant-input"</span> <span class="attribute">type</span>=<span class="value">"text"</span> <span class="attribute">id</span>=<span class="value">"certNo4"</span> /&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"ant-form-item has-error"</span>&gt;</span>
<span class="tag">&lt;<span class="title">label</span> <span class="attribute">className</span>=<span class="value">"col-6"</span>&gt;</span>电话号码：<span class="tag">&lt;/<span class="title">label</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"col-16"</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"row"</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"col-4"</span>&gt;</span>
<span class="tag">&lt;<span class="title">input</span> <span class="attribute">className</span>=<span class="value">"ant-input"</span> <span class="attribute">type</span>=<span class="value">"text"</span> <span class="attribute">id</span>=<span class="value">"tel1"</span> <span class="attribute">value</span>=<span class="value">"086"</span> /&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"col-2"</span>&gt;</span>
<span class="tag">&lt;<span class="title">p</span> <span class="attribute">className</span>=<span class="value">"ant-form-split"</span>&gt;</span>--<span class="tag">&lt;/<span class="title">p</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"col-18"</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"ant-input-group"</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"col-8"</span>&gt;</span>
<span class="tag">&lt;<span class="title">input</span> <span class="attribute">className</span>=<span class="value">"ant-input"</span> <span class="attribute">type</span>=<span class="value">"text"</span> <span class="attribute">id</span>=<span class="value">"tel1"</span> /&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"col-8"</span>&gt;</span>
<span class="tag">&lt;<span class="title">input</span> <span class="attribute">className</span>=<span class="value">"ant-input"</span> <span class="attribute">type</span>=<span class="value">"text"</span> <span class="attribute">id</span>=<span class="value">"tel2"</span> /&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"col-8"</span>&gt;</span>
<span class="tag">&lt;<span class="title">input</span> <span class="attribute">className</span>=<span class="value">"ant-input"</span> <span class="attribute">type</span>=<span class="value">"text"</span> <span class="attribute">id</span>=<span class="value">"tel3"</span> /&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">p</span> <span class="attribute">className</span>=<span class="value">"ant-form-explain"</span>&gt;</span>请输入正确的电话号码<span class="tag">&lt;/<span class="title">p</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">form</span>&gt;</span>
, document.getElementById('components-form-demo-inputs'));</span></code></pre></div>
</div>
<div class="code-box-meta markdown">
<div class="code-box-title">Input 输入框集合</div>
<p>带标签的输入框：使用 <code>.ant-input-group</code> 类并结合 <code>.ant-input-group-addon</code> 类可以创建带标签的输入框。</p>
<p>输入框组合：<code>.ant-inputs</code> 类由多个 <code>.ant-inputs-item</code> 组成，使多个 Input 可以在一行显示出来。</p>
<span class="collapse anticon anticon-circle-o-right"></span>
</div>
</div><div class="code-box">
<div class="code-box-demo">
<div id="components-form-demo-mix"></div>
<script>(function(){"use strict";
var Select = antd.Select;
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 Slider = antd.Slider;
var menu = React.createElement(
Menu,
null,
React.createElement(
Menu.Item,
null,
React.createElement(
"a",
{ target: "_blank", href: "http://www.alipay.com/" },
".net"
)
),
React.createElement(
Menu.Item,
null,
React.createElement(
"a",
{ target: "_blank", href: "http://www.taobao.com/" },
".jp"
)
),
React.createElement(
Menu.Item,
null,
React.createElement(
"a",
{ target: "_blank", href: "http://www.tmall.com/" },
".org"
)
)
);
function handleSelectChange(value) {
console.log('selected ' + value);
}
function onInputNumberChange(v) {
console.log('changed', v);
}
React.render(React.createElement(
"form",
{ className: "ant-form-horizontal" },
React.createElement(
"div",
{ className: "ant-form-item" },
React.createElement(
"label",
{ className: "col-6", required: true },
"Input-Number:"
),
React.createElement(
"div",
{ className: "col-10" },
React.createElement(InputNumber, { min: 1, max: 10, defaultValue: 3, onChange: onInputNumberChange, style: { width: 100 } }),
React.createElement(
"span",
{ className: "ant-form-text" },
" 台机器"
)
)
),
React.createElement(
"div",
{ className: "ant-form-item ant-form-item-compact" },
React.createElement(
"label",
{ className: "col-6", required: true },
React.createElement("i", { className: "anticon anticon-exclamation-circle", style: { color: '#f60' } }),
" 我是标题:"
),
React.createElement(
"div",
{ className: "col-10" },
React.createElement(
"p",
{ className: "ant-form-text" },
"唧唧复唧唧木兰当户织呀"
),
React.createElement(
"p",
{ className: "ant-form-text" },
React.createElement(
"a",
{ href: "javascript:;" },
"链接文字"
)
)
)
),
React.createElement(
"div",
{ className: "ant-form-item" },
React.createElement(
"label",
{ "for": "", className: "col-6", required: true },
"Switch 开关:"
),
React.createElement(
"div",
{ className: "col-10" },
React.createElement(Switch, null)
)
),
React.createElement(
"div",
{ className: "ant-form-item" },
React.createElement(
"label",
{ "for": "", className: "col-6", required: true },
"Slider 滑动输入条:"
),
React.createElement(
"div",
{ className: "col-10" },
React.createElement(Slider, { marks: ["A", "B", "C", "D", "E", "F", "G"] })
)
),
React.createElement(
"div",
{ className: "ant-form-item" },
React.createElement(
"label",
{ "for": "", className: "col-6", required: true },
"Select 选择器:"
),
React.createElement(
"div",
{ className: "col-18" },
React.createElement(
Select,
{ value: "lucy", style: { width: 200 }, onChange: handleSelectChange },
React.createElement(
Option,
{ value: "jack" },
"jack"
),
React.createElement(
Option,
{ value: "lucy" },
"lucy"
),
React.createElement(
Option,
{ value: "disabled", disabled: true },
"disabled"
),
React.createElement(
Option,
{ value: "yiminghe" },
"yiminghe"
)
)
)
),
React.createElement(
"div",
{ className: "ant-form-item" },
React.createElement(
"label",
{ "for": "", className: "col-6", required: true },
"Datepicker:"
),
React.createElement(
"div",
{ className: "col-6" },
React.createElement(Datepicker, { value: "" })
),
React.createElement(
"div",
{ className: "col-2" },
React.createElement(
"p",
{ className: "ant-form-split" },
"--"
)
),
React.createElement(
"div",
{ className: "col-6" },
React.createElement(Datepicker, { value: "" })
)
),
React.createElement(
"div",
{ className: "ant-form-item has-error" },
React.createElement(
"label",
{ "for": "", className: "col-6", required: true },
"Datepicker 校验:"
),
React.createElement(
"div",
{ className: "col-6" },
React.createElement(Datepicker, { value: "" })
),
React.createElement(
"div",
{ className: "col-2" },
React.createElement(
"p",
{ className: "ant-form-split" },
"--"
)
),
React.createElement(
"div",
{ className: "col-6" },
React.createElement(Datepicker, { value: "" })
),
React.createElement(
"div",
{ className: "col-19 col-offset-6" },
React.createElement(
"p",
{ className: "ant-form-explain" },
"请输入正确选项"
)
)
)
), document.getElementById('components-form-demo-mix'));})()</script><div class="highlight"><pre><code class="javascript"><span class="keyword">var</span> Select = antd.Select;
<span class="keyword">var</span> Option = Select.Option;
<span class="keyword">var</span> InputNumber = antd.InputNumber;
<span class="keyword">var</span> Datepicker = antd.Datepicker;
<span class="keyword">var</span> Switch = antd.Switch;
<span class="keyword">var</span> Menu = antd.Menu;
<span class="keyword">var</span> Dropdown = antd.Dropdown;
<span class="keyword">var</span> Slider = antd.Slider;
<span class="keyword">var</span> menu = <span class="xml"><span class="tag">&lt;<span class="title">Menu</span>&gt;</span>
<span class="tag">&lt;<span class="title">Menu.Item</span>&gt;</span>
<span class="tag">&lt;<span class="title">a</span> <span class="attribute">target</span>=<span class="value">"_blank"</span> <span class="attribute">href</span>=<span class="value">"http://www.alipay.com/"</span>&gt;</span>.net<span class="tag">&lt;/<span class="title">a</span>&gt;</span>
<span class="tag">&lt;/<span class="title">Menu.Item</span>&gt;</span>
<span class="tag">&lt;<span class="title">Menu.Item</span>&gt;</span>
<span class="tag">&lt;<span class="title">a</span> <span class="attribute">target</span>=<span class="value">"_blank"</span> <span class="attribute">href</span>=<span class="value">"http://www.taobao.com/"</span>&gt;</span>.jp<span class="tag">&lt;/<span class="title">a</span>&gt;</span>
<span class="tag">&lt;/<span class="title">Menu.Item</span>&gt;</span>
<span class="tag">&lt;<span class="title">Menu.Item</span>&gt;</span>
<span class="tag">&lt;<span class="title">a</span> <span class="attribute">target</span>=<span class="value">"_blank"</span> <span class="attribute">href</span>=<span class="value">"http://www.tmall.com/"</span>&gt;</span>.org<span class="tag">&lt;/<span class="title">a</span>&gt;</span>
<span class="tag">&lt;/<span class="title">Menu.Item</span>&gt;</span>
<span class="tag">&lt;/<span class="title">Menu</span>&gt;</span>;</span>
<span class="function"><span class="keyword">function</span> <span class="title">handleSelectChange</span><span class="params">(value)</span> {</span>
console.log(<span class="string">'selected '</span> + value);
}
<span class="function"><span class="keyword">function</span> <span class="title">onInputNumberChange</span><span class="params">(v)</span>{</span>
console.log(<span class="string">'changed'</span>,v);
}
React.render(
<span class="xml"><span class="tag">&lt;<span class="title">form</span> <span class="attribute">className</span>=<span class="value">"ant-form-horizontal"</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"ant-form-item"</span>&gt;</span>
<span class="tag">&lt;<span class="title">label</span> <span class="attribute">className</span>=<span class="value">"col-6"</span> <span class="attribute">required</span>&gt;</span>Input-Number:<span class="tag">&lt;/<span class="title">label</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"col-10"</span>&gt;</span>
<span class="tag">&lt;<span class="title">InputNumber</span> <span class="attribute">min</span>=<span class="value">{1}</span> <span class="attribute">max</span>=<span class="value">{10}</span> <span class="attribute">defaultValue</span>=<span class="value">{3}</span> <span class="attribute">onChange</span>=<span class="value">{onInputNumberChange}</span> <span class="attribute">style</span>=<span class="value">{{width:100}}</span>/&gt;</span>
<span class="tag">&lt;<span class="title">span</span> <span class="attribute">className</span>=<span class="value">"ant-form-text"</span>&gt;</span> 台机器<span class="tag">&lt;/<span class="title">span</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"ant-form-item ant-form-item-compact"</span>&gt;</span>
<span class="tag">&lt;<span class="title">label</span> <span class="attribute">className</span>=<span class="value">"col-6"</span> <span class="attribute">required</span>&gt;</span>
<span class="tag">&lt;<span class="title">i</span> <span class="attribute">className</span>=<span class="value">"anticon anticon-exclamation-circle"</span> <span class="attribute">style</span>=<span class="value">{{color:</span> '#<span class="attribute">f60</span>'}}&gt;</span><span class="tag">&lt;/<span class="title">i</span>&gt;</span> 我是标题:
<span class="tag">&lt;/<span class="title">label</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"col-10"</span>&gt;</span>
<span class="tag">&lt;<span class="title">p</span> <span class="attribute">className</span>=<span class="value">"ant-form-text"</span>&gt;</span>唧唧复唧唧木兰当户织呀<span class="tag">&lt;/<span class="title">p</span>&gt;</span>
<span class="tag">&lt;<span class="title">p</span> <span class="attribute">className</span>=<span class="value">"ant-form-text"</span>&gt;</span>
<span class="tag">&lt;<span class="title">a</span> <span class="attribute">href</span>=<span class="value">"javascript:;"</span>&gt;</span>链接文字<span class="tag">&lt;/<span class="title">a</span>&gt;</span>
<span class="tag">&lt;/<span class="title">p</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"ant-form-item"</span>&gt;</span>
<span class="tag">&lt;<span class="title">label</span> <span class="attribute">for</span>=<span class="value">""</span> <span class="attribute">className</span>=<span class="value">"col-6"</span> <span class="attribute">required</span>&gt;</span>Switch 开关:<span class="tag">&lt;/<span class="title">label</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"col-10"</span>&gt;</span>
<span class="tag">&lt;<span class="title">Switch</span> /&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"ant-form-item"</span>&gt;</span>
<span class="tag">&lt;<span class="title">label</span> <span class="attribute">for</span>=<span class="value">""</span> <span class="attribute">className</span>=<span class="value">"col-6"</span> <span class="attribute">required</span>&gt;</span>Slider 滑动输入条:<span class="tag">&lt;/<span class="title">label</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"col-10"</span>&gt;</span>
<span class="tag">&lt;<span class="title">Slider</span> <span class="attribute">marks</span>=<span class="value">{["A","B","C","D","E","F","G"]}</span> /&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"ant-form-item"</span>&gt;</span>
<span class="tag">&lt;<span class="title">label</span> <span class="attribute">for</span>=<span class="value">""</span> <span class="attribute">className</span>=<span class="value">"col-6"</span> <span class="attribute">required</span>&gt;</span>Select 选择器:<span class="tag">&lt;/<span class="title">label</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"col-18"</span>&gt;</span>
<span class="tag">&lt;<span class="title">Select</span> <span class="attribute">value</span>=<span class="value">"lucy"</span> <span class="attribute">style</span>=<span class="value">{{width:200}}</span> <span class="attribute">onChange</span>=<span class="value">{handleSelectChange}</span>&gt;</span>
<span class="tag">&lt;<span class="title">Option</span> <span class="attribute">value</span>=<span class="value">"jack"</span>&gt;</span>jack<span class="tag">&lt;/<span class="title">Option</span>&gt;</span>
<span class="tag">&lt;<span class="title">Option</span> <span class="attribute">value</span>=<span class="value">"lucy"</span>&gt;</span>lucy<span class="tag">&lt;/<span class="title">Option</span>&gt;</span>
<span class="tag">&lt;<span class="title">Option</span> <span class="attribute">value</span>=<span class="value">"disabled"</span> <span class="attribute">disabled</span>&gt;</span>disabled<span class="tag">&lt;/<span class="title">Option</span>&gt;</span>
<span class="tag">&lt;<span class="title">Option</span> <span class="attribute">value</span>=<span class="value">"yiminghe"</span>&gt;</span>yiminghe<span class="tag">&lt;/<span class="title">Option</span>&gt;</span>
<span class="tag">&lt;/<span class="title">Select</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"ant-form-item"</span>&gt;</span>
<span class="tag">&lt;<span class="title">label</span> <span class="attribute">for</span>=<span class="value">""</span> <span class="attribute">className</span>=<span class="value">"col-6"</span> <span class="attribute">required</span>&gt;</span>Datepicker:<span class="tag">&lt;/<span class="title">label</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"col-6"</span>&gt;</span>
<span class="tag">&lt;<span class="title">Datepicker</span> <span class="attribute">value</span>=<span class="value">""</span> /&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"col-2"</span>&gt;</span>
<span class="tag">&lt;<span class="title">p</span> <span class="attribute">className</span>=<span class="value">"ant-form-split"</span>&gt;</span>--<span class="tag">&lt;/<span class="title">p</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"col-6"</span>&gt;</span>
<span class="tag">&lt;<span class="title">Datepicker</span> <span class="attribute">value</span>=<span class="value">""</span> /&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"ant-form-item has-error"</span>&gt;</span>
<span class="tag">&lt;<span class="title">label</span> <span class="attribute">for</span>=<span class="value">""</span> <span class="attribute">className</span>=<span class="value">"col-6"</span> <span class="attribute">required</span>&gt;</span>Datepicker 校验:<span class="tag">&lt;/<span class="title">label</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"col-6"</span>&gt;</span>
<span class="tag">&lt;<span class="title">Datepicker</span> <span class="attribute">value</span>=<span class="value">""</span> /&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"col-2"</span>&gt;</span>
<span class="tag">&lt;<span class="title">p</span> <span class="attribute">className</span>=<span class="value">"ant-form-split"</span>&gt;</span>--<span class="tag">&lt;/<span class="title">p</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"col-6"</span>&gt;</span>
<span class="tag">&lt;<span class="title">Datepicker</span> <span class="attribute">value</span>=<span class="value">""</span> /&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"col-19 col-offset-6"</span>&gt;</span>
<span class="tag">&lt;<span class="title">p</span> <span class="attribute">className</span>=<span class="value">"ant-form-explain"</span>&gt;</span>请输入正确选项<span class="tag">&lt;/<span class="title">p</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">form</span>&gt;</span>
, document.getElementById('components-form-demo-mix'));</span></code></pre></div>
</div>
<div class="code-box-meta markdown">
<div class="code-box-title">表单组合</div>
<p>集中营，展示和表单相关的其他 ant-design 组件。</p>
<span class="collapse anticon anticon-circle-o-right"></span>
</div>
</div>
</div>
</div>
</section>
</div><footer id="footer">
<ul>
<li>
<h2>GitHub</h2>
<a target="_blank "href="https://github.com/ant-design/ant-design">仓库</a>
<a target="_blank" href="https://github.com/ant-design/ant-design/tree/master/style">样式</a>
<a target="_blank" href="https://github.com/ant-design/antd-bin">开发工具</a>
</li>
<li>
<h2>关于我们</h2>
<a href="http://www.atatech.org/teams/79">博客 - Ant UED</a>
</li>
<li>
<h2>联系我们</h2>
<a target="_blank" href="https://github.com/ant-design/ant-design/issues">问题与建议 - Issues</a>
</li>
<li>
<h3>©2015 蚂蚁金服体验技术部出品</h3>
</li>
</ul>
</footer>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink