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班，班级需要合并单元格
二、制作一个调查问卷的网页效果，需要用户填写的内容如下所示：
- 用户名（文本框）;
- 密码（密码输入框）
- 性别（单选框，男和女只能选一个）;
- 最喜欢的运动（下拉菜单，有三个选项：足球、篮球、羽毛球）;
- 提交按钮;
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。