Bootstrap表单Form全面解析

什么是Bootstrap表单Form？

Bootstrap表单Form是Bootstrap前端框架中一个用于构建表单的组件，用于简化表单的开发过程。通过使用Bootstrap表单Form，开发者可以快速构建出漂亮、易用、兼容性好的表单，提高工作效率。Bootstrap表单Form主要包括水平布局和垂直布局两种形式，以及各种输入框控件、按钮控件等。

如何使用Bootstrap表单？

使用Bootstrap表单Form相对简单，只需引入Bootstrap的样式及JS文件，然后以HTML形式编写表单即可。下面是一个简单的示例代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Bootstrap表单Form示例</title>
  <!-- 引入Bootstrap样式文件 -->
  <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <h1>Bootstrap表单Form示例</h1>
    <!-- 垂直布局表单 -->
    <form role="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>
      <button type="submit" class="btn btn-default">提交</button>
    </form>
  </div>
  <!-- 引入Bootstrap JS文件 -->
  <script src="./bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

通过上述代码，我们实现了一个简单的垂直布局的表单，并使用了Bootstrap的样式，包括输入框、标签、按钮等，从而实现了一个基本的表单功能。

Bootstrap表单常用组件

Bootstrap表单中常用的组件有：文本框、文本域、下拉菜单、单选框、复选框等。

文本框

文本框是表单中常见的输入控件，使用以下代码可以创建一个文本框：

<div class="form-group">
  <label for="username">用户名</label>
  <input type="text" class="form-control" id="username" placeholder="请输入用户名">
</div>

在Bootstrap表单组件中，文本框使用<input>标签创建，class属性为form-control，表示将文本框渲染为Bootstrap风格。

文本域

文本域与文本框类似，但可以输入多行文字，使用以下代码创建一个文本域：

<div class="form-group">
  <label for="content">内容</label>
  <textarea class="form-control" rows="3" id="content" placeholder="请输入内容"></textarea>
</div>

注意，这里使用<textarea>标签创建，与文本框的区别在于属性rows表示文本域的行数。

下拉菜单

下拉菜单是常用控件之一，可以用于选择单一的选项，使用以下代码创建一个下拉菜单：

<div class="form-group">
  <label for="sex">性别</label>
  <select class="form-control" id="sex">
    <option value="male">男</option>
    <option value="female">女</option>
  </select>
</div>

上述代码中，下拉菜单使用<select>标签创建，每个选项使用<option>标签创建，并分别指定了选项的值。

单选框

单选框用来选择单一的选项，使用以下代码创建一个单选框：

<div class="radio">
  <label>
    <input type="radio" name="sex" value="male" checked>
    男
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="sex" value="female">
    女
  </label>
</div>

上述代码中，单选框使用<input>标签创建，type属性为radio，name属性为同一组单选框指定相同的名称，value属性为指定的选项值。

复选框

复选框用于选择多个选项，使用以下代码创建一个复选框：

<div class="checkbox">
  <label>
    <input type="checkbox" name="hobby" value="reading">
    阅读
  </label>
</div>
<div class="checkbox">
  <label>
    <input type="checkbox" name="hobby" value="music">
    音乐
  </label>
</div>

上述代码中，复选框使用<input>标签创建，type属性为checkbox，同样需要指定相同的名称，以实现实现多选功能。

Bootstrap表单布局

Bootstrap表单组件提供了两种布局方式：水平布局和垂直布局。

水平布局

水平布局是一种表单布局方式，可以将标签和表单控件放在同一行中，以节省页面空间，同时更易于阅读和理解。使用以下代码创建一个水平布局表单：

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="username" class="col-sm-2 control-label">用户名</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="username" placeholder="请输入用户名">
    </div>
  </div>
  <div class="form-group">
    <label for="password" class="col-sm-2 control-label">密码</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="password" placeholder="请输入密码">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">提交</button>
    </div>
  </div>
</form>

在上述代码中，我们使用class属性为form-horizontal来指定水平布局，同时使用<div>标签包裹各个表单控件，使其能够放在同一行中，增强页面整体美观性。

垂直布局

垂直布局是一种表单布局方式，可以将标签和表单控件分别放置在不同的行中，以便更清晰的展示表单。在Bootstrap表单中，可以直接使用普通的表单代码来实现垂直布局。例如以下代码：

<form role="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>
  <button type="submit" class="btn btn-default">提交</button>
</form>

该代码即为垂直布局下的表单。

实例示例

下面是两个实际应用中使用Bootstrap表单Form示例：

示例一：登录表单

<form role="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>
  <button type="submit" class="btn btn-primary">登录</button>
</form>

该代码为一个较为简单的登录表单示例，其中使用了两个文本框和一个提交按钮。

示例二：注册表单

<form role="form" class="form-horizontal">
  <div class="form-group">
    <label for="username" class="col-sm-2 control-label">用户名</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="username" placeholder="请输入用户名">
    </div>
  </div>
  <div class="form-group">
    <label for="password" class="col-sm-2 control-label">密码</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="password" placeholder="请输入密码">
    </div>
  </div>
  <div class="form-group">
    <label for="repassword" class="col-sm-2 control-label">确认密码</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="repassword" placeholder="请重新输入密码">
    </div>
  </div>
  <div class="form-group">
    <label for="email" class="col-sm-2 control-label">邮箱</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="email" placeholder="请输入邮箱">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-success">注册</button>
    </div>
  </div>
</form>

该代码为一个注册表单示例，其中使用了多个文本框和一个提交按钮，采用了水平布局，使整个表单更加美观。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Bootstrap表单Form全面解析 - Python技术站