引导表单 - HTML

HTML（Hypertext Markup Language）是Web页面的基础语言。HTML中的表单元素可以收集用户输入的数据，例如注册表单、登录表单等，是网站开发中最为常见的元素之一。

引导表单是基于HTML表单的一个前端框架，提供了一系列的样式类和JavaScript插件，帮助开发者快速构建美观、易用的表单。

基本用法

引导表单中的表单元素与原生的HTML表单元素类似。不同的是，在引导表单中，我们可以使用预定义的样式类来为表单元素添加样式，在不同的设备上获得更好的显示效果。

以下是一个简单的引导表单示例：

<form>
  <div class="form-group">
    <label for="username">用户名</label>
    <input type="text" class="form-control" id="username" placeholder="请输入用户名">
  </div>
  <div class="form-group">
    <label for="password">密码</label>
    <input type="password" class="form-control" id="password" placeholder="请输入密码">
  </div>
  <button type="submit" class="btn btn-primary">登录</button>
</form>

在上面的示例中，我们使用了三个样式类：form-group、form-control和btn。其中：

• form-group将表单元素包装在一个组中，便于样式控制和布局调整。
• form-control将输入框元素和选择框元素设置为块级元素，并且添加一些内联样式，让表单元素更加易用和美观。
• btn将按钮元素添加预定义的样式，让按钮看起来更加漂亮。

表单验证

引导表单还提供了表单验证功能，可以在客户端对用户输入的数据进行验证，避免不合法的数据提交到后台服务器。

以下是一个简单的表单验证示例：

<form>
  <div class="form-group">
    <label for="username">用户名</label>
    <input type="text" class="form-control" id="username" placeholder="请输入用户名" required>
    <div class="invalid-feedback">
      请输入用户名
    </div>
  </div>
  <div class="form-group">
    <label for="password">密码</label>
    <input type="password" class="form-control" id="password" placeholder="请输入密码" required>
    <div class="invalid-feedback">
      请输入密码
    </div>
  </div>
  <button type="submit" class="btn btn-primary">登录</button>
</form>

在上面的示例中，我们在用户名和密码的输入框中都添加了required属性，这样用户就必须输入有效的数据才能提交表单。如果用户输入的数据不合法，系统还会自动提示错误信息，例如"请输入用户名"等提示信息。

JavaScript插件

引导表单还提供了一些JavaScript插件，帮助我们实现更加复杂的表单交互效果。

以下是一个简单的JavaScript插件示例：

<form>
  <div class="form-group">
    <label for="inputEmail">邮箱地址</label>
    <input type="email" class="form-control" id="inputEmail" placeholder="请输入邮箱地址" required autofocus>
    <div class="invalid-feedback">
      请输入有效的邮箱地址
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword">密码</label>
    <input type="password" class="form-control" id="inputPassword" placeholder="请输入密码" required>
    <div class="invalid-feedback">
      请输入密码
    </div>
  </div>
  <div class="form-group">
    <div class="checkbox">
      <label>
        <input type="checkbox" value="remember-me"> 记住密码
      </label>
    </div>
  </div>
  <button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
</form>

<!-- 引入jQuery和bootstrap的JavaScript库 -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>

<!-- 使用JavaScript插件 -->
<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>

在上面的示例中，我们使用了表单验证插件，通过JavaScript代码的方式启用了表单验证功能。用户在提交表单之前，通过计算机程序进行数据有效性检查，以保证数据的有效性和一致性，避免后端服务器文章不合法的数据提交。