第二章 表格和表单
内容回顾
- HTML的基本标签有哪些
- HTML的标题标签和段落标签是什么
- HTML的文本标签有哪些
- 如何在页面中插入图片和视频
本章内容
如何使用表格展示数据，如何使用表单收集数据。
第一节 表格
1.表格的基本结构
表格的作用是用于展示数据，例如，财务报表，公交车时刻表，电视节目表。在大多数情况下，这类信息都是由列标题或行标题加上数据本身构成。
下面是一个表格的基本结构:
在HTML中定义表格的基本标签:
标签说明<table><table>是表格的最外层标记，一个表格是从<table>开始到</table>结束<tr>网页的表格是按照行画出的。每出现一对<tr></tr>表示一行，<tr>的上一级标签是<table><td><td>元素表示表格中的数据，在表格中用于包含单元格的内容。<td>到</td>表示行中的一个单元格，<td>和</td>中的内容个旧市单元格的内容，<td>的上一级标签是<tr><th><th>和<td>表示的欧式单元格，但是<th>元素中的内容默认居中并且以粗体格式显示。<th>经常用于表头的单元格，用于表示列标题。<caption>在<caption>标记中的文字就作为表格标题，通常会居中显示在表格上方。<caption>标记必须直接放置到<table>标记之后，每个表格只能设置一个标题。
<!DOCTYPE html>
<html>
<head>
<title> New Document </title>
</head>
<body>
<table border="1">
<caption>学生信息表</caption>
<!--标题行-->
<tr>
<!--列标题-->
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>爱好</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
<td>唱歌</th>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>18</td>
<td>跳舞</th>
</tr>
<tr>
<td>王武</td>
<td>男</td>
<td>18</td>
<td>运动</th>
</tr>
</table>
</body>
</html>
2.表格的常用属性
属性说明border设置表格的边框，数值越大边框越粗width表格的宽度，可以设置为数值和为百分比height表格的高度, 可以设置为数值和百分比bgColor设置表格的背景颜色background设置表格的背景图片align设置表格在网页中的对齐方式:left(靠左),right(靠右),center(居中)colspan对单元格进行列合并rowspan对单元格进行行合并
<!DOCTYPE html>
<html>
<head>
<title> New Document </title>
</head>
<body>
<!--background="swk.png": 背景图片-->
<table border="10"
width="50%"
height="300"
bgColor="#cc99ff"
align="center"
>
<caption>学生信息表</caption>
<!--标题行-->
<tr>
<!--列标题-->
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>爱好</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
<td>唱歌</th>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>18</td>
<td>跳舞</th>
</tr>
<tr>
<td>王武</td>
<td>男</td>
<td>18</td>
<td>运动</th>
</tr>
</table>
</body>
</html>
跨列合并和跨行合并:
<!DOCTYPE html>
<html>
<head>
<title> New Document </title>
</head>
<body>
<table border="1" width="300" height="300">
<tr>
<!--跨列合并-->
<td colspan="2">1</td>
<td>2</td>
</tr>
<tr>
<!--跨行合并-->
<td rowspan="2">4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title> New Document </title>
</head>
<body>
<table border="1" width="300" height="500">
<tr>
<td colspan="2" align="center">联系人通讯录</td>
</tr>
<tr>
<td>姓名</td>
<td>联系方式</td>
</tr>
<tr>
<td rowspan="2">张三</td>
<td>手机:1311231566</td>
</tr>
<tr>
<td>QQ:234234243</td>
</tr>
<tr>
<td rowspan="2">李四</td>
<td>手机:1321231231</td>
</tr>
<tr>
<td>QQ:43234234</td>
</tr>
</table>
</body>
</html>
3.表格的嵌套和表格分组
- 表格中可以嵌套其他元素:
<!DOCTYPE html>
<html>
<head>
<title> New Document </title>
</head>
<body>
<table border="1" width="800" align="center">
<tr>
<td align="center">
<a href="#">菜单1</a>
<a href="#">菜单2</a>
<a href="#">菜单3</a>
<a href="#">菜单4</a>
<a href="#">菜单5</a>
<a href="#">菜单6</a>
</td>
</tr>
<tr>
<td align="center">
<table border="1" width="600" height="400">
<tr>
<td>左边</td>
<td>中间</td>
<td>右边</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center">
<img src="swk.png"/>
</td>
</tr>
</table>
</body>
</html>
- 表格分组显示
表格的结构可以分为:头部(<thead>),主体(<tbody>),页脚(<tfoot>)
<!DOCTYPE html>
<html>
<head>
<title> New Document </title>
</head>
<body>
<table border="1" width="300" align="center">
<thead>
<tr>
<th>月份</th>
<th>收入(￥)</th>
</tr>
</thead>
<tfoot>
<tr>
<td>总计</td>
<td>5800</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>一月</td>
<td>1800</td>
</tr>
<tr>
<td>二月</td>
<td>2000</td>
</tr>
<tr>
<td>三月</td>
<td>2000</td>
</tr>
</tbody>
</table>
</body>
</html>
第二节 表单
1.<form>标签
<form>标签是表单的根标签，所有的表单元素都要位于form标签之间。
form标签的常用属性如下:
属性说明name定义表单的名称action定义服务器端的一个处理程序地址。用于接受表单提交的数据。我们现在学习的是静态HTML，所以没有服务器端的处理程序，因此这个属性我们可以不写。method定义表单向服务器端提交数据的方式，方式有两种:get和post。get方式会将提交的数据显示在地址栏中，而post不会。
基本语法:
<form name="loginFrm" action="login.action" method="post">
...
</form>
2.<input>元素
一个表单重要的两个部分是表单域和表单按钮。表单域包含了文本框，密码框，隐藏域，多行文本框，复选框，单选框，下拉选择框，和文件上传等组件。表单按钮包括表单提交按钮，重置按钮，普通按钮，以及图片按钮。
该标签可以在表单中定义各种表单控件。
基本语法:
<input type="某种表单元素类型" name="表单元素名称"/>
如下是<input>标签的属性说明:
属性功能type定义表单元素类型name表单元素的名称size主要用于单行文本框和密码框，用于定义框的长度。maxLength主要用于单行文本框和密码框，用于设置可输入的最大字符数。value对于单行文本框和密码框而言，表示在框中输入的数据。对于复选框和单选按钮，则表示选中的对应项的数值。对于按钮而言，表示按钮表面的文本。checked用于单选按钮和复选框，设置某一项处于选中状态。
<input>元素中type属性的取值说明:
type属性取值说明text该元素为单行文本框password该元素为密码框，输入的内容默认显示为* 或者·radio表示元素为单选按钮checkbox表示元素为复选框submit元素为提交按钮，作用：可以将表单数据提交给服务器端的目标程序。reset重置按钮button普通按钮image图片按钮，作用于submit一致，也可以向服务器端提交数据file文件上传控件hidden隐藏文本框。类似于text,但不可见。主要用于向服务器传递数据。
1.1 文本框和密码框
是最常用的两个表单元素，在登录，注册页面经常用到。
基本语法:
<input type="元素类型" name="元素名称" readonly="只读" size="长度" maxLength="可输入的最大字符数" value="默认值"/>
<!DOCTYPE html>
<html>
<head>
<title> New Document </title>
</head>
<body>
<form>
账号:<input type="text" name="account" value="Marry"/>
<br/>
密码:<input type="password" name="pass"/>
<br/>
年龄:<input type="text" name="age" maxLength="3"/>
</form>
</body>
</html>
1.2 按钮
在表单中常用的按钮有四种:提交按钮，重置按钮，普通按钮，图片按钮。
- 提交按钮
type属性为submit，用于将表单的数据提交到服务器端。 - 重置按钮
type属性为reset, 用于将表单元素的数据恢复为初始状态。 - 普通按钮type属性为
buton，一般和javascript结合使用。 - 图片按钮type属性为
image,作用和提交按钮一样，按钮呈现为图片样式。
基本语法:
<input type="submit/reset/button/image" value="按钮文本"/>
1.3 单选按钮和复选框
单选按钮的type属性设置为radio。如果想要多个单选按钮构成互斥关系，则需要将它们的name属性设为一样的值。此时，这一组单选按钮只能选择其中一项。
复选框的type属性设置为checkbox。如果多个复选框的name属性设为一样，则这几个复选框就属于同一组选项。此时，复选框可以选择多个选项来代表这组选项的值。
<!DOCTYPE html>
<html>
<head>
<title> New Document </title>
</head>
<body>
<form>
性别:
<input type="radio" name="sex" value="man"/>男
<input type="radio" name="sex" value="woman"/>女
<hr/>
个人爱好:
<input type="checkbox" name="hobby" value="dancing"/>跳舞
<input type="checkbox" name="hobby" value="song"/>唱歌
<input type="checkbox" name="hobby" value="basketball"/>打篮球
<hr/>
<input type="submit" value="提交"/>
</form>
</body>
</html>
1.4 文件域
文件域类型用于文件上传，在设计网站时，有时会需要用户上传一些本地计算机上的一些文件。这时候使用文件域就会非常方便。
<!DOCTYPE html>
<html>
<head>
<title> New Document </title>
</head>
<body>
<form>
姓名:<input type="text" name="name"/>
<br/>
照片:<input type="file" name="photo"/>
<br/>
<input type="submit" value="提交"/>
</form>
</body>
</html>
1.5 隐藏域type=hidden
hidden类型可以定义一个隐藏的表单控件。在浏览器中，这个隐藏控件用户是看不到的。通常情况下，设计者可以利用隐藏域表单控件存储一些数据，作为一个页面变量。
<input type="hidden" name="var" value="1000"/>
<!DOCTYPE html>
<html>
<head>
<title> New Document </title>
</head>
<body>
<form>
姓名:<input type="text" name="name"/>
<br/>
照片:<input type="file" name="photo"/>
<br/>
<input type="submit" value="提交"/>
<br/>
<!--隐藏域控件-->
<input type="hidden" name="var" value="1000"/>
</form>
</body>
</html>
1.6 多行文本框<textarea>
<textarea>和</textarea>标签就用于定义一个多行文本域，常用于需要输入大量文字的地方，例如，留言，自我介绍等。多行文本框对于输入的文本长度没有任何限制，多行文本框在垂直和水平方向都可以有滚动条。
基本语法：
<textarea rows="行数" cols="列数">
这是多行文本框的内容
</textarea>
<!DOCTYPE html>
<html>
<head>
<title> New Document </title>
</head>
<body>
<form>
个人简介:<br/>
<textarea rows="20" cols="40">这是简介的内容...</textarea>
</form>
</body>
</html>
1.7列表框<select> <option>
select标签是和<option>标签结合使用的。一个<option>标签就是下拉菜单中的一项。
如下是<option>标签的属性:
属性说明value表示当前选项的值。value设置的数据会在表单提交时，发送到服务器。如果省略value属性，则会将option设置的文本提交到服务器。selected如果option设置了这个属性，则这个option选项会处于选中状态。
语法:
<select name="名称">
<option value="选项值1">选项文本1</option>
<option value="选项值2">选项文本2</option>
</select>
<!DOCTYPE html>
<html>
<head>
<title> New Document </title>
</head>
<body>
请选择你最喜欢的编程语言:
<br/>
<select name="language">
<option value="">请选择</option>
<option value="java">JAVA</option>
<option value="html" selected="selected">HTML</option>
<option value="c#">C#</option>
</select>
</body>
</html>
3.<input>标签高级属性
HTML5中对<input>定义了很多全新的表单输入类型，这些新的表单类型大大简化了程序员编程的复杂度，提供了很好的控制和便捷的验证方法。
3.1 type="url"类型
定义url类型的输入表单，是在input标签中设置type属性值为url。当提交数据时，表单会对输入的url路径进行自动验证，如果输入的是不合法路径，则会有错误提示。
基本语法:
<input type="url" name="名称"/>
<!DOCTYPE html>
<html>
<head>
<title> New Document </title>
</head>
<body>
<form>
请输入个人主页地址:
<br/>
<input type="url" name="website"/>
<input type="submit" value="提交"/>
</form>
</body>
</html>
输入的地址格式错误:
输入正确的地址格式:
注意:测试url元素的时候，要使用FireFox,Chrome,高版本的IE浏览器。
3.2 type=email邮箱类型
定义email类型的输入表单，是在input 标签中设置type属性值为email。当提交数据时，表单会对输入的邮箱地址自动进行验证，如果用户输入的数据不符合邮箱格式，则会提示错误信息。
基本语法:
<input type="email" name="名称"/>
<!DOCTYPE html>
<html>
<head>
<title> New Document </title>
</head>
<body>
<form>
姓名:<input type="text" name="myname"/>
<br/>
邮箱:<input type="email" name="myemail"/>
<br/>
<input type="submit" value="提交"/>
</form>
</body>
</html>
邮箱格式输入错误:
输入正确的邮箱格式:
3.3 日期和时间
HTML5之前日期和时间是需要另外编程插入选择日期和时间的控件。现在HTML5提供了多种新的日期和时间输入表单。用户可以方便的通过鼠标选择日期和时间。
基本语法:
<input type="时间日期关键字" name="名称"/>
<!DOCTYPE html>
<html>
<head>
<title> New Document </title>
</head>
<body>
<form>
日期与时间类型的输入框:<br/>
<input type="date" name="d1"/><br/>
<input type="time" name="d2"/><br/>
日期和时间组合框:<br/>
<input type="datetime-local"/>
</form>
</body>
</html>
在Chrome浏览器中支持比较完善:
3.4 数字类型表单元素
如果要在HTML5中输入整数，有两种数字类型可以实现:number和range。这两种类型的属性都是一样的，唯一不同之处在于页面中展现的形式。
基本语法:
<input tpye="range或者number" name="名称" max="最大值" min="最小值" step="步长" value="初始值"/>
<!DOCTYPE html>
<html>
<head>
<title> New Document </title>
</head>
<body>
<form>
输入0-100之间的数字:
<input type="range" name="num1" min="0" max="100" value="30"/><br/>
输入10-50之间的数字(步长为2):
<input type="number" name="num2" min="10" max="50" step="2"/><br/>
<input type="submit" value="提交"/>
</form>
</body>
</html>
3.5 color类型元素
HTML5提供了type为color的input表单元素，打破了以前设计网页时，如果想要选择一种颜色，必须依赖于特定的插件。现在用户使用color类型表单元素，可以使用鼠标进行自由的选择。
基本语法：
<input type="color" name="名称"/>
<!DOCTYPE html>
<html>
<head>
<title> New Document </title>
</head>
<body>
<form>
选择颜色:
<input type="color" name="select_color"/>
<input type="submit" value="提交"/>
</form>
</body>
</html>
3.6 fieldset控件组
<fieldset>标签用于对同一个表单中的控件进行分组，也可以将一个网页上的不同表单进行分组。
<legend>标签与<fieldset>标签搭配使用。<legend>标签可以为该控件组定义一个标题。
基本语法:
<fieldset>
<legend></legend>
</fieldset>
<!DOCTYPE html>
<html>
<head>
<title> New Document </title>
</head>
<body>
<form>
<fieldset>
<legend>用户登录</legend>
账号:<input type="text" name="usrename"/>
<br/>
密码:<input type="password" name="userpass"/>
<br/>
<input type="submit" value="提交"/>
</fieldset>
</form>
</body>
</html>
3.7通用表单属性
在这一节中我们介绍几个很有特点的通用属性，这些属性是input标签常用的公用属性:
<!DOCTYPE html>
<html>
<head>
<title> New Document </title>
</head>
<body>
<form>
姓名:<input type="text" name="username" required="required"
placeholder="请输入姓名"/>
<br/>
电话:<input type="text" name="phone" autofocus="autofocus" required="required"/>
<br/>
地址:<input type="text" name="address" required="required"/>
<br/>
<input type="submit" value="提交"/>
</form>
</body>
</html>
作业
作业1
作业2
作业3
作业4
