1. Python技术站首页
  2. 其他
  3. JavaScript

BootStrap中的表单大全

• JavaScript
yizhihongxing

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技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • 纯js实现html转pdf的简单实例(推荐)

    要实现将HTML转换成PDF文件，可以使用第三方库jsPDF，该库内置了HTML的转PDF的功能。下面是一个纯JS实现HTML转PDF的简单实例的完整攻略： 步骤一：准备工作 首先，需要引入 jsPDF 库： <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.3.1/jsp…

    JavaScript 2023年5月27日
    00

  • web基于浏览器的本地存储方法应用

    Web基于浏览器的本地存储方法应用可以用于在客户端本地存储数据。他可以减少对服务器的高频率请求，提高用户体验度并缩短加载时间。以下是关于它的一些详细讲解： 什么是本地存储？ 本地存储是通过JavaScript在客户端的浏览器存储数据。本地存储有两种不同的方法来存储数据：localStorage和sessionStorage。localStorage和sess…

    JavaScript 2023年6月11日
    00

  • Javascript 异步加载详解(浏览器在javascript的加载方式)

    Javascript 异步加载详解(浏览器在javascript的加载方式) 什么是异步加载 在JavaScript中，异步加载是指浏览器在加载JavaScript文件时，并不会等待文件完全加载完成后再去执行JavaScript文件内的代码。异步加载的好处在于页面不会因为JavaScript加载而被阻塞，同时也可以提高页面的加载速度和性能。 实现异步加载的方…

    JavaScript 2023年5月27日
    00

  • 微信小程序保持session会话的方法

    下面我将为你详细介绍微信小程序保持 session 会话的方法。 什么是 session session 是指客户端和服务器之间的交互状态，可以理解为身份验证或登录状态的一种维持方式。常见的维持 session 的方法有 cookie 和 token。 微信小程序 session 微信小程序中，可以通过 wx.request 方法向服务器发送请求并维持 se…

    JavaScript 2023年6月11日
    00

  • 浅谈JavaScript暂时性死区与垃圾回收机制

    浅谈JavaScript暂时性死区与垃圾回收机制 什么是暂时性死区 暂时性死区（Temporal Dead Zone，TDZ）指在代码块中，在声明变量前使用该变量会造成ReferenceError的行为。 具体来说，在ES6之前，声明变量的方式有var和函数声明（function declaration），它们没有块级作用域，而是函数级作用域。 在以下代码中…

    JavaScript 2023年5月28日
    00

  • javascript getElementByTagName的使用

    JavaScript getElementByTagName的使用 getElementByTagName是JavaScript中获取网页元素标签名的方法，它可以选取指定标签名的所有元素对象并以数组的形式返回。 语法 document.getElementsByTagName(tagname); 参数说明： tagname：要查找的元素标签名。可以是字符串，…

    JavaScript 2023年6月10日
    00

  • JavaScript实现日期格式化的方法汇总

    关于“JavaScript实现日期格式化的方法汇总”的完整攻略，我将在以下几个方面进行详细讲解： 概述日期格式化的概念和作用 介绍JavaScript自带的日期格式化方法 分享常见第三方库或插件实现日期格式化方法 提供至少两条示例说明 接下来，我将结合以上四个方面为大家详细讲解。 概述日期格式化的概念和作用 日期格式化是指将日期对象（通常是JavaScrip…

    JavaScript 2023年6月10日
    00

  • Javascript MIN_VALUE 属性

    以下是关于JavaScript MIN_VALUE属性的完整攻略。 JavaScript MIN_VALUE属性 JavaScript MIN_VALUE属性是Number对象的一个属性，它表示JavaScript中最小的正数，约为5E-324。MIN_VALUE属性是一个常量，它不能被修改。 下面是一个使用MIN_VALUE属性的示例： console.l…

    JavaScript 2023年5月11日
    00
合作推广
合作推广
分享本页
返回顶部