BootStrap中的表单大全

BootStrap是目前使用最为广泛的前端框架之一，其中表单是网站开发中比较常用的组件之一。本文将对BootStrap中的表单进行详细讲解，包括表单组成、常用表单类型、表单验证等内容，帮助读者在BootStrap中更好地使用表单组件。

表单组成

在BootStrap中，一个表单必须包含以下几个组成部分：

form标签：定义表单，包裹整体表单内容；
input标签：包括表单输入框、单选框、复选框、文件上传等内容；
label标签：标签中的文字会和对应的input标签相关联；
button标签：提交表单的按钮。

一个基本的表单结构如下所示：

<form>
  <div class="form-group">
    <label for="username">用户名</label>
    <input type="text" class="form-control" id="username">
  </div>
  <div class="form-group">
    <label for="password">密码</label>
    <input type="password" class="form-control" id="password">
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

常用表单类型

在BootStrap中，可以使用各种表单类型，包括文本框、单选框、复选框、下拉框、文件上传等。下面对常用表单类型进行详细讲解。

文本框

文本框是最常用的表单类型之一，BootStrap中的文本框包括普通文本框、文本域和密码框。可以通过以下代码创建一个文本框：

<input type="text" class="form-control" id="username" placeholder="请输入用户名">

其中class为form-control表示使用BootStrap的表单样式，id为username表示为文本框设置唯一标识符，placeholder为提交前在文本框内显示的带有灰色提示的文本。

[picture]

单选框和复选框

单选框和复选框是用来让用户选择一个或多个选项的表单类型，可以使用以下代码创建单选框和复选框：

<div class="form-check">
  <label class="form-check-label">
    <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    选项1
  </label>
</div>
<div class="form-check">
  <label class="form-check-label">
    <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios2" value="option2">
    选项2
  </label>
</div>
<div class="form-check">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" name="option1" id="option1" value="option1" checked>
    选项1
  </label>
</div>
<div class="form-check">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" name="option2" id="option2" value="option2">
    选项2
  </label>
</div>

单选框需要设置name来确定选项互斥关系，复选框需要设置不同的name来表示不同的选项。checked属性可以设置默认选中某个选项。

[picture]

下拉框

下拉框是一种方便用户选择的常用表单类型，可以使用以下代码创建一个下拉框：

<select class="form-control">
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
</select>

其中option标签表示不同的选项，value属性表示选项的值，显示出来的是option标签之间的文本内容。

[picture]

文件上传

文件上传可以使用以下代码创建：

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">选择文件</label>
</div>

在BootStrap中，使用class="custom-file-input"属性设置文件上传样式，label标签的for属性对应文件上传的控件id。

[picture]

表单验证

在表单中添加验证可以有效减少用户提交信息的错误和不规范，BootStrap为表单验证提供了自带的插件。下面演示一些表单验证的例子。

<form>
  <div class="form-group">
    <label for="username">用户名</label>
    <input type="text" class="form-control" id="username" required>
    <div class="invalid-feedback">用户名不能为空</div>
  </div>
  <div class="form-group">
    <label for="email">邮箱</label>
    <input type="email" class="form-control" id="email" required>
    <div class="invalid-feedback">邮箱格式不正确</div>
  </div>
  <div class="form-group">
    <label for="password_1">密码</label>
    <input type="password" class="form-control" id="password_1" minlength="6" required>
    <div class="invalid-feedback">密码不能少于6位</div>
  </div>
  <div class="form-group">
    <label for="password_2">确认密码</label>
    <input type="password" class="form-control" id="password_2" minlength="6" required>
    <div class="invalid-feedback">两次密码不一致</div>
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

添加了required属性用于表示字段为必填项，invalid-feedback对应错误提示信息，minlength属性表示最小长度。

[picture]

还可以使用js代码控制表单验证：

// 表单验证
(function () {
  'use strict'

  // Fetch all the forms we want to apply custom Bootstrap validation styles to
  var forms = document.querySelectorAll('.needs-validation')

  // Loop over them and prevent submission
  Array.prototype.slice.call(forms)
    .forEach(function (form) {
      form.addEventListener('submit', function (event) {
        if (!form.checkValidity()) {
          event.preventDefault()
          event.stopPropagation()
        }

        form.classList.add('was-validated')
      }, false)
    })
})()

通过添加class为needs-validation，就可以在form提交的时候进行表单验证。

示例说明

示例一：注册页面

下面是一个简单的注册页面，包括文本框、单选框和密码框等表单类型，同时添加了表单验证来验证用户输入的信息。

<!DOCTYPE html>
<html>
<head>
  <title>注册</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
</head>
<body>
  <div class="container mt-5">
    <form class="needs-validation" novalidate>
      <div class="form-group">
        <label for="username">用户名</label>
        <input type="text" class="form-control" id="username" required>
        <div class="invalid-feedback">用户名不能为空</div>
      </div>
      <div class="form-group">
        <label for="email">邮箱</label>
        <input type="email" class="form-control" id="email" required>
        <div class="invalid-feedback">邮箱格式不正确</div>
      </div>
      <div class="form-group">
        <label>性别</label><br>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="gender" id="gender_male" value="male" required>
          <label class="form-check-label" for="gender_male">
            男
          </label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="gender" id="gender_female" value="female" required>
          <label class="form-check-label" for="gender_female">
            女
          </label>
        </div>
        <div class="invalid-feedback">请选择性别</div>
      </div>
      <div class="form-group">
        <label for="password_1">密码</label>
        <input type="password" class="form-control" id="password_1" minlength="6" required>
        <div class="invalid-feedback">密码不能少于6位</div>
      </div>
      <div class="form-group">
        <label for="password_2">确认密码</label>
        <input type="password" class="form-control" id="password_2" minlength="6" required>
        <div class="invalid-feedback">两次密码不一致</div>
      </div>
      <button type="submit" class="btn btn-primary">提交</button>
    </form>
  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.slim.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
  <script>
    (function () {
      'use strict'

      // Fetch all the forms we want to apply custom Bootstrap validation styles to
      var forms = document.querySelectorAll('.needs-validation')

      // Loop over them and prevent submission
      Array.prototype.slice.call(forms)
        .forEach(function (form) {
          form.addEventListener('submit', function (event) {
            if (!form.checkValidity()) {
              event.preventDefault()
              event.stopPropagation()
            }

            form.classList.add('was-validated')
          }, false)
        })
    })()
  </script>
</body>
</html>

[picture]

示例二：搜索页面

下面是一个简单的搜索页面，包括文本框、单选框和下拉框等表单类型。

<!DOCTYPE html>
<html>
<head>
  <title>搜索</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
</head>
<body>
  <div class="container mt-5">
    <form>
      <div class="form-group">
        <label for="input_key_words">关键词</label>
        <input type="text" class="form-control" id="input_key_words" placeholder="请输入关键词">
      </div>
      <div class="form-group">
        <label>类型</label><br>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="book_type" id="book_type_all" value="all" checked>
          <label class="form-check-label" for="book_type_all">
            全部
          </label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="book_type" id="book_type_novel" value="novel">
          <label class="form-check-label" for="book_type_novel">
            小说
          </label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="book_type" id="book_type_history" value="history">
          <label class="form-check-label" for="book_type_history">
            历史
          </label>
        </div>
      </div>
      <div class="form-group">
        <label for="select_sort">排序方式</label>
        <select class="form-control" id="select_sort">
          <option value="time">按时间</option>
          <option value="hot">按热度</option>
          <option value="rating">按评分</option>
        </select>
      </div>
      <button type="submit" class="btn btn-primary">搜索</button>
    </form>
  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.slim.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
</body>
</html>

[picture]

总结

在本文中，我们详细讲解了BootStrap中的表单大全，包括表单组成、常用表单类型和表单验证等内容。希望读者能够通过本文更好地使用BootStrap中的表单组件。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：BootStrap中的表单大全 - Python技术站

BootStrap中的表单大全

BootStrap中的表单大全

表单组成

常用表单类型

文本框

单选框和复选框

下拉框

文件上传

表单验证

示例说明

示例一：注册页面

示例二：搜索页面

总结

相关文章