表单 - 前端学习教程_ 前端_前端开发

在前端页面开发的过程中，除了导航、列表和按钮等页面结构之外，表单也是页面结构中重要的组成部分。表单主要包括form、button和input等元素，通过在form元素中定义input和button等元素来实现表单页面结构。

Bootstrap提供了实现表单的组件，可以很方便地实现表单页面结构，下面通过例6-1演示表单页面结构的实现方式。

【例6-1】

创建C:\Bootstrap\chapter06\demo06.html文件，具体代码如下。

1  <!DOCTYPE html>
2  <html>
3  <head>
4   <meta charset="UTF-8">
5   <meta name="viewport" content="width=device-width, initial-scale=1.0">
6   <title>Document</title>
7   <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
8  </head>
9  <body>
10  <!-- 表单 -->
11  <form action="#">
12   <div class="form-group">
13    <label for="User">用户名</label>
14    <input type="text" class="form-control" id="User">
15    <label for="Password">密码</label>
16    <input type="password" class="form-control" id="Password">
17    <label for="Email1">邮箱地址</label>
18    <input type="email" class="form-control" id="Email1">
19   </div>
20   <button type="submit" class="btn btn-primary">提交</button>
21  </form>
22 </body>
23 </html>

上述代码中，第7行代码引入bootstrap.min.css文件；第11行代码定义form表单结构；第12行代码在form中定义类名为.form-group的div元素，表示表单组合元素；第13~18行代码在.form-group中定义类名为.form-control的input元素。.form-control是一个样式类，为了统一格式用的，用 .form-control 样式进行处理优化，包括常规外观、focus选（点）中状态和尺寸大小等。定义输入框的id值为User，并且与for属性值为User的label标签进行绑定；定义type的值为text，表示输入文本格式的内容；同理，实现表单页面结构中的密码框和邮箱地址。与用户名不同的是，密码框的type属性为password，用来定义密码字段，字段中的字符会被遮蔽；而邮箱的type属性为email，用来定义email地址的文本字段。

在浏览器中打开demo06.html文件，运行结果如图1所示。

图1 表单