Bootstrap5 表单学习笔记

Bootstrap 是一款流行的前端框架，提供了丰富的组件和工具，可以帮助我们快速构建出美观、响应式的网页。表单是网页中常用的组件之一，本文将介绍 Bootstrap5 中表单组件的使用。

基本表单

Bootstrap 提供了多种类型的基本表单组件，如文本框、下拉框、单选框、复选框等。下面是一个基本的表单示例：

htmlCopy Code
<form>
  <div class="mb-3">
    <label for="exampleInputName" class="form-label">姓名</label>
    <input type="text" class="form-control" id="exampleInputName" placeholder="请输入姓名">
  </div>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">邮箱地址</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入邮箱地址">
    <div id="emailHelp" class="form-text">我们不会分享你的邮箱地址。</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">密码</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码">
  </div>
  <div class="mb-3 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>

其中，form 元素包裹整个表单，div 元素用于分组表单控件，label 元素为控件添加标签，input 元素为基本控件，form-control 类用于增加控件样式，form-text 类用于添加辅助文本。最后的 button 元素为提交按钮。

内联表单

Bootstrap 也提供了内联表单的支持，可以使表单排列在同一行，适用于小型表单的场景。下面是一个内联表单的示例：

htmlCopy Code
<form class="form-inline">
  <div class="mb-2 mr-sm-2 mb-sm-0">
    <label for="inlineFormInputName2" class="sr-only">姓名</label>
    <input type="text" class="form-control" id="inlineFormInputName2" placeholder="请输入姓名">
  </div>
  <div class="mb-2 mr-sm-2 mb-sm-0">
    <label for="inlineFormInputGroupUsername2" class="sr-only">用户名</label>
    <div class="input-group">
      <div class="input-group-prepend">
        <div class="input-group-text">@</div>
      </div>
      <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="请输入用户名">
    </div>
  </div>
  <div class="form-check mb-2 mr-sm-2 mb-sm-0">
    <input class="form-check-input" type="checkbox" id="inlineFormCheck">
    <label class="form-check-label" for="inlineFormCheck">记住我</label>
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

其中，form-inline 类用于设置内联表单样式，input-group 类用于将两个控件组合在一起，input-group-prepend 和 input-group-text 类用于添加文本和图标。

横排表单

Bootstrap 还提供了横排表单的支持，可以使表单排列在一行内，适用于大型表单的场景。下面是一个横排表单的示例：

htmlCopy Code
<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationServer01">姓名</label>
      <input type="text" class="form-control is-valid" id="validationServer01" placeholder="请输入姓名" required>
      <div class="valid-feedback">
        非常好！
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServer02">城市</label>
      <input type="text" class="form-control is-valid" id="validationServer02" placeholder="请输入城市" required>
      <div class="valid-feedback">
        非常好！
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServerUsername">用户名</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend3">@</span>
        </div>
        <input type="text" class="form-control is-invalid" id="validationServerUsername" placeholder="请输入用户名" aria-describedby="inputGroupPrepend3" required>
        <div class="invalid-feedback">
          请填写一个唯一的用户名。
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer03">城市</label>
      <input type="text" class="form-control is-invalid" id="validationServer03" placeholder="请输入城市" required>
      <div class="invalid-feedback">
        请提供一个有效的城市。
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">州/省</label>
      <input type="text" class="form-control is-invalid" id="validationServer04" placeholder="请输入州/省" required>
      <div class="invalid-feedback">
        请提供一个有效的州/省。
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">邮编</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" placeholder="请输入邮编" required>
      <div class="invalid-feedback">
        请提供一个有效的邮编。
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">提交表单</button>
</form>

其中，form-row 和 col-* 类用于设置横排表单的样式，is-valid 和 is-invalid 类用于设置控件的验证状态，valid-feedback 和 invalid-feedback 类用于设置验证反馈信息。

Bootstrap 提供了丰富的表单组件和样式，可以帮助我们轻松快速地构建出符合需求的表单。