14-表单的一些其他用法

文本域也可以用form-control：

<textarea class="form-control" rows="3"></textarea>Code language: HTML, XML (xml)

下拉列表：

<select class="form-control">
	<option>1</option>
	<option>2</option>
	<option>3</option>
	<option>4</option>
	<option>5</option>
</select>Code language: HTML, XML (xml)

多选框：

<select multiple class="form-control">
	<option>1</option>
	<option>2</option>
	<option>3</option>
	<option>4</option>
	<option>5</option>
</select>Code language: HTML, XML (xml)

禁用控件：

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>Code language: JavaScript (javascript)

禁用整个fieldset：

<fieldset disabled>Code language: HTML, XML (xml)

只读控件：

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>Code language: JavaScript (javascript)

如果需要我们的表单元素显示一些颜色，Bootstrap 对表单控件的校验状态，如 error、warning 和 success 状态，都定义了样式。使用时，添加 .has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。可以做到表单验证：

<div class="form-group has-warning"> 
	<label class="control-label" for="inputWarning1">Input with warning</label> 
	<input type="text" class="form-control" id="inputWarning1">
</div>Code language: JavaScript (javascript)

如果想要设置我们的表单的宽度，可以借助bootstrap的栅格系统就可以做到了。

控件尺寸，比如希望表单高一点：

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">Code language: HTML, XML (xml)

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
    </div>
  </div>
</form>Code language: JavaScript (javascript)