本篇介绍几种常用的表单组件:输入框、文本框、选择框、单选框和多选框。
输入框代码演示:
<div style="width: 200px;">
<input type="text" class="form-control" />
</div>
当输入框需要配合标识符或按钮组合使用时,可以使用输入框组,用.input-group表示输入框组的样式,.input-group-addon表示标识符样式,input-group-btn表示按钮样式。代码演示:
<div class="input-group" style="width: 200px;">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" />
</div>
<div class="input-group" style="width: 200px;">
<input type="text" class="form-control" />
<span class="input-group-btn">
<button class="btn btn-primary">搜索</button>
</span>
</div>
效果图:
文本框常用于博客留言或评价等功能,代码演示:
<div class="form-group">
<label for="name">文本框</label>
<textarea class="form-control" rows="3" style="resize: none; width: 500px;"></textarea>
</div>
效果图:
选择框,用于分类选择,演示代码:
<div>
<select class="form-control" style="width: 100px;font-size: 16px;">
<option>请选择</option>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
<option>选项4</option>
</select>
</div>
效果图:
如果想更换选择框的指向箭头,可以通过修改样式实现,演示代码:
<style>
select {
width: 75px;
height: 32px;
font-size: 16px;
border: solid 1px #DDDDDD;
/*很关键:将默认的select选择框样式清除*/
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
/*在选择框的最右侧中间显示小箭头图片*/
background: url("./arrow.png") no-repeat scroll right center transparent;
/*为下拉小箭头留出一点位置,避免被文字覆盖*/
padding-right: 20px;
}
/*清除ie的默认选择框样式清除,隐藏下拉箭头*/
select::-ms-expand {
display: none;
}
</style>
<div>
<select title="">
<option value="0" disabled="disabled" selected="selected">请选择</option>
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>
</div>
效果图:
单选框演示代码:
<p>垂直方向:</p>
<div class="radio">
<label>
<input type="radio" name="radiosbox" id="radiosbox1" value="option1" checked> 选项 1
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="radiosbox" id="radiosbox2" value="option2">选项 2
</label>
</div>
<p>水平方向:</p>
<div>
<label class="radio-inline">
<input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked> 选项 1
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadiosinline" id="optionsRadios4" value="option2"> 选项 2
</label>
</div>
效果图:
复选框演示代码:
<p>垂直方向:</p>
<div class="checkbox">
<label><input type="checkbox" value="option1">选项 1</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="option2">选项 2</label>
</div>
<p>水平方向:</p>
<div>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 选项 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 选项 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 选项 3
</label>
</div>
效果图: