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

本文链接：https://blog.csdn.net/2302_82189125/article/details/137758370

该博客主要介绍了Bootstrap表单相关内容，包括堆叠表单、内联表单、文本框、输入框大小设置、禁用/只读表单等多种表单组件的创建与使用，还提及了下拉菜单、复选框与单选框等的操作，最后重点讲解了表单验证功能，需添加JavaScript代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、表单

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 中下拉菜单 <select> 元素可以使用 .form-select 类来渲染 :

<div class="container mt-3">
  <h2>下拉菜单</h2>
  <p>在 Bootstrap5 中下拉菜单 select 元素可以使用 .form-select 类来渲染 :</p>
  <form action="">
    <label for="sel1" class="form-label">单选下拉菜单：</label>
    <select class="form-select" id="sel1" name="sellist1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
    </select>
    <br>
    
    <label for="sel2" class="form-label">多选下拉菜单：</label>
    <select multiple class="form-select" id="sel2" name="sellist2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
    <button type="submit" class="btn btn-primary mt-3">Submit</button>
  </form>
</div>

下拉菜单通过 .form-select-lg 或 .form-select-sm 类来修改大小：

1.8.2 修改大小

<div class="container mt-3">
  <h2>下拉菜单</h2>
  <p>下拉菜单通过 .form-select-lg 或 .form-select-sm 类来修改大小：</p>
  <form action="">
    <label for="sel1" class="form-label">大号下拉菜单：</label>
    <select class="form-select form-select-lg" id="sel1" name="sellist1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
    </select>
    <br>
    
    <label for="sel2" class="form-label">正常下拉菜单：</label>
    <select class="form-select" id="sel2" name="sellist2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
	  
	<label for="sel3" class="form-label">小号下拉菜单：</label>
	<select class="form-select form-select-sm" id="sel3" name="sellist3">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
    <button type="submit" class="btn btn-primary mt-3">Submit</button>
  </form>
</div>

1.8.3 禁用下拉菜单

disabled 属性可以禁止下拉菜单被选择：

<div class="container mt-3">
  <h2>禁用下拉菜单</h2>
  <p>disabled 属性可以禁止下拉菜单被选择：</p>
  <form action="">
    <label for="sel" class="form-label">禁用下拉菜单：</label>
    <select class="form-select" id="sel" name="sellist" disabled>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
    <button type="submit" class="btn btn-primary mt-3">Submit</button>
  </form>
</div>

1.8.4 数据列表

Bootstrap 也可以通过 datalist 标签为 <input> 元素设置下拉菜单：

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

<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 表单浮动标签

注意事项： <label> 元素必须在 <input> 元素之后，并且每个 <input> 元素都需要 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 添加到 <form> 元素中，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>