mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-20 12:28:10 +08:00
108 lines
3.1 KiB
Markdown
108 lines
3.1 KiB
Markdown
# 表单控件
|
||
|
||
- order: 2
|
||
|
||
展示所有支持的表单控件。
|
||
|
||
`注`： 输入框：只有正确设置了 type 属性的输入控件才能被赋予正确的样式。
|
||
|
||
---
|
||
|
||
````html
|
||
<form class="ant-form-horizontal">
|
||
<div class="ant-form-item">
|
||
<label class="col-6">输入框：</label>
|
||
<div class="col-18">
|
||
<input type="text" class="ant-input" placeholder="Please enter...">
|
||
</div>
|
||
</div>
|
||
<div class="ant-form-item">
|
||
<label class="col-6">文本域：</label>
|
||
<div class="col-18">
|
||
<textarea class="ant-input"></textarea>
|
||
</div>
|
||
</div>
|
||
<div class="ant-form-item">
|
||
<label class="col-6">下拉列表：</label>
|
||
<div class="col-18">
|
||
<select class="ant-input">
|
||
<option>选项一</option>
|
||
<option>选项二</option>
|
||
<option>选项三</option>
|
||
<option>选项四</option>
|
||
<option>选线五</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="ant-form-item">
|
||
<label class="col-6">checkbox 复选框：</label>
|
||
<div class="col-18">
|
||
<div>
|
||
<label>
|
||
<input type="checkbox" value="apple"> Apple
|
||
</label>
|
||
</div>
|
||
<!-- disabled checkbox -->
|
||
<div>
|
||
<label>
|
||
<input type="checkbox" value="banana" disabled> Banana(disabled)
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="ant-form-item">
|
||
<label class="col-6">内联的 checkbox：</label>
|
||
<div class="col-18">
|
||
<!-- 内联的checkbox -->
|
||
<label class="ant-checkbox-inline">
|
||
<input type="checkbox" id="inlineCheckbox1" value="Kevin"> Kevin
|
||
</label>
|
||
<label class="ant-checkbox-inline">
|
||
<input type="checkbox" id="inlineCheckbox2" value="Bob"> Bob
|
||
</label>
|
||
<label class="ant-checkbox-inline">
|
||
<input type="checkbox" id="inlineCheckbox3" value="Stuart"> Stuart
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div class="ant-form-item">
|
||
<label class="col-6">radio 单选框：</label>
|
||
<div class="col-18">
|
||
<div>
|
||
<label>
|
||
<input type="radio" name="radios" id="optionsRadios1" value="option1" checked> Apple
|
||
</label>
|
||
</div>
|
||
<!-- disabled radio -->
|
||
<div>
|
||
<label>
|
||
<input type="radio" name="radios" id="optionsRadios3" value="option3" disabled> Banana(disabled)
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="ant-form-item">
|
||
<label class="col-6">内联的 radio：</label>
|
||
<div class="col-18">
|
||
<!-- 内联的radio -->
|
||
<label class="ant-radio-inline">
|
||
<input type="radio" name="inlineRadios" id="inlineRadio1" value="Kevin"> Kevin
|
||
</label>
|
||
<label class="ant-radio-inline">
|
||
<input type="radio" name="inlineRadios" id="inlineRadio2" value="Stuart"> Stuart
|
||
</label>
|
||
<label class="ant-radio-inline">
|
||
<input type="radio" name="inlineRadios" id="inlineRadio3" value="Bob"> Bob
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div class="ant-form-item">
|
||
<label class="col-6" for="InputFile">头像：</label>
|
||
<div class="col-18">
|
||
<input type="file" id="InputFile" class="ant-upload">
|
||
<p class="ant-form-explain">请选择一个文件</p>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
````
|