【Bootstrap V4系列】学习入门教程之 组件-表单（Forms）

表单（Forms）

用于创建各种表单的表单控件样式、布局选项和自定义组件的示例和使用指南。

一、Overview

Bootstrap的表单控件通过类扩展了我们重新启动的表单样式。使用这些类可以选择进入其自定义显示，以便在浏览器和设备之间实现更一致的渲染。

确保在所有输入上使用适当的类型属性（例如，电子邮件地址为电子邮件，数字信息为数字），以利用电子邮件验证、数字选择等较新的输入控件。

这里有一个快速的例子来演示Bootstrap的表单样式。

<!--Overview-->
<form><div class="form-group"><label for="exampleInputEmail1">Email address</label><input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"><small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small></div><div class="form-group"><label for="exampleInputPassword1">Password</label><input type="password" class="form-control" id="exampleInputPassword1"></div><div class="form-group form-check"><input type="checkbox" class="form-check-input" id="exampleCheck1"><label class="form-check-label" for="exampleCheck1">Check me out</label></div><button type="submit" class="btn btn-primary">Submit</button>
</form>

页面展示效果：

二、Form controls 表单控件

文本形式控件（如<input>s、<select>s和<textarea>s）使用.form-control 控件类进行样式设置。包括一般外观、焦点状态、大小等样式。

<form><div class="form-group"><label for="exampleFormControlInput1">Email address</label><input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com"></div><div class="form-group"><label for="exampleFormControlSelect1">Example select</label><select class="form-control" id="exampleFormControlSelect1"><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select></div><div class="form-group"><label for="exampleFormControlSelect2">Example multiple select</label><select multiple class="form-control" id="exampleFormControlSelect2"><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select></div><div class="form-group"><label for="exampleFormControlTextarea1">Example textarea</label><textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea></div>
</form>

页面展示效果：

对于文件输入，将.form-control控件替换为.form-control-file控件文件。

<form><div class="form-group"><label for="exampleFormControlFile1">Example file input</label><input type="file" class="form-control-file" id="exampleFormControlFile1"></div>
</form>

页面展示效果：

2.1 Sizing 尺寸

使用.form-control-lg和.form control-sm等类设置高度。

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">

页面展示效果：

2.2 Readonly 只读

在输入上添加readonly 只读布尔属性，以防止修改输入的值。只读输入看起来更轻（就像禁用输入一样），但保留标准光标。

<input class="form-control" type="text" placeholder="Readonly input here..." readonly>

页面展示效果：

2.3 Readonly plain text 只读纯文本

如果你想让表单中的<input readonly>元素设置为纯文本样式，请使用.form-control-plaintext 控件纯文本类删除默认的表单字段样式，并保留正确的边距和填充。

<form><div class="form-group row"><label for="staticEmail" class="col-sm-2 col-form-label">Email</label><div class="col-sm-10"><input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com"></div></div><div class="form-group row"><label for="inputPassword" class="col-sm-2 col-form-label">Password</label><div class="col-sm-10"><input type="password" class="form-control" id="inputPassword"></div></div>
</form>

页面展示效果：

使用内联样式

<form class="form-inline"><div class="form-group mb-2"><label for="staticEmail2" class="sr-only">Email</label><input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="email@example.com"></div><div class="form-group mx-sm-3 mb-2"><label for="inputPassword2" class="sr-only">Password</label><input type="password" class="form-control" id="inputPassword2" placeholder="Password"></div><button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>

页面展示效果：

三、Checkboxes and radios 复选框和单选框

默认复选框和单选在.form-check的帮助下得到了改进，它是一个用于两种输入类型的类，可以改进其HTML元素的布局和行为。复选框用于选择列表中的一个或多个选项，而单选框用于从多个选项中选择一个。

支持禁用复选框和单选框。disabled属性将应用较浅的颜色来帮助指示输入的状态。

复选框和单选按钮支持基于HTML的表单验证，并提供简洁、可访问的标签。因此，我们的<input>s和<label>s是兄弟元素，而不是<label>中的<input>。这稍显冗长，因为您必须指定id和for属性来关联<input>和<label>。

3.1 Default (stacked) 默认值（堆叠）

默认情况下，任何数量的直接同级复选框和单选框都将垂直堆叠，并与.form-check复选框适当间隔。

<div class="form-check"><input class="form-check-input" type="checkbox" value="" id="defaultCheck1"><label class="form-check-label" for="defaultCheck1">Default checkbox</label>
</div>
<div class="form-check"><input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled><label class="form-check-label" for="defaultCheck2">Disabled checkbox</label>
</div>

页面展示效果：

<div class="form-check"><input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked><label class="form-check-label" for="exampleRadios1">Default radio</label>
</div>
<div class="form-check"><input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2"><label class="form-check-label" for="exampleRadios2">Second default radio</label>
</div>
<div class="form-check"><input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled><label class="form-check-label" for="exampleRadios3">Disabled radio</label>
</div>

页面展示效果：

3.2 Inline 内联

通过将.form-check-inline 复选框内联到任何 .form-check复选标记中，将复选框或单选项分组到同一水平行上。

<div class="form-check form-check-inline"><input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1"><label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline"><input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2"><label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline"><input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled><label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>

页面展示效果：

<div class="form-check form-check-inline"><input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"><label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline"><input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"><label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline"><input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled><label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>

页面展示效果：