Bootstrap - 表单控件：初学者的全面指南

你好，未来的网页开发者们！我很高兴与你们一起踏上这段旅程，探索Bootstrap表单控件的奇妙世界。作为一个教授计算机科学超过十年的老手，我可以向你保证，掌握这些概念将在你的网页开发职业生涯中带来游戏性的改变。那么，让我们开始吧！

Bootstrap表单控件简介

在我们开始之前，让我分享一个小故事。我曾经有一个学生，他在创建表单时遇到了困难。他会花费数小时尝试对齐输入框并使其看起来美观。然后，他发现了Bootstrap表单控件，就像在他的头顶上点亮了一盏灯一样！这就是Bootstrap的力量——它让复杂的事情变得简单。

Bootstrap表单控件是预先样式的元素，允许用户在您的网页上输入数据。它们是响应式的、可定制的，并且非常容易使用。让我们详细探索每一种类型。

尺寸

你要学习的第一件事是如何调整表单控件的大小。Bootstrap提供了三种大小：小、默认和大型。

<input class="form-control form-control-lg" type="text" placeholder="大型输入">
<input class="form-control" type="text" placeholder="默认输入">
<input class="form-control form-control-sm" type="text" placeholder="小型输入">

在这个例子中，我们创建了三个不同大小的输入字段。form-control类是Bootstrap中所有表单控件的基类。添加form-control-lg使其变大，而form-control-sm使其变小。

表单文本

有时，您需要提供有关表单字段的额外信息。这时，表单文本就派上用场了。

<label for="inputPassword5" class="form-label">密码</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<div id="passwordHelpBlock" class="form-text">
您的密码必须是8-20个字符长，包含字母和数字，且不能包含空格、特殊字符或表情符号。
</div>

在这里，我们在密码输入下方添加了一些帮助文本。form-text类适当地样式化这段文本，使其作为额外信息突出显示。

禁用

可能会有一些情况，您想要禁用某些表单控件。Bootstrap让这件事变得简单：

<input class="form-control" type="text" placeholder="禁用输入" aria-label="禁用输入示例" disabled>
<textarea class="form-control" placeholder="禁用文本区域" aria-label="禁用文本区域示例" disabled></textarea>

通过添加disabled属性，我们使这些表单控件不可编辑。它们将显示为灰色，向用户指示它们不可被修改。

只读

只读输入与禁用的输入类似，但它们仍然可以被聚焦和选择。

<input class="form-control" type="text" value="这里的只读输入..." aria-label="只读输入示例" readonly>

readonly属性使输入不可编辑，但仍允许其被聚焦。

只读纯文本

有时，您想要将信息作为表单的一部分显示，而不是使其成为可编辑字段。这时，只读纯文本就派上用场了：

<div class="mb-3 row">
<label for="staticEmail" class="col-sm-2 col-form-label">邮箱</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="[email protected]">
</div>
</div>

form-control-plaintext类移除了默认的表单字段样式，使其看起来像纯文本。

文件输入

文件输入允许用户上传文件。下面是如何创建一个文件输入：

<div class="mb-3">
<label for="formFile" class="form-label">默认文件输入示例</label>
<input class="form-control" type="file" id="formFile">
</div>

这创建了一个与Bootstrap其他表单控件样式一致的文件输入字段。

使用尺寸的文件输入

就像其他表单控件一样，文件输入也可以调整大小：

<div class="mb-3">
<label for="formFileSm" class="form-label">小型文件输入示例</label>
<input class="form-control form-control-sm" id="formFileSm" type="file">
</div>
<div>
<label for="formFileLg" class="form-label">大型文件输入示例</label>
<input class="form-control form-control-lg" id="formFileLg" type="file">
</div>

我们使用了之前相同的尺寸类：form-control-sm和form-control-lg。

使用属性的文件输入

您还可以使用属性来自定义文件输入：

<div class="mb-3">
<label for="formFileMultiple" class="form-label">多文件输入示例</label>
<input class="form-control" type="file" id="formFileMultiple" multiple>
</div>

multiple属性允许用户选择多个文件。

颜色

Bootstrap甚至支持颜色输入：

<label for="exampleColorInput" class="form-label">颜色选择器</label>
<input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="选择你的颜色">

这创建了一个颜色选择器输入，与其他Bootstrap表单控件样式一致。

数据列表

数据列表为输入字段提供了一组预定义的选项：

<label for="exampleDataList" class="form-label">数据列表示例</label>
<input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="键入以搜索...">
<datalist id="datalistOptions">
<option value="旧金山">
<option value="纽约">
<option value="西雅图">
<option value="洛杉矶">
<option value="芝加哥">
</datalist>

这创建了一个输入字段，带有来自数据列表的自动完成建议。

Bootstrap表单控件方法总结

下面是我们所涵盖的方法的表格总结：

方法	描述
尺寸	使用类如form-control-lg和form-control-sm调整表单控件的大小
表单文本	使用form-text类为表单控件添加额外的文本
禁用	使用disabled属性使表单控件不可编辑
只读	使用readonly属性使表单控件不可编辑但可聚焦
只读纯文本	使用form-control-plaintext类显示信息为纯文本
文件输入	使用type="file"创建文件上传输入
文件输入大小	使用尺寸类调整文件输入的大小
文件输入属性	使用属性如multiple自定义文件输入
颜色	使用type="color"创建颜色选择器输入
数据列表	使用<datalist>元素提供自动完成建议

就这样！您刚刚学习了Bootstrap表单控件的内外。记住，熟能生巧。尝试将这些元素融入到您自己的项目中，很快您就能轻松创建出美丽、响应式的表单。

祝编码愉快，未来的网页开发者们！

Credits: Image by storyset