副队长BootStrap5探究(7)--表单输入框 form control

点此查看 所有教程、项目、源码导航

文章目录

[1. 开篇介绍与环境引入](#1. 开篇介绍与环境引入)
- [1.1 本章节学习背景](#1.1 本章节学习背景)
- [1.2 引入 Bootstrap 5](#1.2 引入 Bootstrap 5)
[2. form-control 使用方法](#2. form-control 使用方法)
- [2.1 基础文本输入框](#2.1 基础文本输入框)
- [2.2 文本域 textarea](#2.2 文本域 textarea)
- [2.3 尺寸控制](#2.3 尺寸控制)
- [2.4 只读与禁用](#2.4 只读与禁用)
[3. 底层实现关键点解析](#3. 底层实现关键点解析)
- [3.1 form-control 基础样式](#3.1 form-control 基础样式)
- [3.2 聚焦状态](#3.2 聚焦状态)
- [3.3 禁用状态](#3.3 禁用状态)
- [3.4 form-label](#3.4 form-label)
[4. 小结](#4. 小结)

1. 开篇介绍与环境引入

1.1 本章节学习背景

表单是前后端交互非常核心的载体，用来收集用户输入的文本、邮箱、密码等信息。

原生 input 在不同浏览器里面样式差异很大，大小、边框、内边距很难统一。

Bootstrap 通过 form-control 这一套类，统一所有输入控件的基础外观，同时提供尺寸、只读、禁用、验证状态等配套样式，开发的时候不用反复手写重置样式。

按照本系列固定的学习思路，我们不会仅仅记住类名、复制代码。先学会 form-control 的使用方式，之后通过精简的 CSS 复刻，看懂它背后依靠哪些 CSS 特性实现，反过来巩固我们的 CSS 基础，完善前端技术体系。

1.2 引入 Bootstrap 5

这里着重强调：引入 Bootstrap，本质就是引用别人提前写好的 CSS 类库以及配套的 JS，不需要把完整源码复制到页面当中，通过外链加载即可。想要使用 form-control，只需要引入 Bootstrap 的 CSS 文件。

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- Bootstrap 5 CSS -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.8/css/bootstrap.min.css">
</head>

<body>
    <!-- Bootstrap JS + Popper，用于部分交互 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.8/js/bootstrap.bundle.min.js"></script>
</body>

</html>

2. form-control 使用方法

2.1 基础文本输入框

给 input 添加 form-control，就可以得到标准化的输入框，支持 type 为 text、email、password 等类型。

html 复制代码

<div class="mb-3">
  <label class="form-label">用户名</label>
  <input type="text" class="form-control" placeholder="请输入用户名">
</div>
<div class="mb-3">
  <label class="form-label">邮箱</label>
  <input type="email" class="form-control" placeholder="请输入邮箱">
</div>

搭配 form-label 用来修饰标签，mb-3 用来设置下方外边距，拉开各个表单项距离。效果：

2.2 文本域 textarea

textarea 同样可以使用 form-control，不需要额外修改别的类。

html 复制代码

<div class="mb-3">
  <label class="form-label">个人简介</label>
  <textarea class="form-control" rows="3" placeholder="简单介绍自己"></textarea>
</div>

效果：

2.3 尺寸控制

通过 form-control-lg 和 form-control-sm，切换大号、小号输入框。

html 复制代码

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

效果：

2.4 只读与禁用

readonly 表示内容只读，用户不能修改但是可以选中复制；disabled 代表禁用，无法聚焦、无法操作。

html 复制代码

<input type="text" class="form-control" value="只读内容" readonly>
<input type="text" class="form-control" value="禁用内容" disabled>

效果：

3. 底层实现关键点解析

下面是精简复刻版本，去掉大量浏览器兼容代码，只保留核心逻辑。

使用上面的HTML代码，加下面自己写的CSS，能得到基本类似的效果，大家可以尝试下。

3.1 form-control 基础样式

css 复制代码

.form-control {
  /* 相对定位，为伪元素、后续提示预留位置 */
  position: relative;
  /* 宽度撑满父容器 */
  width: 100%;
  /* 设置合适的内边距，保证文字不会贴住边框 */
  padding: 0.375rem 0.75rem;
  /* 设置字体大小和行高，统一视觉比例 */
  font-size: 1rem;
  line-height: 1.5;
  /* 设置边框，统一灰色边框 */
  border: 1px solid #ced4da;
  /* 设置圆角 */
  border-radius: 0.375rem;
  /* 开启过渡，聚焦的时候边框平滑变色 */
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

当前效果：

3.2 聚焦状态

css 复制代码

.form-control:focus {
  /* 移除原生默认的丑陋外轮廓 */
  outline: 0;
  /* 修改聚焦时边框颜色 */
  border-color: #86b7fe;
  /* 添加柔和外发光，作为聚焦提示 */
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

聚焦效果：

3.3 禁用状态

css 复制代码

.form-control:disabled {
  /* 修改背景色，直观表示不可操作 */
  background-color: #e9ecef;
  /* 修改文字颜色，降低对比度 */
  color: #6c757d;
  /* 设置鼠标为禁止样式 */
  cursor: not-allowed;
}

禁用效果：

3.4 form-label

css 复制代码

.form-label {
  /* 设置块级，单独占一行 */
  display: block;
  /* 和下方输入框拉开距离 */
  margin-bottom: 0.5rem;
}

加上后效果：

4. 小结

form-control 是表单体系最基础的组件，它的核心目标就是抹平各个浏览器原生控件样式差异。

form-control 通过统一内边距、边框、圆角和过渡效果，让输入框外观保持一致；聚焦时依靠 box-shadow 实现高亮提示，替代浏览器默认 outline；
readonly 和 disabled 在体验上有明显区别，只读可以复制，禁用完全无法交互；
form-control-lg、form-control-sm 通过修改内边距和字号实现大小切换；
textarea 同样复用 form-control，不需要额外一套独立样式；
如果后续做表单校验，也会在 form-control 的基础上追加成功、失败的边框与提示样式。