表单_被支持的控件

表单布局实例中展示了其所支持的标准表单控件

输入框

包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color

必须添加类型声明

只有正确设置了 type 属性的输入控件才能被赋予正确的样式。

xxxxxxxxxx
<input type="text" class="form-control" placeholder="Text input">

文本域

支持多行文本的表单控件。可根据需要改变 rows 属性

xxxxxxxxxx
<textarea class="form-control" rows="3"></textarea>

多选和单选框

多选框（checkbox）用于选择列表中的一个或多个选项，而单选框（radio）用于从多个选项中只选择一个

​x
<div class="checkbox">
    <label>
        <input type="checkbox" value="">
        Option one is this and that&mdash;be sure to include why it's great
    </label>
</div>
<div class="checkbox disabled">
    <label>
        <input type="checkbox" value="" disabled>
        Option two is disabled
    </label>
</div>

<div class="radio">
    <label>
        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
        Option one is this and that&mdash;be sure to include why it's great
    </label>
</div>
<div class="radio">
    <label>
        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
        Option two can be something else and selecting it will deselect option one
    </label>
</div>
<div class="radio disabled">
    <label>
        <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
        Option three is disabled
    </label>
</div>

下拉列表（select）

注意，很多原生选择菜单 - 即在 Safari 和 Chrome 中 - 的圆角是无法通过修改 border-radius 属性来改变的

xxxxxxxxxx
<select class="form-control">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>

静态控件

如果需要在表单中将一行纯文本和 label 元素放置于同一行，为 <p> 元素添加 .form-control-static 类即可

xxxxxxxxxx
<form class="form-horizontal">
    <div class="form-group">
        <label class="col-sm-2 control-label">Email</label>
        <div class="col-sm-10">
            <p class="form-control-static">email@example.com</p>
        </div>
    </div>
    <div class="form-group">
        <label for="inputPassword" class="col-sm-2 control-label">Password</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="inputPassword" placeholder="Password">
        </div>
    </div>
</form>

实时效果反馈

1. 下列那个类可以让表单文本和标题在同一行：

A rows

B form-group

C border-radius

D form-control-static

答案

1=>D