笙亿网络策划

Bootstrap 表单控件怎么用？

约 31 分钟读完 36 阅
文章导读
Previous Quiz Next 本章将讨论 Bootstrap 表单控件。可以使用自定义样式、大小、聚焦状态和其他特性来升级文本表单控件，如 <input> 和 <textarea>。
📋 目录
  1. A 尺寸
  2. B 表单文本
  3. C Disabled
  4. D Readonly
  5. E 只读纯文本
  6. F 文件输入
  7. G 使用尺寸的文件输入
  8. H 使用属性实现文件输入
  9. I 颜色
  10. J 数据列表
A A

Bootstrap - 表单控件

Previous
Quiz
Next

本章将讨论 Bootstrap 表单控件。可以使用自定义样式、大小、聚焦状态和其他特性来升级文本表单控件，如 <input> 和 <textarea>。

基本示例

使用 .form-control 和 .form-label 类来样式化表单控件。

示例

您可以使用 Edit & Run 选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Form Control</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="mb-3">
      <label for="formControlName" class="form-label">Full Name</label>
      <input type="text" class="form-control" id="formControlName" placeholder="name">
    </div>
    <div class="mb-3">
      <label for="formControlEmail" class="form-label">Email id</label>
      <input type="text" class="form-control" id="formControlEmail" placeholder="@example.com">
    </div>
    <div class="mb-3">
      <label for="formControlTextarea" class="form-label">Add a comment</label>
      <textarea class="form-control" id="formControlTextarea" rows="3"></textarea>
    </div>
    <button type="submit" class="btn btn-success">Submit</button>
  </body>
  </html>

尺寸

使用 .form-control-lg 和 .form-control-sm 等类来指定表单输入字段的大小。

示例

您可以使用 Edit & Run 选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Form Control</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <input class="form-control  form-control-lg mt-2" type="text" placeholder="Large size input box" aria-label=".form-control-lg example">
    <input class="form-control  mt-2" type="text" placeholder="Default size input box" aria-label="default input example">
    <input class="form-control  form-control-sm  mt-2" type="text" placeholder="Small size input box" aria-label=".form-control-sm example">
  </body>
  </html>

表单文本

  • 使用 .form-text 来创建块级或内联级表单文本。

  • 为块级元素上方的输入框添加了顶部边距，便于间距调整。

使用 aria-labelledby 或 aria-describedby 属性将表单文本与表单控件关联，以确保屏幕阅读器等辅助技术能够正确宣布。

示例

您可以使用 Edit & Run 选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Form Control</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <label for="inputUsername" class="form-label mt-2">Username</label>
    <input type="text" id="inputUsername" class="form-control" aria-labelledby="UsernameHelpBlock">
    <div id="UsernameHelpBlock" class="form-text">
      Your username 620 characters long and can be any combination of letters, numbers or symbols.
    </div>
    <label for="inputPassword" class="form-label mt-2">Password</label>
    <input type="text" id="inputPassword" class="form-control" aria-labelledby="PasswordHelpBlock">
    <div id="PasswordHelpBlock" class="form-text">
      must be 6-20 characters long.
    </div>

    <button type="submit" class="btn btn-primary mt-2">Submit</button>
  </body>
  </html>

内联文本可以使用任何典型的内联 HTML 元素（如 <span>、<small> 等），只需添加 .form-text class。

示例

您可以使用 Edit & Run 选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Form Control</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="row g-3 align-items-center mt-2">
      <div class="col-auto">
        <label for="inputUsername" class="col-form-label">Username</label>
      </div>
      <div class="col-auto">
        <input type="text" id="inputUsername" class="form-control" aria-labelledby="usernameHelpInline">
      </div>
      <div class="col-auto">
        <span id="usernameHelpInline" class="form-text">
          Username 620 characters long.
        </span>
      </div>
    </div>
  </body>
  </html>

Disabled

为了获得灰色外观并移除指针事件，请在 input 上使用 disabled 属性。

示例

您可以使用 Edit & Run 选项来编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Form Control</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <input class="form-control mt-2" type="text" placeholder="Disable Input Field" aria-label="Disabled input example" disabled>
  </body>
  </html>

Readonly

使用 readonly 属性来防止更改 input 的值。

示例

您可以使用 Edit & Run 选项来编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Form Control</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <input class="form-control mt-2" type="text" value="" aria-label="readonly example" readonly>
  </body>
  </html>

只读纯文本

.form-control-plaintext 创建一个作为纯文本的只读输入字段。这会移除样式并保留适当的 margin 和 padding。

示例

您可以使用 Edit & Run 选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Form Control</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="mb-3 row">
      <label for="name" class="col-sm-2 col-form-label">Name</label>
      <div class="col-sm-3">
        <input type="text" readonly class="form-control-plaintext" id="name" value="">
      </div>
    </div>
    <div class="mb-3 row">
      <label for="bootstrap" class="col-sm-2 col-form-label">Language</label>
      <div class="col-sm-3">
        <input type="text" class="form-control" id="bootstrap" placeholder="Bootstrap">
      </div>
    </div>
  </body>
  </html>

在只读纯文本内联模式下，您可以使表单标签和输入字段呈内联水平显示。

示例

您可以使用 Edit & Run 选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Form Control</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <form class="row g-2 mt-2">
      <div class="col-auto">
        <input type="text" readonly class="form-control-plaintext" id="staticName" value="">
      </div>
      <div class="col-auto">
        <input type="text" class="form-control" id="inputLanguage" placeholder="Bootstrap">
      </div>
    </form>
  </body>
  </html>

文件输入

文件输入用于在计算机上浏览文件作为输入。

使用尺寸的文件输入

  • 使用 .form-control-sm 使文件输入的尺寸更小。

  • 使用 .form-control-lg 使文件输入的尺寸更大。

示例

您可以使用 Edit & Run 选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Form Control</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="mb-3">
      <label for="fileInputsm" class="form-label">Small size file input</label>
      <input class="form-control form-control-sm" id="fileInputsm" type="file">
    </div>
    <div>
      <label for="fileInputlg" class="form-label">Large size file input</label>
      <input class="form-control form-control-lg" id="fileInputlg" type="file">
    </div>
  </body>
  </html>

使用属性实现文件输入

  • 无需显式定义 default 属性。

  • 使用 disabled 属性可使输入框呈灰色禁用外观并移除指针事件。

  • 使用 multiple 属性可同时接受多个文件输入。

示例

您可以使用 Edit & Run 选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Form Control</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="mb-3">
      <label for="defaultFileInput" class="form-label">Default file input</label>
      <input class="form-control" type="file" id="defaultFileInput">
    </div>
    <div class="mb-3">
      <label for="disabledFileInput" class="form-label">Disabled file input</label>
      <input class="form-control" type="file" id="disabledFileInput" disabled>
    </div>
    <div class="mb-3">
      <label for="multipleFileInput" class="form-label">Multiple files input</label>
      <input class="form-control" type="file" id="multipleFileInput" multiple>
    </div>
  </body>
  </html>

颜色

在 <input> 元素中使用 .form-control-color class 和 type="color" 属性，为输入字段添加颜色选择功能。

示例

您可以使用 Edit & Run 选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Form Control</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <label for="colorInput" class="form-label">Select a color</label>
    <input type="color" class="form-control form-control-color" id="colorInput" value="#228b22">
  </body>
  </html>

数据列表

您可以使用 datalists 创建一组 <option>，这些选项可通过 <input> 访问。浏览器和操作系统对 <datalist> 元素的样式支持有限且不一致。

示例

您可以使用 Edit & Run 选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Form Control</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <label for="dataList" class="form-label">Languages</label>
    <input class="form-control" list="datalistOptions" id="dataList" placeholder="Search languages...">
    <datalist id="datalistOptions">
      <option value="Bootstrap">
      <option value="HTML">
      <option value="CSS">
    </datalist>
  </body>
  </html>