Bootstrap输入标签

Bootstrap是一种流行的前端框架，其中包括许多可用于创建Web表单的预定义组件。其中之一是输入标签，使您可以创建具有多个输入选项的用户表单。

输入标签类型

Bootstrap输入标签有以下类型：

• 文本输入
• 密码输入
• 数字输入
• 电子邮件输入
• 电话输入
• URL输入
• 文本域

输入标签可以使用以下HTML元素来创建：

• <input> 元素
• <textarea> 元素

创建输入标签

以下是创建 Bootstrap 输入标签的 HTML 代码：

<!--创建文本输入框-->
<div class="form-group">
  <label for="exampleFormControlInput1">Email address</label>
  <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>
<!--创建密码输入框-->
<div class="form-group">
  <label for="exampleFormControlInput2">Password</label>
  <input type="password" class="form-control" id="exampleFormControlInput2" placeholder="password">
</div>
<!--创建数字输入框-->
<div class="form-group">
  <label for="exampleFormControlInput3">Number input</label>
  <input type="number" class="form-control" id="exampleFormControlInput3" placeholder="Enter a number">
</div>
<!--创建电子邮件输入框-->
<div class="form-group">
  <label for="exampleFormControlInput4">Email input</label>
  <input type="email" class="form-control" id="exampleFormControlInput4" placeholder="name@example.com">
</div>
<!--创建电话输入框-->
<div class="form-group">
  <label for="exampleFormControlInput5">Phone number input</label>
  <input type="tel" class="form-control" id="exampleFormControlInput5" placeholder="Phone number">
</div>
<!--创建URL输入框-->
<div class="form-group">
  <label for="exampleFormControlInput6">URL input</label>
  <input type="url" class="form-control" id="exampleFormControlInput6" placeholder="https://example.com">
</div>
<!--创建文本域输入框-->
<div class="form-group">
  <label for="exampleFormControlTextarea1">Example textarea</label>
  <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>

这些输入标签将创建具有不同类型和占位符的文本框，例如电子邮件、电话号码等。

布局输入标签

您可以在Bootstrap中使用 form-inline 或 form-horizontal 类来布局输入标签。

form-inline 将使输入标签在同一行内且格式紧凑，适用于小型表单。

<form class="form-inline">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="First Name">
  </div>
  <div class="form-group mx-sm-3">
    <input type="text" class="form-control" placeholder="Last Name">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

form-horizontal 将使输入标签在一个水平行中，适用于大型表单。

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

结论

Bootstrap输入标签是创建 Web 表单中的重要组件之一，提供现成的样式和布局选项。这些简单易用的组件可用于开发各种表单应用程序。