Bootstrap表单

一、基础表单

Bootstrap基础表单是最简单和最常用的表单类型。以下是一个基本表单的示例：

<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-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>

在这个简单的表单示例中，我们使用了多个组件，如输入框、标签、文本域和按钮等。此外，我们还使用了一些特殊的类，如form-group，form-control等，这些类的组合使表单看起来更好，更具有可读性。

二、内联表单

内联表单是另一种常用的表单类型，特点是表单元素被置于一行内。以下是一个内联表单的示例：

<form class="form-inline">
  <div class="form-group mb-2">
    <label for="staticEmail2" class="sr-only">Email</label>
    <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="email@example.com">
  </div>
  <div class="form-group mx-sm-3 mb-2">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>

我们使用了form-inline类来创建一个内联表单。在内联表单中，表单元素被放在一行，每个元素之间的间隔使用margin类来控制。

三、水平表单

水平表单是一种表单类型，其中标签和输入框位于同一行中。以下是一个水平表单的示例：

<form>
  <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>

在这个简单的表单示例中，我们使用了多个组件，如标签、输入框和按钮等。此外，我们还使用了一些特殊的类，如form-group，col-sm-2等，这些类的组合使表单看起来更好，更具有可读性。

四、表单控件尺寸

Bootstrap表单提供多种控件尺寸，使开发人员可以自定义表单控件的大小。以下是其他几种控件尺寸的示例：

1.大号表单控件

<form>
  <div class="form-group form-group-lg">
    <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
  </div>
  <div class="form-group">
    <input class="form-control" type="text" placeholder="Default input">
  </div>
  <div class="form-group form-group-sm">
    <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
  </div>
</form>

2.小号表单控件

<form>
  <div class="form-group form-group-lg">
    <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
  </div>
  <div class="form-group">
    <input class="form-control" type="text" placeholder="Default input">
  </div>
  <div class="form-group form-group-sm">
    <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
  </div>
</form>

3.默认表单控件大小

<form>
  <div class="form-group form-group-lg">
    <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
  </div>
  <div class="form-group">
    <input class="form-control" type="text" placeholder="Default input">
  </div>
  <div class="form-group form-group-sm">
    <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
  </div>
</form>

五、表单验证

针对表单输入异常的情况，Bootstrap表单提供了表单验证的功能。以下是一个表单验证的示例：

<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-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>

在这个表单验证的示例中，我们给邮件输入框添加了一个小型的有关输入信息的说明文本，并且给邮箱输入框加上了表单验证的规则。

六、结论

以上是我们对Bootstrap表单的几个方面的阐述。本文介绍了基础表单、内联表单、水平表单、表单控件尺寸以及表单验证等内容。这些都是Bootstrap表单最基本的使用方法，相信本文可以帮助你更好地理解和使用Bootstrap表单。