如何使用Bootstrap创建表单

当使用Bootstrap创建表单时，可以利用Bootstrap提供的现成的组件和样式来快速搭建一个美观、易用、响应式的表单。

创建Bootstrap表单的步骤

1. 引入Bootstrap的CSS和JS库文件。可以直接从官网下载（http://getbootstrap.com/），或者通过CDN引入。

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

<!-- Bootstrap JavaScript -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

1. 编写HTML结构。可以使用Bootstrap提供的表单组件，比如form、input、textarea、select等，也可以使用自定义的样式。

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

1. 可以为不同的表单元素添加不同的样式类，比如form-control、btn等。也可以使用自定义的样式类，这样可以更灵活地控制表单样式。

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email" required>
    <small 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" required>
    <small class="form-text text-muted">Use at least one uppercase letter, one lowercase letter, one number and one symbol.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" class="form-control-file" id="exampleInputFile" aria-describedby="fileHelp">
    <small id="fileHelp" class="form-text text-muted">Choose a file to upload.</small>
  </div>
  <fieldset class="form-group">
    <legend>Radio buttons</legend>
    <div class="form-check">
      <label class="form-check-label">
        <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios1" value="option1" checked>
        Option one is this and that&mdash;be sure to include why it's great
      </label>
    </div>
    <div class="form-check">
      <label class="form-check-label">
        <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios2" value="option2">
        Option two can be something else and selecting it will deselect option one
      </label>
    </div>
  </fieldset>
  <fieldset class="form-group">
    <legend>Checkboxes</legend>
    <div class="form-check">
      <label class="form-check-label">
        <input type="checkbox" class="form-check-input" name="optionsCheckboxes[]" id="optionsCheckboxes1" value="option1" checked>
        Check me out
      </label>
    </div>
    <div class="form-check disabled">
      <label class="form-check-label">
        <input type="checkbox" class="form-check-input" name="optionsCheckboxes[]" id="optionsCheckboxes2" value="option2" disabled>
        disabled checkbox
      </label>
    </div>
  </fieldset>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

示例说明

示例一：简单表单

下面是一个简单的表单示例，包含一个文本框、一个密码框和一个提交按钮。

<form>
  <div class="form-group">
    <label for="username">Username</label>
    <input type="text" class="form-control" id="username" placeholder="Enter username">
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input type="password" class="form-control" id="password" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

示例二：带验证的表单

下面是一个带有验证的表单示例，包含一个文本框、一个密码框、一个文件上传框、一个单选框和一个复选框。

<form>
  <div class="form-group">
    <label for="username">Username</label>
    <input type="text" class="form-control" id="username" placeholder="Enter username" required>
    <small class="form-text text-muted">Choose a unique username.</small>
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input type="password" class="form-control" id="password" placeholder="Password" required minlength="6">
    <small class="form-text text-muted">Use at least one uppercase letter, one lowercase letter, one number and one symbol.</small>
  </div>
  <div class="form-group">
    <label for="photo">Upload a photo</label>
    <input type="file" class="form-control-file" id="photo" accept="image/*" required>
    <small class="form-text text-muted">Choose a photo to upload.</small>
  </div>
  <fieldset class="form-group">
    <legend>Gender</legend>
    <div class="form-check">
      <label class="form-check-label">
        <input type="radio" class="form-check-input" name="gender" id="male" value="male" required>
        Male
      </label>
    </div>
    <div class="form-check">
      <label class="form-check-label">
        <input type="radio" class="form-check-input" name="gender" id="female" value="female" required>
        Female
      </label>
    </div>
  </fieldset>
  <div class="form-check">
    <label class="form-check-label">
      <input type="checkbox" class="form-check-input" name="agree" id="agree" value="true" required>
      I agree to the terms and conditions
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

以上就是使用Bootstrap创建表单的完整攻略。使用Bootstrap可以省去很多CSS的写法，快速创建出符合美观、易用、响应式的表单。