CoderWithAI LogoCoderWithAI

自定义表单

在本教程中，我们将深入探讨如何使用 Bootstrap 创建和自定义表单。表单是网页中常见的元素，用于收集用户输入。通过 Bootstrap，我们可以轻松地创建美观且功能强大的表单。

1. 表单基础

1.1 表单结构

一个基本的 HTML 表单通常包含以下元素：

  • <form>：表单的容器。
  • <input>：用于输入文本、密码、电子邮件等。
  • <textarea>：用于输入多行文本。
  • <select>：用于创建下拉菜单。
  • <button>：用于提交表单。

1.2 Bootstrap 表单类

Bootstrap 提供了一些类来帮助我们快速构建表单。以下是一些常用的类：

  • .form-control：用于 <input>、<textarea> 和 <select> 元素，使其具有一致的样式。
  • .form-group：用于包裹表单控件和标签，提供更好的结构和间距。
  • .form-check：用于复选框和单选按钮。

2. 创建基本表单

2.1 代码示例

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

2.2 解释

  • <label> 标签用于描述表单控件。
  • <input> 标签使用 .form-control 类来应用 Bootstrap 的样式。
  • <small> 标签用于提供额外的帮助文本。
  • <button> 标签使用 .btn 和 .btn-primary 类来创建一个蓝色的提交按钮。

3. 自定义表单样式

3.1 表单布局

Bootstrap 提供了多种布局选项来帮助我们创建复杂的表单。以下是一些常见的布局方式：

  • 水平表单：使用 .form-horizontal 类和网格系统来对齐标签和控件。
  • 内联表单：使用 .form-inline 类将表单控件放在一行中。

3.2 代码示例

<form class="form-horizontal">
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10 offset-sm-2">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>

3.3 解释

  • .form-horizontal 类用于创建水平表单。
  • .form-group 和 .row 类用于创建网格行。
  • .col-sm-2 和 .col-sm-10 类用于定义列的宽度。
  • .col-form-label 类用于使标签垂直居中。

4. 表单验证

4.1 验证状态

Bootstrap 提供了一些类来表示表单控件的验证状态：

  • .is-valid：表示输入有效。
  • .is-invalid：表示输入无效。

4.2 代码示例

<form>
  <div class="form-group">
    <label for="validationServer01">First name</label>
    <input type="text" class="form-control is-valid" id="validationServer01" placeholder="First name" value="Mark" required>
    <div class="valid-feedback">
      Looks good!
    </div>
  </div>
  <div class="form-group">
    <label for="validationServer02">Last name</label>
    <input type="text" class="form-control is-invalid" id="validationServer02" placeholder="Last name" value="Otto" required>
    <div class="invalid-feedback">
      Please provide a valid last name.
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

4.3 解释

  • .is-valid 和 .is-invalid 类用于表示输入的有效或无效状态。
  • .valid-feedback 和 .invalid-feedback 类用于显示相应的反馈信息。

5. 实践练习

5.1 练习目标

创建一个包含以下元素的表单：

  • 姓名输入框
  • 电子邮件输入框
  • 密码输入框
  • 性别选择（单选按钮）
  • 提交按钮

5.2 提示

  • 使用 .form-group 类来组织表单元素。
  • 使用 .form-control 类来样式化输入框。
  • 使用 .form-check 类来组织单选按钮。

5.3 参考代码

<form>
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" class="form-control" id="name" placeholder="Enter your name">
  </div>
  <div class="form-group">
    <label for="email">Email address</label>
    <input type="email" class="form-control" id="email" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input type="password" class="form-control" id="password" placeholder="Password">
  </div>
  <div class="form-group">
    <label>Gender</label>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="gender" id="male" value="male">
      <label class="form-check-label" for="male">Male</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="gender" id="female" value="female">
      <label class="form-check-label" for="female">Female</label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

6. 总结

通过本教程，我们学习了如何使用 Bootstrap 创建和自定义表单。我们了解了表单的基本结构、布局选项、验证状态以及如何通过实践练习来巩固所学知识。希望这些内容能帮助你更好地掌握 Bootstrap 表单的使用。

← Previous: 表单验证状态：前端开发中的关键技术Next: 输入组和前缀后缀 - 编程教程 →