ant-design/components/form/demo/inputs.md

92 lines
3.0 KiB
Markdown
Raw Normal View History

2015-07-07 11:25:16 +08:00
# Input 输入框集合
2015-07-07 23:45:46 +08:00
- order: 5
2015-07-07 11:25:16 +08:00
2015-07-09 10:55:37 +08:00
带标签的输入框:使用 `.ant-input-group` 类并结合 `.ant-input-group-addon` `.ant-input-group-btn` 类可以创建带标签、按钮的 Input 输入框。
2015-07-08 20:15:19 +08:00
2015-07-09 10:55:37 +08:00
输入框组合:`.ant-inputs` 类由多个 `.ant-inputs-item` 组成,使多个 Input 可以在一行显示出来。
2015-07-08 20:15:19 +08:00
2015-07-09 10:55:37 +08:00
---
2015-07-08 20:15:19 +08:00
2015-07-09 10:55:37 +08:00
````html
<form class="ant-form-horizontal">
<div class="ant-form-item">
<label class="col-6" for="site1">标签输入框:</label>
<div class="col-16">
<div class="ant-input-group">
<span class="ant-input-group-addon" id="basic-addon1">Http://</span>
<input type="text" id="site1" class="ant-input" value="mysite.com" />
2015-07-07 11:25:16 +08:00
</div>
</div>
</div>
2015-07-09 10:55:37 +08:00
<div class="ant-form-item">
<label class="col-6" for="site3">标签输入框:</label>
<div class="col-16">
<div class="ant-input-group">
<span class="ant-input-group-addon" id="basic-addon3">Http://</span>
<input type="text" class="ant-input" id="site3" value="mysite" />
<span class="ant-input-group-addon" id="basic-addon4">.com</span>
2015-07-07 11:25:16 +08:00
</div>
</div>
</div>
2015-07-09 10:55:37 +08:00
<div class="ant-form-item">
<label class="col-6" for="site5">带按钮的输入框:</label>
<div class="col-16">
<div class="ant-input-group">
<input type="text" class="ant-input" id="site5" placeholder="Search for..." />
<div class="ant-input-group-btn">
<button class="ant-btn" type="button">GO!</button>
2015-07-07 11:25:16 +08:00
</div>
</div>
</div>
</div>
2015-07-09 10:55:37 +08:00
<div class="ant-form-item">
<label class="col-6">输入身份证:</label>
<div class="col-16">
2015-07-09 13:48:49 +08:00
<div class="ant-input-group">
<div class="col-6">
2015-07-09 10:55:37 +08:00
<input class="ant-input" type="text" id="certNo1" />
</div>
2015-07-09 13:48:49 +08:00
<div class="col-6">
2015-07-09 10:55:37 +08:00
<input class="ant-input" type="text" id="certNo2" />
</div>
2015-07-09 13:48:49 +08:00
<div class="col-6">
2015-07-09 10:55:37 +08:00
<input class="ant-input" type="text" id="certNo3" />
</div>
2015-07-09 13:48:49 +08:00
<div class="col-6">
2015-07-09 10:55:37 +08:00
<input class="ant-input" type="text" id="certNo4" />
2015-07-07 11:25:16 +08:00
</div>
</div>
</div>
</div>
2015-07-09 10:55:37 +08:00
<div class="ant-form-item has-error">
<label class="col-6">电话号码:</label>
<div class="col-16">
<div class="row">
<div class="col-4">
<input class="ant-input" type="text" id="tel1" value="086" />
2015-07-07 11:25:16 +08:00
</div>
2015-07-09 10:55:37 +08:00
<div class="col-2">
<p class="ant-form-split">--</p>
2015-07-07 11:25:16 +08:00
</div>
2015-07-09 10:55:37 +08:00
<div class="col-18">
2015-07-09 13:48:49 +08:00
<div class="ant-input-group">
<div class="col-6">
2015-07-09 10:55:37 +08:00
<input class="ant-input" type="text" id="tel1" />
</div>
2015-07-09 13:48:49 +08:00
<div class="col-6">
2015-07-09 10:55:37 +08:00
<input class="ant-input" type="text" id="tel2" />
</div>
2015-07-09 13:48:49 +08:00
<div class="col-6">
2015-07-09 10:55:37 +08:00
<input class="ant-input" type="text" id="tel3" />
</div>
</div>
2015-07-07 11:25:16 +08:00
</div>
2015-07-09 10:55:37 +08:00
<p class="ant-form-explain">请输入正确的电话号码</p>
2015-07-07 11:25:16 +08:00
</div>
</div>
</div>
2015-07-08 20:15:19 +08:00
</form>
2015-07-07 11:25:16 +08:00
````