Bootstrap 输入框 2

Bootstrap 表单输入（高级）

只读纯文本（静态控件）

如果你想在表单结构的样式中显示数据，但不需要输入字段（Input field）的样式，可以在 <input> 或其他元素（Element）上使用 .form-control-plaintext 类（Class）。这对于在表单标签（Form labels）旁显示静态信息非常有用。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Plaintext Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-3">
  <form>
    <div class="mb-3 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="someone@example.com">
      </div>
    </div>
    <div class="mb-3 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>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Bootstrap 表单控件状态

• 输入焦点： Bootstrap 会自动为获得焦点的输入框（Focused inputs）应用增强的轮廓样式（通常是一个 box-shadow 和调整的 border-color）。
• 禁用输入框： 向输入框添加 disabled 布尔属性（Boolean attribute），可以防止用户交互（User interaction）并使其呈现静止（muted）外观。
• 禁用字段集： 向 <fieldset> 添加 disabled 属性，可以禁用其中的所有控件（Controls）。
• 只读输入框： 向输入框添加 readonly 布尔属性，可以防止修改（Modification），尽管输入框仍然可以获得焦点并选择/复制（Selected/copied）其值（Value）。
• 验证状态： Bootstrap 提供了用于验证状态（Validation states）的类：.is-valid 和 .is-invalid。这些类通常在验证（客户端 Client-side 或服务器端 Server-side）后应用于表单控件。你可以使用 .valid-feedback 或 .invalid-feedback（或使用 .valid-tooltip、.invalid-tooltip 提供工具提示（Tooltip）风格的反馈）来提供反馈消息（Feedback messages）。
• 反馈图标： 当对属于包含反馈的输入组（Input group）的表单控件使用 .is-valid 或 .is-invalid 时，或者通过手动添加 SVGs，Bootstrap 可以自动添加反馈图标（Feedback icons）（例如，对勾 checkmark、感叹号 exclamation）。
• 视觉上隐藏的标签： 使用 .visually-hidden 类（以前是 .sr-only）可以在视觉上隐藏标签，同时使其对屏幕阅读器（Screen readers）保持可访问性（Accessible）。

以下示例演示了如何在表单中使用 Bootstrap 的网格系统（Grid system）进行布局（取代了旧的 .form-horizontal 概念），展示了其中一些表单控件状态：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Form States Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-3">
  <form>
    <div class="row mb-3">
      <label for="focusedInput" class="col-sm-2 col-form-label">Focused (auto)</label>
      <div class="col-sm-10">
        <input class="form-control" id="focusedInput" type="text" placeholder="Click to focus">
      </div>
    </div>

    <div class="row mb-3">
      <label for="disabledInput" class="col-sm-2 col-form-label">Disabled</label>
      <div class="col-sm-10">
        <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input" disabled>
      </div>
    </div>

    <fieldset disabled>
      <legend class="col-form-label col-sm-2 pt-0">Fieldset Disabled</legend>
      <div class="row mb-3">
        <label for="disabledTextInput" class="col-sm-2 col-form-label">Disabled Text</label>
        <div class="col-sm-10">
          <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input in fieldset">
        </div>
      </div>
      <div class="row mb-3">
        <label for="disabledSelect" class="col-sm-2 col-form-label">Disabled Select</label>
        <div class="col-sm-10">
          <select id="disabledSelect" class="form-select">
            <option>Disabled select</option>
          </select>
        </div>
      </div>
    </fieldset>

    <div class="row mb-3">
      <label for="inputValid" class="col-sm-2 col-form-label">Input with success</label>
      <div class="col-sm-10">
        <input type="text" class="form-control is-valid" id="inputValid" value="Looks good!">
        <div class="valid-feedback">
          Success! You've done it.
        </div>
      </div>
    </div>

    <div class="row mb-3">
      <label for="inputInvalid" class="col-sm-2 col-form-label">Input with error</label>
      <div class="col-sm-10">
        <input type="text" class="form-control is-invalid" id="inputInvalid" value="Oh no!">
        <div class="invalid-feedback">
          Please provide a valid input.
        </div>
      </div>
    </div>

    <div class="row mb-3">
      <label for="inputWithTooltipValid" class="col-sm-2 col-form-label">Valid (Tooltip)</label>
      <div class="col-sm-10 position-relative">
        <input type="text" class="form-control is-valid" id="inputWithTooltipValid" value="Correct">
        <div class="valid-tooltip">
          Looks good!
        </div>
      </div>
    </div>

    <div class="row mb-3">
      <label class="col-sm-2 col-form-label visually-hidden" for="hiddenLabelInput">Hidden Label</label>
      <div class="col-sm-10">
        <input class="form-control" id="hiddenLabelInput" type="text" placeholder="Input with visually hidden label">
      </div>
    </div>

  </form>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

这里是一个内联表单（Inline form）中一些表单控件状态的示例（使用 Flex 实用工具进行布局）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Inline Form States</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-3">
  <form class="row row-cols-lg-auto g-3 align-items-center">
    <div class="col-12">
      <label class="visually-hidden" for="inlineFormInputGroupUsername">Username</label>
      <div class="input-group">
        <div class="input-group-text">@</div>
        <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
      </div>
    </div>

    <div class="col-12">
      <label class="visually-hidden" for="inlineFormSelectPref">Preference</label>
      <select class="form-select" id="inlineFormSelectPref" disabled>
        <option selected>Choose...</option>
        <option value="1">One (disabled)</option>
      </select>
    </div>

    <div class="col-12">
        <input type="text" class="form-control is-valid" placeholder="Valid input" aria-label="Valid input">
    </div>

    <div class="col-12">
        <input type="text" class="form-control is-invalid" placeholder="Invalid input" aria-label="Invalid input">
    </div>

    <div class="col-12">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </form>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

有关表单验证和布局的全面详细信息，请参阅 Bootstrap 5 官方文档的“表单”和“验证”部分。