使用自定义样式、大小调整、焦点状态等对文本表单控件（如 <input>s 和 <textarea>s）进行升级。

示例

<div class="mb-3">
  <label for="exampleFormControlInput1" class="form-label">邮箱地址</label>
  <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>
<div class="mb-3">
  <label for="exampleFormControlTextarea1" class="form-label">示例文本区域</label>
  <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>

尺寸

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

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg 示例">
<input class="form-control" type="text" placeholder="默认输入框" aria-label="默认输入框示例">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm 示例">

已禁用

在输入上添加 disabled 布尔属性，使其外观变灰并删除指针事件。

<input class="form-control" type="text" placeholder="禁用输入框" aria-label="禁用输入框示例" disabled>
<input class="form-control" type="text" value="禁用只读输入框" aria-label="禁用只读输入框示例" disabled readonly>

只读

在输入上添加只读布尔属性以防止修改输入的值。

<input class="form-control" type="text" value="此处为只读输入..." aria-label="只读输入框示例" readonly>

只读纯文本

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

<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@example.com">
  </div>
</div>
<div class="mb-3 row">
  <label for="inputPassword" class="col-sm-2 col-form-label">密码</label>
  <div class="col-sm-10">
    <input type="password" class="form-control" id="inputPassword">
  </div>
</div>

<form class="row g-3">
  <div class="col-auto">
    <label for="staticEmail2" class="visually-hidden">邮箱</label>
    <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="email@example.com">
  </div>
  <div class="col-auto">
    <label for="inputPassword2" class="visually-hidden">密码</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="密码">
  </div>
  <div class="col-auto">
    <button type="submit" class="btn btn-primary mb-3">确认身份</button>
  </div>
</form>

文件输入

<div class="mb-3">
  <label for="formFile" class="form-label">默认文件输入示例</label>
  <input class="form-control" type="file" id="formFile">
</div>
<div class="mb-3">
  <label for="formFileMultiple" class="form-label">多文件输入示例</label>
  <input class="form-control" type="file" id="formFileMultiple" multiple>
</div>
<div class="mb-3">
  <label for="formFileDisabled" class="form-label">禁用文件输入示例</label>
  <input class="form-control" type="file" id="formFileDisabled" disabled>
</div>
<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>

颜色

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

数据列表

数据列表允许您创建一组 <option>，可以从 <input> 中访问（并自动完成）。这些类似于 <select> 元素，但有更多的菜单样式限制和差异。虽然大多数浏览器和操作系统都包含对 <datalist> 元素的一些支持，但它们的样式充其量是不一致的。

详细了解对 datalist 元素的支持。

<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>