Bootstrap 5 保姆级教程（十五）：表单-阿里云开发者社区

一、表单

1.1 堆叠表单

以下实例使用两个输入框，一个复选框，一个提交按钮来创建堆叠表单：

<div class="container mt-3">
  <h2>堆叠表单</h2>
  <form action="">
    <div class="mb-3 mt-3">
    <label for="email" class="form-label">Email:</label>
    <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
    </div>
    <div class="mb-3">
    <label for="pwd" class="form-label">Password:</label>
    <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
    </div>
    <div class="form-check mb-3">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox" name="remember"> Remember me
    </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>

1.2 内联表单

如果您希望表单元素并排显示，请使用 .row 和 .col，以下实例的两个输入框并排显示，创建内联表单：

<div class="container mt-3">
  <h2>内联表单</h2>
  <p>如果您希望表单元素并排显示，请使用 .row 和 .col：</p>
  <form>
    <div class="row">
      <div class="col">
        <input type="text" class="form-control" placeholder="Enter email" name="email">
      </div>
      <div class="col">
        <input type="password" class="form-control" placeholder="Enter password" name="pswd">
      </div>
    </div>
  </form>
</div>

1.3 文本框

使用 textarea 标签创建文本框提交表单，使用 .form-control 类渲染文本框 textareas 标签:

<div class="container mt-3">
  <h2>文本框</h2>
  <p>使用 .form-control 类渲染文本框 textareas 标签:</p>
  <form action="/action_page.php">
    <div class="mb-3 mt-3">
      <label for="comment">请输入评论：</label>
      <textarea class="form-control" rows="5" id="comment" name="text"></textarea>
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
  </form>
</div>

1.4 输入框大小

我们可以通过在 .form-control 输入框中使用 .form-control-lg 或 .form-control-sm 类来设置输入框的大小:

<div class="container mt-3">
  <h2>输入框大小</h2>
  <p>我们可以通过在 .form-control 输入框中使用 .form-control-lg 或 .form-control-sm 类来设置输入框的大小:</p>
  <form>
    <input type="text" class="form-control form-control-lg" placeholder="大号输入框">
  <input type="text" class="form-control mt-3" placeholder="正常大小输入框">
  <input type="text" class="form-control form-control-sm mt-3" placeholder="小号输入框">
  </form>
</div>

1.5 禁用/只读表单

使用 disabled/readonly 属性设置输入框禁用/只读：

<div class="container mt-3">
  <h2>禁用/只读表单</h2>
  <p>使用 disabled/readonly 属性设置输入框禁用/只读：</p>
  <form>
    <input type="text" class="form-control" placeholder="Normal input">
  <input type="text" class="form-control mt-3" placeholder="Disabled input" disabled>
  <input type="text" class="form-control mt-3" placeholder="Readonly input" readonly>
  </form>
</div>

1.6 纯文本输入

使用 .form-control-plaintext 类可以删除输入框的边框：

<div class="container mt-3">
  <h2>纯文本输入</h2>
  <p>使用 .form-control-plaintext 类可以删除输入框的边框：</p>
  <form>
    <input type="text" class="form-control-plaintext" placeholder="无边框的输入框">
  <input type="text" class="form-control" placeholder="正常输入框">
  </form>
</div>

1.7 取色器

使用 .form-control-color 类可以创建一个取色器：

<div class="container mt-3">
  <h2>取色器</h2>
  <p>使用 .form-control-color 类可以创建一个取色器：</p>
  <form>
    <input type="color" class="form-control form-control-color" value="#CCCCCC">
  </form>
</div>

1.8 下拉菜单

1.8.1 创建下拉菜单

在 Bootstrap5 中下拉菜单元素可以使用 .form-select 类来渲染 :下拉菜单通过 .form-select-lg 或 .form-select-sm 类来修改大小：1.8.2 修改大小1.8.3 禁用下拉菜单disabled 属性可以禁止下拉菜单被选择：1.8.4 数据列表Bootstrap 也可以通过 datalist 标签为元素设置下拉菜单：

以下实例从列表中选择一个网站：

<div class="container mt-3">
  <h2>数据列表</h2>
  <form action="/action_page.php">
  <label for="browser" class="form-label">选择你喜欢的网站：</label>
  <input class="form-control" list="sites" name="site" id="site">
  <datalist id="sites">
    <option value="Google">
    <option value="Runoob">
    <option value="Taobao">
    <option value="Wiki">
    <option value="Zhihu">
  </datalist>
    <button type="submit" class="btn btn-primary mt-3">Submit</button>
  </form>
</div>

1.9 复选框与单选框

1.9.1 创建复选框

如果您希望用户从预设选项列表中选择任意数量的选项，可以使用复选框：

<div class="container mt-3">
  <h2>复选框</h2>
  <p>.form-check-label 类添加到标签元素，.form-check 容器内添加 .form-check-input 类来设置复选框的样式。</p>
  <p>以下三个复选框，第一个默认选中，最后一个禁止选择：</p>
  <form action="/action_page.php">
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="check1" name="option1" value="something" checked>
      <label class="form-check-label" for="check1">Option 1</label>
    </div>
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="check2" name="option2" value="something">
      <label class="form-check-label" for="check2">Option 2</label>
    </div>
    <div class="form-check">
      <input type="checkbox" class="form-check-input" disabled>
      <label class="form-check-label">Option 3</label>
    </div>
    <button type="submit" class="btn btn-primary mt-3">Submit</button>
  </form>
</div>

1.9.2 创建单选框

如果您希望用户从预设选项列表中选择一个选项，可以使用单选框：

<div class="container mt-3">
  <h2>单选框</h2>
  <p>下面的表单包含三个单选按钮，默认选中第一个选项，禁用最后一个选项：</p>
  <form action="/action_page.php">
    <div class="form-check">
      <input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1" checked>
      <label class="form-check-label" for="radio1">Option 1</label>
    </div>
    <div class="form-check">
      <input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2">
      <label class="form-check-label" for="radio2">Option 2</label>
    </div>
    <div class="form-check">
      <input type="radio" class="form-check-input" disabled>
      <label class="form-check-label">Option 3</label>
    </div>
    <button type="submit" class="btn btn-primary mt-3">Submit</button>
  </form>
</div>

1.9.3 切换开关

如果你想把复选框变成一个可切换的开关，可以在 .form-check 容器内使用 .form-switch 类

<div class="container mt-3">
  <h2>切换开关</h2>
  <p>如果你想把复选框变成一个可切换的开关，可以在 .form-check 容器内使用 .form-switch 类:</p>
  <form action="">
    <div class="form-check form-switch">
      <input class="form-check-input" type="checkbox" id="mySwitch" name="darkmode" value="yes" checked>
      <label class="form-check-label" for="mySwitch">Dark Mode</label>
    </div>
    <button type="submit" class="btn btn-primary mt-3">Submit</button>
  </form>
</div>

1.10 选择区间

1.10.1 创建选择区间

要设置一个选择区间可以在 input 元素中添加 type="range" 并使用 .form-range 类：

<div class="container mt-3">
  <h2>选择区间</h2>
  <p>要设置一个选择区间可以在 input 元素中添加 type="range" 并使用 .form-range 类：</p>
  <form action="/action_page.php">
    <label for="customRange" class="form-label">自定义选择区间</label>
    <input type="range" class="form-range" id="customRange" name="points">
    <label for="customRange" class="form-label">默认选择区间</label>
    <input type="range" id="defaultRange" name="points"><br>
    <button type="submit" class="btn btn-primary mt-3">Submit</button>
  </form>
</div>

1.10.2 步长

默认情况下，步长为 1，可以通过 step 属性来设置：

<div class="container mt-3">
  <h2>选择区间步长</h2>
  <p>默认情况下，步长为 1，可以通过 step 属性来设置：</p>
  <form action="/action_page.php">
    <label for="customRange" class="form-label">自定义步长</label>
    <input type="range" class="form-range" step="10">
    <button type="submit" class="btn btn-primary mt-3">Submit</button>
  </form>
</div>

1.10.3 最大最小值

默认情况下，最小值为 0，最大值为 100，可以通过 min（最小）或 max（最大）属性来设置：

<div class="container mt-3">
  <h2>选择区间最大最小值</h2>
  <p>默认情况下，最小值为 0，最大值为 100，可以通过 min（最小） 或 max（最大） 属性来设置：</p>
  <form action="/action_page.php">
    <label for="customRange" class="form-label">自定义步长</label>
    <input type="range" class="form-range" min="0" max="4">
    <button type="submit" class="btn btn-primary mt-3">Submit</button>
  </form>
</div>

1.11 输入框

1.11.1 创建输入框

我们可以使用 .input-group 类来向表单输入框中添加更多的样式，如图标、文本或者按钮。

.input-group-text 类来设置文本的样式

<div class="container mt-3">
  <h2>输入框组</h2>
  <p>我们可以使用 .input-group 类来向表单输入框中添加更多的样式，如图标、文本或者按钮。</p>
  <p>.input-group-text 类来设置文本的样式。</p>
 
  <form>
    <div class="input-group mb-3">
      <span class="input-group-text">@</span>
      <input type="text" class="form-control" placeholder="Username">
    </div>
 
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Your Email">
      <span class="input-group-text">@runoob.com</span>
    </div>
  </form>
</div>

1.11.2 输入框大小

<div class="container mt-3">
  <h2>输入框大小</h2>
  <p>使用 .input-group-sm 类来设置小的输入框， .input-group-lg 类设置大的输入框：</p>
  
  <div class="input-group input-group-sm mb-3">
    <span class="input-group-text">Small</span>
    <input type="text" class="form-control">
  </div>
  <div class="input-group mb-3">
    <span class="input-group-text">Default</span>
    <input type="text" class="form-control">
  </div>
  <div class="input-group input-group-lg mb-3">
    <span class="input-group-text">Large</span>
    <input type="text" class="form-control">
  </div>
</div>

1.11.3 多个输入框和文本

<div class="container mt-3">
  <h2>多个输入框和文本</h2>
  
  <!-- 多个输入框 -->
  <div class="input-group mb-3">
    <span class="input-group-text">Person</span>
    <input type="text" class="form-control" placeholder="First Name">
    <input type="text" class="form-control" placeholder="Last Name">
  </div>
 
  <!-- 多个文本信息 -->
  <div class="input-group mb-3">
    <span class="input-group-text">One</span>
    <span class="input-group-text">Two</span>
    <span class="input-group-text">Three</span>
    <input type="text" class="form-control">
  </div>
</div>

1.11.4 复选框与单选框

文本信息可以使用复选框与单选框替代：

<div class="container mt-3">
  <h2>复选框与单选框</h2>
 
  <!-- 多个输入框 -->
  <div class="input-group mb-3">
    <div class="input-group-text">
      <input type="checkbox">
    </div>
    <input type="text" class="form-control" placeholder="RUNOOB">
  </div>
 
  <div class="input-group mb-3">
    <div class="input-group-text">
      <input type="radio">
    </div>
    <input type="text" class="form-control" placeholder="GOOGLE">
  </div>
</div>

1.11.5 输入框添加按钮组

<div class="container mt-3">
  <h3>输入框按钮组</h3>
  
  <div class="input-group mb-3 mt-3">
    <button class="btn btn-outline-primary" type="button">Basic Button</button>
    <input type="text" class="form-control" placeholder="Some text">
  </div>
 
  <div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="Search">
    <button class="btn btn-success" type="submit">Go</button> 
  </div>
 
  <div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="Something clever..">
    <button class="btn btn-primary" type="button">OK</button> 
    <button class="btn btn-danger" type="button">Cancel</button> 
  </div>
</div>

1.11.6 设置下拉菜单

输入框中添加下拉菜单不需要使用 .dropdown 类

<div class="container mt-3">
  <h3>设置下拉菜单</h3>
 
  <div class="input-group mt-3 mb-3">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
      选择网站
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="https://www.google.com">GOOGLE</a></li>
      <li><a class="dropdown-item" href="http://www.runoob.com">RUNOOB</a></li>
      <li><a class="dropdown-item" href="https://www.taobao.com">TAOBAO</a></li>
    </ul>
    <input type="text" class="form-control" placeholder="网站地址">
  </div>
</div>

1.11.7 输入框组标签

在输入框组通过在输入框组外围的 label 来设置标签，标签的 for 属性需要与输入框组的 id 对应，点击标签后可以聚焦输入框：

<div class="container mt-3">
  <h3>设置下拉菜单</h3>
 
  <form>
    <label for="demo">这里输入您的邮箱:</label>
    <div class="input-group mb-3">
      <input type="text" class="form-control" placeholder="Email" id="demo" name="email">
      <span class="input-group-text">@runoob.com</span>
    </div>
  </form>
</div>

1.12 表单浮动标签

注意事项： 元素必须在元素之后，并且每个元素都需要 placeholder 属性。

1.12.1 创建浮动标签

<div class="container mt-3">
  <h2>表单浮动标签 - input</h2>
  <p>点击输入框查看浮动效果:</p>
  <form action="/action_page.php">
    <div class="form-floating mb-3 mt-3">
      <input type="text" class="form-control" id="email" placeholder="Enter email" name="email">
      <label for="email">Email</label>
    </div>
    <div class="form-floating mt-3 mb-3">
      <input type="text" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
      <label for="pwd">Password</label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>

1.12.2 创建浮动文本框

文本框 textarea 也可以有浮动效果：

<div class="container mt-3">
  <h2>表单浮动标签 - textarea</h2>
  <p>点击文本框查看浮动效果:</p>
  <form action="/action_page.php">
    <div class="form-floating mb-3 mt-3">
      <textarea class="form-control" id="comment" name="text" placeholder="Comment goes here"></textarea>
      <label for="comment">Comments</label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>

1.12.3 创建浮动选择框

我们可以在选择菜单上使用浮动标签，它将始终显示在选择菜单的左上角，不会有点击浮动效果：

<div class="container mt-3">
  <h2>表单浮动标签 - select</h2>
  <p>我们可以在选择菜单上使用浮动标签，它将始终显示在选择菜单的左上角，不会有点击浮动效果：</p>
  <form action="/action_page.php">
    <div class="form-floating mb-3 mt-3">
      <select class="form-select" id="sel1" name="sellist">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
      </select>
      <label for="sel1" class="form-label">Select list (select one):</label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>

1.13 表单验证（重要）

我们可以使用不同的验证类来设置表单的验证功能。

.was-validated 或 .needs-validation 添加到元素中，input 输入字段将具有绿色（有效）或红色（无效）边框效果，用于说明表单是否需要输入内容。

.valid-feedback 或 .invalid-feedback 类用来告诉用户缺少什么信息，或者在提交表单之前需要完成什么

<div class="container">
  <h2>表单验证</h2>
  <p>使用 .was-validated 类显示表单在提交之前需要填写的内容：</p>
  <form action="" class="was-validated">
    <div class="form-group">
    <label for="uname">Username:</label>
    <input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required>
    <div class="valid-feedback">验证成功！</div>
    <div class="invalid-feedback">请输入用户名！</div>
    </div>
    <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>
    <div class="valid-feedback">验证成功！</div>
    <div class="invalid-feedback">请输入密码！</div>
    </div>
    <div class="form-group form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox" name="remember" required> 同意协议
      <div class="valid-feedback">验证成功！</div>
      <div class="invalid-feedback">同意协议才能提交。</div>
    </label>
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
  </form>
</div>

使用 .needs-validation，它将在表单提交之后验证缺少的内容。这里需要添加一些 JavaScript 代码才能使代码正常工作：

<div class="container">
  <h2>表单验证</h2>
  <p>使用 .needs-validation，它将在表单提交之后验证缺少的内容。这里需要添加一些 js 代码才能使代码正常工作。</p>
  <p>可以点击提交按钮查看效果。</p>
  <form action="" class="needs-validation" novalidate>
    <div class="form-group">
    <label for="uname">Username:</label>
    <input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required>
    <div class="valid-feedback">验证成功！</div>
    <div class="invalid-feedback">请输入用户名！</div>
    </div>
    <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>
    <div class="valid-feedback">验证成功！</div>
    <div class="invalid-feedback">请输入密码！</div>
    </div>
    <div class="form-group form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox" name="remember" required> 同意协议
      <div class="valid-feedback">验证成功！</div>
      <div class="invalid-feedback">同意协议才能提交。</div>
    </label>
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
  </form>
</div>
 
<script>
// 如果验证不通过禁止提交表单
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // 获取表单验证样式
    var forms = document.getElementsByClassName('needs-validation');
    // 循环并禁止提交
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>

Bootstrap 5 保姆级教程（十五）：表单

一、表单

1.1 堆叠表单

1.2 内联表单

1.3 文本框

1.4 输入框大小

1.5 禁用/只读表单

1.6 纯文本输入

1.7 取色器

1.8 下拉菜单

1.8.1 创建下拉菜单

1.9 复选框与单选框

1.9.1 创建复选框

1.9.2 创建单选框

1.9.3 切换开关

1.10 选择区间

1.10.1 创建选择区间

1.10.2 步长

1.10.3 最大最小值

1.11 输入框

1.11.1 创建输入框

1.11.2 输入框大小

1.11.3 多个输入框和文本

1.11.4 复选框与单选框

1.11.5 输入框添加按钮组

1.11.6 设置下拉菜单

1.11.7 输入框组标签

1.12 表单浮动标签

1.12.1 创建浮动标签

1.12.2 创建浮动文本框

1.12.3 创建浮动选择框

1.13 表单验证（重要）

热门文章

最新文章

相关课程

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

Bootstrap 5 保姆级教程（十五）：表单

一、表单

1.1 堆叠表单

1.2 内联表单

1.3 文本框

1.4 输入框大小

1.5 禁用/只读表单

1.6 纯文本输入

1.7 取色器

1.8 下拉菜单

1.8.1 创建下拉菜单

1.9 复选框与单选框

1.9.1 创建复选框

1.9.2 创建单选框

1.9.3 切换开关

1.10 选择区间

1.10.1 创建选择区间

1.10.2 步长

1.10.3 最大最小值

1.11 输入框

1.11.1 创建输入框

1.11.2 输入框大小

1.11.3 多个输入框和文本

1.11.4 复选框与单选框

1.11.5 输入框添加按钮组

1.11.6 设置下拉菜单

1.11.7 输入框组标签

1.12 表单浮动标签

1.12.1 创建浮动标签

1.12.2 创建浮动文本框

1.12.3 创建浮动选择框

1.13 表单验证（重要）

热门文章

最新文章

相关课程

相关电子书