「融职培训」Web前端学习 第2章 网页重构3 表单与表格元素

一、表格元素

在网页中，我们通常用表格来显示数据，例如下面的学生列表。

姓名年龄小红3岁小明2岁

本节我们介绍如何在网页中制作表格，先来看一下表格元素涉及到的标签有哪些，示例代码如下所示：

 1 <table>
 2     <thead>
 3         <tr>
 4             <th>姓名</th>
 5             <th>年龄</th>
 6         </tr>
 7     </thead>
 8     <tbody>
 9         <tr>
10             <td>小红</td>
11             <td>3岁</td>
12         </tr>
13         <tr>
14             <td>小明</td>
15             <td>2岁</td>
16         </tr>
17     </tbody>
18 </table>

这里需要注意的是，表格默认是没有样式的，我们添加了border属性来设置边框，width属性设置表格的宽度。在实际开发中，我们用css来设置表格的样式，而不是用表格的属性。

• table标签：表格容器
• thead标签：表示表头
• tbody标签：表示表体
• tr标签：表示行，内部一定是只有td或th
• th标签：表示表头单元格，字体会加粗
• td标签：表示单元格

合并单元格

• 通过colspan属性可以合并行，示例代码如下，colspan属性可以让单元格在同行占据两个单元格的位置。

 1 <table border="1" width="100%">
 2     <tr>
 3         <td align="center" colspan="2">学生列表</td>
 4     </tr>
 5     <tr>
 6         <td>小明</td>
 7         <td>2岁</td>
 8     </tr>
 9     <tr>
10         <td>小红</td>
11         <td>3岁</td>
12     </tr>
13 </table>

• 通过rowspan属性可以合并列，rowspan属性可以让单元格在同一列占据3行的位置。

 1 <table border="1" width="100%">
 2     <tr>
 3         <td rowspan="3">一班</td>
 4         <td>小明</td>
 5         <td>2岁</td>
 6     </tr>
 7     <tr>
 8         <td>小红</td>
 9         <td>3岁</td>
10     </tr><tr>
11         <td>小亮</td>
12         <td>16岁</td>
13     </tr>
14     <tr>
15         <td rowspan="3">二班</td>
16         <td>张三</td>
17         <td>2岁</td>
18     </tr>
19     <tr>
20         <td>李四</td>
21         <td>17岁</td>
22     </tr>
23     <tr>
24         <td>王五</td>
25         <td>18岁</td>
26     </tr>
27 </table>

关于表格我们先了解这些基本概念，后续的课程中我们会学到一些UI框架可以让表格元素变得更加美观。

二、表单元素

在网页中，我们通常用表单向服务器发送数据，例如下面一个最简单的登录功能。

 1 <form action="">
 2     <div>
 3         <label for="username">用户名：</label>
 4         <input id="username" type="text">
 5     </div>
 6     <div>
 7         <label for="password">密码：</label>
 8         <input id="password" type="password">
 9     </div>
10     <div>
11         <label>性别:</label>
12         <select>
13             <option>男</option>
14             <option>女</option>
15         </select>
16     </div>
17     <input type="submit" value="注册">
18 </form>

关于与服务器交互数据的内容，我们会在第八章详细讲解，本节内容，我们只要简单了解一下常用的表单元素即可。

我们先来看一个完整的表单，然后再来分别介绍表单涉及到的标签。

 1 <form action="">
 2     <div>
 3         <label for="username">用户名：</label>
 4         <input id="username" type="text">
 5     </div>
 6     <div>
 7         <label for="password">密码：</label>
 8         <input id="password" type="password">
 9     </div>
10     <div>
11         <label>性别:</label>
12         <select>
13             <option>男</option>
14             <option>女</option>
15         </select>
16     </div>
17     <input type="submit" value="注册">
18 </form>

form标签

1 <form action="" method="get"></form>

form标签是表单的容器，为了实现采集数据的功能，其他表单标签应当放在form标签之内。

关于form标签的更多功能会在前后台数据交互的课程中深入讲解，本章内容只对表单标签做初步的介绍。

input标签

1 <input type="text">  <!-- 文本框 -->
2 <input type="password">  <!-- 密码输入框 -->
3 <input type="radio">  <!-- 单选框 -->
4 <input type="checkbox" >  <!-- 复选框 -->
5 <input type="button">  <!-- 按钮 -->
6 <input type="submit">  <!-- 提交按钮 -->

input标签通过type属性可以分为多个类别，常用的input上面的代码已经列出：

• type=“text”：文本框，用于文本的输入。
• type=“password”：密码输入框，用于密码的输入，与文本框的区别是，输入的内容不能被用户看到。
• type=“radio”:单选框，通过name控制类别，name想通的radio只能被选择一个。
• type=“checkbox”:复选框，用过name控制类别，但是可以选择多个。
• type=“button”:按钮，如果不做进一步处理，没有任何功能。
• type=“submit”:提交按钮，可以将表单数据提交至网站后台，关于数据传输，后续会深入讲解。

label

通过label标签，可以指定文字相对应的表单空间，例如下面的示例，使用for属性对应input的id，这样当鼠标点击label标签的文字时，光标就会聚焦到相对的input标签之上。

1 <div>
2     <label for="username">用户名：</label>
3     <input id="username" type="text">
4 </div>

placeholder属性

placeholder可以设置文本框默认的提示信息，示例效果和代码如下所示：

用户名：

1 <div>
2     <label for="username">用户名：</label>
3     <input id="username" type="text" placeholder="请输入用户名">
4 </div>

下拉菜单

示例代码如下：

1 <form action="">
2     <label>请选择性别</label>
3     <select>
4         <option>男</option>
5         <option>女</option>
6     </select>
7 </form>

select标签定义了网页中的下拉菜单，下拉菜单的选项用option标签。

三、课后练习

一、制作一个显示学生信息的表格，要求如下

1. 列字段包括：班级、序号、姓名、性别、成绩。
2. 共五名学生，两名1班，三明2班，班级需要合并单元格

二、制作一个调查问卷的网页效果，需要用户填写的内容如下所示：

1. 用户名（文本框）;
2. 密码（密码输入框）
3. 性别（单选框，男和女只能选一个）;
4. 最喜欢的运动（下拉菜单，有三个选项：足球、篮球、羽毛球）;
5. 提交按钮;

【融职教育】在工作中学习，在学习中工作