引导表单模板 - Html (1)

📌 相关文章

📜 引导表单模板 - Html (1)

📅 最后修改于: 2023-12-03 14:54:12.667000 🧑 作者: Mango

引导表单模板 - HTML

HTML是一种标记语言，用于构建网页。在网站开发中，表单是不可避免的一部分。Bootstrap是一个流行的前端框架，提供了许多用于构建响应式和移动优先网站的组件和工具，其中包括表单组件。

Bootstrap表单组件为开发人员提供了一组易于使用且美观的HTML元素，例如文本输入框、下拉菜单、单选按钮、复选框等。Bootstrap还为所有表单元素添加了默认样式，并将其从零开始构建以实现响应式布局。

引用Bootstrap表单模板

在使用Bootstrap表单模板之前，我们需要先将它引入到网页中，这可以通过在<head>标签中添加以下代码实现：

<!-- 引入Bootstrap.min.css -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.5.2/css/bootstrap.min.css">

<!-- 引入jQuery.min.js -->
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>

<!-- 引入Popper.min.js -->
<script src="https://cdn.staticfile.org/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- 引入Bootstrap.min.js -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>

Bootstrap表单的基本结构

一个标准的Bootstrap表单包含以下组件：

表单<form>标签
表单控件的<input>、<select>、<textarea>标签
表单控件的<label>标签
表单提交按钮的<button>或<input>标签

下面是一段基本的Bootstrap表单代码：

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">邮箱地址</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="请输入邮箱地址">
    <small id="emailHelp" class="form-text text-muted">我们绝不会分享您的电子邮件地址。</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">密码</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">记住我</label>
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

这段代码将生成一个简单的表单，其中包括一个邮箱地址输入框、一个密码输入框、一个复选框和一个提交按钮。

Bootstrap表单控件的样式

Bootstrap的表单组件为所有表单控件提供了默认的样式，使其具有更好的可读性和可用性。

Bootstrap表单的控件样式有三种状态：

默认状态
聚焦状态
禁用状态

除此之外，Bootstrap还提供了一些额外的控件样式，例如form-control-lg和form-control-sm，用于放大和缩小控件的大小。

下面是几个常用的表单控件样式类：

form-control：为所有表单控件添加标准样式；
form-control-lg：增加控件的高度大小；
form-control-sm：减小控件的高度大小；
form-control-plaintext：移除控件的边框和背景色，让其看起来像是一个普通的文本；
is-valid：为表单控件添加成功样式；
is-invalid：为表单控件添加错误样式。

Bootstrap表单控件的布局

Bootstrap的表单组件是基于网格系统构建的，可以轻松地实现在不同设备上的布局、响应式和自适应。

在Bootstrap中，表单控件是通过在<div>元素中使用特殊的类来实现布局的。通常使用的类有form-group和form-row。前者用于添加表单控件及其标签，后者用于在同一行中放置多个表单控件。

下面是一个演示如何使用Bootstrap实现表单控件布局的示例：

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">邮箱地址</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="请输入邮箱地址">
    <small id="emailHelp" class="form-text text-muted">我们绝不会分享您的电子邮件地址。</small>
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="exampleInputPassword1">密码</label>
      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码">
    </div>
    <div class="form-group col-md-6">
      <label for="exampleInputPassword2">确认密码</label>
      <input type="password" class="form-control" id="exampleInputPassword2" placeholder="请再次输入密码">
    </div>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">请输入文本</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

这段代码将生成一个具有不同大小和布局的表单控件，如下所示：

Bootstrap表单控件的布局

Bootstrap表单控件的校验

Bootstrap还提供了一组用于对表单控件进行验证的类。可以使用这些类来添加校验规则并设置验证错误消息。

下面是一些常用的验证类：

was-validated：用于标记表单已进行验证；
form-control is-invalid：用于将表单控件添加到无效状态中；
form-control is-valid：用于将表单控件添加到有效状态。

您可以使用下面的代码来验证表单：

<form class="needs-validation" novalidate>
  <div class="form-group">
    <label for="exampleInputName">姓名</label>
    <input type="text" class="form-control" id="exampleInputName" placeholder="请输入姓名" required>
    <div class="invalid-feedback">请输入姓名。</div>
  </div>
  <div class="form-group">
    <label for="exampleInputEmail">邮箱地址</label>
    <input type="email" class="form-control" id="exampleInputEmail" placeholder="请输入邮箱地址" required>
    <div class="invalid-feedback">请输入有效的邮箱地址。</div>
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

此代码将使输入框在提交表单之前进行验证，并在输入无效时添加错误消息。

结论

Bootstrap表单组件使开发人员能够轻松构建美观、响应式且易于使用的表单。随着更多用户从各种设备访问网站，使用Bootstrap表格组件可以确保您的表格适合任何设备，并提供更好的用户体验。