Bootstrap-表单演示

Bootstrap是一款非常受欢迎的前端框架，其表单组件也是重要的一部分。Bootstrap的表单组件提供了丰富的功能和样式，使得开发者可以快速地构建美观的表单页面。

基础表单组件

Bootstrap的基础表单组件包括文本框、密码框、文本域、复选框、单选框、下拉菜单等。这些组件使用起来非常简单，只需要按照指定的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>
  <div class="form-group">
    <label for="comments">评论</label>
    <textarea class="form-control" id="comments" rows="3"></textarea>
  </div>
  <div class="form-group">
    <label>选择爱好</label>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="篮球" id="basketball">
      <label class="form-check-label" for="basketball">
        篮球
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="足球" id="football">
      <label class="form-check-label" for="football">
        足球
      </label>
    </div>
  </div>
  <div class="form-group">
    <label>选择性别</label>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="gender" id="male" value="男">
      <label class="form-check-label" for="male">
        男
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="gender" id="female" value="女">
      <label class="form-check-label" for="female">
        女
      </label>
    </div>
  </div>
  <div class="form-group">
    <label for="city">城市</label>
    <select class="form-control" id="city">
      <option value="">请选择城市</option>
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="广州">广州</option>
      <option value="深圳">深圳</option>
    </select>
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

效果如下：

表单尺寸

Bootstrap的表单组件提供了三种尺寸，分别是大尺寸（.form-control-lg）、默认尺寸（没有任何类）和小尺寸（.form-control-sm）。可以根据实际需求进行选择。

下面是一个带有不同尺寸的表单的演示：

<form>
  <div class="form-group">
    <label for="username">用户名</label>
    <input type="text" class="form-control form-control-lg" id="username" placeholder="请输入用户名">
  </div>
  <div class="form-group">
    <label for="password">密码</label>
    <input type="password" class="form-control" id="password" placeholder="请输入密码">
  </div>
  <div class="form-group">
    <label for="comments">评论</label>
    <textarea class="form-control form-control-sm" id="comments" rows="3"></textarea>
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

效果如下：

表单反馈

Bootstrap的表单反馈组件可以用于提示用户表单中的错误或成功信息。包括校验状态（.is-valid和.is-invalid）、提示信息（.valid-feedback和.invalid-feedback）等。

下面是一个带有表单反馈的表单的演示：

<form>
  <div class="form-group">
    <label for="username">用户名</label>
    <input type="text" class="form-control is-invalid" id="username" placeholder="请输入用户名" required>
    <div class="invalid-feedback">
      请输入用户名。
    </div>
  </div>
  <div class="form-group">
    <label for="password">密码</label>
    <input type="password" class="form-control is-valid" id="password" placeholder="请输入密码" required>
    <div class="valid-feedback">
      密码格式正确。
    </div>
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

效果如下：

水平布局表单

Bootstrap的水平布局表单将表单的标签和输入框放在一行，更加美观，适用于较短的表单。

下面是一个水平布局表单的演示：

<form>
  <div class="form-group row">
    <label for="username" class="col-sm-2 col-form-label">用户名</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="username" placeholder="请输入用户名">
    </div>
  </div>
  <div class="form-group row">
    <label for="password" class="col-sm-2 col-form-label">密码</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="password" placeholder="请输入密码">
    </div>
  </div>
  <div class="form-group row">
    <label for="comments" class="col-sm-2 col-form-label">评论</label>
    <div class="col-sm-10">
      <textarea class="form-control" id="comments" rows="3"></textarea>
    </div>
  </div>
  <div class="form-group row">
    <label class="col-sm-2">选择爱好</label>
    <div class="col-sm-10">
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="checkbox" value="篮球" id="basketball">
        <label class="form-check-label" for="basketball">
          篮球
        </label>
      </div>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="checkbox" value="足球" id="football">
        <label class="form-check-label" for="football">
          足球
        </label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <label class="col-sm-2">选择性别</label>
    <div class="col-sm-10">
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="gender" id="male" value="男">
        <label class="form-check-label" for="male">
          男
        </label>
      </div>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="gender" id="female" value="女">
        <label class="form-check-label" for="female">
          女
        </label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <label for="city" class="col-sm-2 col-form-label">城市</label>
    <div class="col-sm-10">
      <select class="form-control" id="city">
        <option value="">请选择城市</option>
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="广州">广州</option>
        <option value="深圳">深圳</option>
      </select>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10 offset-sm-2">
      <button type="submit" class="btn btn-primary">提交</button>
    </div>
  </div>
</form>

效果如下：

表单组

Bootstrap的表单组可以将多个表单组件组合在一起。可以使用.form-group类将组件包裹在一起，使用.input-group类为组件添加扩展。

下面是两个表单组的演示：

<form>
  <div class="form-group">
    <label for="email">邮箱地址</label>
    <div class="input-group">
      <input type="email" class="form-control" id="email" placeholder="请输入邮箱地址">
      <div class="input-group-append">
        <button class="btn btn-outline-secondary" type="button">发送</button>
      </div>
    </div>
  </div>
  <div class="form-group">
    <label for="search">搜索</label>
    <div class="input-group">
      <input type="text" class="form-control" id="search" placeholder="请输入搜索内容">
      <div class="input-group-append">
        <button class="btn btn-outline-secondary" type="button">搜索</button>
      </div>
    </div>
  </div>
</form>

效果如下：

结语

以上就是Bootstrap的表单演示，其中涵盖了基础表单组件、表单尺寸、表单反馈、水平布局表单和表单组等内容。使用Bootstrap的表单组件可以快速地构建美观的表单页面。