第3章 CHAPTER 3 表和新内容的理解 3.1表格、表单 3.1.1案例描述 在日常浏览网页中，每个人都使用过很多次登录、注册或者添加商品等功能。本案例中会使用表格和表单来实现如图31所示的注册表。 图31注册表 3.1.2知识引入 1. 表格 表格是网页制作中使用最多的技术之一。表格可以清晰明了地展现数据之间的关系，使对比分析更容易理解。在很多情况下，也可以使用表格对网页进行排版布局。 1) 表格结构 在HTML中使用标签来创建表格，
标签内包含了表名和表格本身内容的代码。表格是由特定数目的行和列组成的，其中行用标签表示，行由若干单元格构组成。单元格是表格的基本单元，用标签标签之中。多个单元格结合在一起构成了行，多个行结合在一起就构成了一个表格。 其用法如下所示：
表示，标签定义了一个列，嵌套于
第一行，第一列 第一行，第二列
第二行，第一列 第二行，第二列
2) 表格标签 HTML中有10个与表格相关的标签，各标签的含义及作用如下所示。  标签： 定义一个表格。 
标签： 定义一个表格标题，必须紧随在标签之后，且每个表格只能包含一个标题，通常这个标题会居中显示于表格上部。  标签： 在表格中定义一行。  标签中。  标签： 定义表格的表头。  标签： 定义一段表格主体(正文)，使用标签，可以将表格中的一行或几行合成一组，从而将表格分为几个单独的部分，一个标签就是表格中的一个独立的部分，不能从一个跨越到另一个中。  标签： 定义表格的页脚(脚注)。  标签： 定义表格中针对一个或多个列的属性值。只能在表格或标签中使用此标签。  标签： 定义表格列的分组。通过此标签可以对列进行组合以便进行格式化，此标签只能用在
标签： 定义表格内的表头单元格，标签内部的文本通常会呈现为粗体。 
标签： 定义表格中的一个单元格，包含在
标签内部。 注意： 使用、以及标签可以对表格中的行进行分组。如使表格拥有一个标题行、一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每个页面上。 示例代码如下所示： 表格标签示例
Table caption here
头 1 头 2 头 3
页脚 1 页脚 2 页脚 3
A B C
D E F
图32表格标签示例 表格标签代码效果如图32所示。 3) 表格属性设置 为了使表格的外观更加符合要求，还可以对表格的属性进行设置，比较常用的表格属性包括背景、宽高、对齐方式、单元格间距、文本与边框间距等，如表31所示。 表31表格属性列表 表格属性说明 border此属性定义表格的边框。比如，border=1，表示表格边框的粗细为1个像素（默认值），为0表示没有边框 bgcolor表格的背景色。取值方法举例：bgcolor=#ff0000或bgcolor=red。单元格
也可有此属性，如果设置了表格的背景色，又设置表格单元格的背景色，这种情况主要用于多单元格的表格 background表格的背景图。其值为一个有效的图片地址。也有此属性。同时设置背景色和背景图不冲突 width表格的宽度。取值从0开始，默认以像素为单位，与显示器的分辨率的像素是一致的。在800×600的显示分辨率下，如果表格设置成1000个像素的宽度，那么，得出的效果将导致IE的横向滚动条出现，只有通过滑动它才能看到表格最右边的内容，所以建议在设置表格的宽度时充分考虑显示分辨率问题。width的取值还可以使用百分比，如width="100%"，这种赋值法的好处是：表格的宽度将根据可显示的宽度来自我调整 续表 表格属性说明 height表格的高度，取值方法同width。提示：如果不是特别需要，建议不用设置表格的高度，系统会根据表格的内容自动设置高度。所谓特别需要，是指在一些特殊的情形下，需要表格的高度精确，比如，当通过表格的背景来发一张图片时，如果表格的高度不精确定义，图片就不可能完整或完美地显示 align表格的对齐方式，值有left（左对齐，默认）、center（居中）以及right（右对齐）。align定义的是表格自身的位置，这是一个很有用的属性，强烈建议使用它来规定表格的对齐方式，尽量不要使用

表格

、
表格
和
表格
标签来规定表格的位置，因为这样做将导致代码冗余。此外，当表格的宽度设置为100%，或者，表格的宽度设置成了占满它所在的容器的宽度，没有必要定义align属性 cellspacing单元格间距。当一个表格有多个单元格时，各单元格的距离就是cellspacing了，如若表格只有一个单元格，那么这个单元格与表格上、下、左、右边框的距离也是cellspacing cellpadding指该单元格里的内容与cellspacing区域的距离 colspan单元格水平合并，值为合并的单元格的数目 rowspan单元格垂直合并，值为合并的单元格的数目 示例代码如下所示： 表格属性示例
员工信息表
部门 姓名 联系电话 E-Mail
技术部 张三 18585426120 zhangs@haier.com
人事部 李四 18519529902 lis@haier.com
Compiled in 2020 by Mr. Zhang
使用过表格标签属性的代码页面效果如图33所示。 图33表格属性实例 2. 表单 表单在网页中主要负责数据采集功能。一个表单有3个基本组成部分。 （1） 表单标签： 这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 （2） 表单域： 包含了文本框、密码框、隐藏域、多行文本框、复选框、单选按钮、下拉列表框和文件上传框等表单输入控件。 （3） 表单按钮： 包括提交按钮、复位按钮和一般按钮； 用于将数据传送到服务器上或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的工作。 表单示例
账号:

密码:

单击"提交"按钮，表单数据将被发送到服务器上的"a.php"。

上述代码中，通过
和
标签表示表单的范围，表单内包含两个文本输入框，分别用于让访问者输入账号和密码； 还包含一个提交按钮，用于提交数据。此外，在表单标签中action的属性值“a.php”表示表单数据提交的目的地，该表单的提交方式通过method属性指定，值为"POST"。 通过IE浏览器查看该HTML，表单效果如图34所示。 图34表单示例 表单标签(
)用于声明表单，定义采集数据的范围，同时包含了处理表单数据的应用程序以及数据提交到服务器的方法。 其语法如下：
...
表单标签属性如表32所示。 表32form标签属性列表 属性值描述 acceptMIME_typeHTML5不支持。规定服务器接收到的文件的类型 acceptcharsetcharacter_set规定服务器可处理的表单数据字符集 actionURL指定处理表单中用户输入数据的URL（URL可为Servlet、JSP或ASP等服务器端程序），也可以将输入数据发送到指定的EMail地址等 enctypeapplication/xwwwformurlencoded multipart/formdata text/plain指定数据发送时的编码类型，默认值是application/xwwwformurlencoded，用于常规数据的编码。另一种编码类型是multipart/formdata，该类型将表单数据编码为一条消息，每一个表单控件的数据对应消息的一部分，以二进制的方式发送给服务器端。这种方法比较适合传递复杂的用户数据，如文件的上传操作 methodget post指定向服务器传递数据的HTTP方法，主要有get和post两种方法，默认值是get。get方式是将表单控件的name/value信息经过编码之后，通过URL发送，可以在浏览器的地址栏中看到这些值。而采用post方式传输信息则在地址栏看不到表单的提交信息。需要注意的是，当只为取得和显示少量数据时可以使用get方法；一旦涉及数据的保存和更新，即大量的数据传输时则应当使用post方法 nametext规定表单的名称 target_blank _self _parent _top用于指定在浏览器哪个框架中显示服务器的响应HTML，默认值是当前框架。现在大多数专业界面使用框架越来越少，所以此属性已很少使用 注意： 一般情况下，target属性的取值有如下情况： _blank——在一个新的浏览器窗口调入指定的文档； _self——在当前框架中调入文档； _parent——把文档调入当前框架的直接父框架集中，这个值在当前框架没有父框架集时等价于_self； _top——把文档调入原来最顶部的浏览器窗口中。 HTML5新增属性如表33所示。 表33表单标签的HTML5新增属性列表 属性值描述 autocompleteOn off规定是否启用表单的自动完成功能 novalidatenovalidate如果使用该属性，则提交表单时不进行验证 (1) 表单域。 表单域包含了文本框、密码框、隐藏域、多行文本框、复选框、单选按钮、下拉列表框和文件上传框等，用于采集用户输入或选择的数据。下面分别讲述各表单域。 (2) 文本框。 标签规定用户可以在其中输入数据的输入字段。在表单标签中使用，用来声明允许用户输入数据的是input元素，输入字段可通过多种方式改变，取决于type属性。 其语法格式如下： 文本框属性如表34所示。 表34文本框属性列表 属性值描述 acceptaudio/*video/*image/*MIME_type规定通过文件上传来提交的文件的类型，只针对type="file" alignLeft/right/top /middle/bottomHTML5已废弃，不建议使用。规定图像输入的对齐方式，只针对type="image" alttext定义图像输入的替代文本，只针对type="image" checkedchecked规定在页面加载时应该被预先选定的input元素，只针对 type="checkbox" 或者 type="radio" disableddisabled规定应该禁用的input元素 nametext name规定input元素的名称 sizenumber规定以字符数计的input元素的可见宽度 srcURL规定显示为提交按钮的图像的 URL，只针对type="image" typebutton checkbox color date datetime datetimelocal email file hidden image month规定要显示的input元素的类型 续表 属性值描述 type number password radio range reset search submit tel text time url week valuetext指定input元素 value 的值 maxlengthnumber规定input元素中允许的最大字符数 文本框HTML5新增属性，如表35所示。 表35文本框HTML5新增属性列表 属性值描述 autocompleteOn off规定input元素输入字段是否应该启用自动完成功能 autofocusautofocus规定当页面加载时input元素应该自动获得焦点 formform_idform属性规定input元素所属的一个或多个表单 formactionURL规定当表单提交时处理输入控件的文件的 URL，只针对 type="submit" 和 type="image" formenctypeapplication/xwwwformurlencodedmultipart/formdatatext/plain规定当表单数据提交到服务器时如何编码，只适合 type="submit" 和 type="image" formmethodgetpost定义发送表单数据到 action URL 的 HTTP 方法，只适合 type="submit" 和 type="image" formnovalidateformnovalidate覆盖form元素的 novalidate 属性 formtarget_blank_self_parent_topframename规定表示提交表单后在哪里显示接收到响应的名称或关键词，只适合 type="submit" 和 type="image" heightpixels规定input元素的高度，只针对type="image" listdatalist_id引用 datalist元素，其中包含input元素的预定义选项 maxnumberdate规定input元素的最大值 minnumberdate规定input元素的最小值 multiplemultiple规定允许用户输入到input元素的多个值 patternregexp规定用于验证input元素的值的正则表达式 placeholdertext规定可描述输入input字段预期值的简短的提示信息 readonlyreadonly规定输入字段是只读的 requiredrequired规定必需在提交表单之前填写输入字段 stepNewnumber规定input元素的合法数字间隔 widthpixels规定input元素的宽度，只针对type="image" (3) 多行文本框。 多行文本框(文本域)是一种用来输入较长内容的表单对象。文本区域中可容纳无限数量的文本，多行文本框中的文本的默认字体是等宽字体(通常是Courier)。 可以通过cols和rows属性来规定textarea的尺寸大小，不过更好的办法是使用CSS的height和width属性。 其语法格式如下： 多行文本框属性如表36所示。 表36多行文本框属性列表 属性值描述 colsnumber定义多行文本框的宽度，单位是单个字符宽度 nametext指定文本域的名称 rowsnumber规定文本区域内可见的行数 disableddisabled规定禁用文本区域 readonlyreadonly规定文本区域为只读 多行文本框HTML5新增属性如表37所示。 表37多行文本框HTML5新增属性列表 属性值描述 autofocusautofocus规定当页面加载时，文本区域自动获得焦点 formtext定义文本区域所属的一个或多个表单 maxlengthnumber规定文本区域允许的最大字符数 placeholderdisabled规定一个简短的提示，描述文本区域期望的输入值 requiredreadonly规定文本区域是必需的/必填的 wraphardsoft规定当提交表单时，文本区域中的文本应该怎样换行 (4) 密码框。 密码框是一种用于输入密码的特殊文本域。当访问者输入文字时，文字会被星号或其他符号代替，从而隐藏输入的真实文字。 其语法格式如下： 其中，  type="password"： 定义密码框。  name： 指定密码框的名称。  size： 定义密码框的宽度，单位是单个字符宽度。  maxlength： 定义最多输入的字符数。 注意： 密码框并不能保证安全，仅仅是使得周围的人看不见输入的内容，在传输过程中还是以明文传输，为了保证安全可以采用数据加密技术。 (5) 隐藏框。 隐藏域是用来收集或发送信息的不可见元素，网页的访问者无法看到隐藏域，但是当表单被提交时，隐藏域的内容同样会被提交。 其语法格式如下： 其中，  type="hidden"： 定义隐藏域。  name： 同text的name属性。  value： 定义隐藏域的值。 (6) 复选框。 复选框允许在待选项中选中一个以上的选项。每个复选框都是一个独立的元素。 其语法格式如下： 其中，  type="checkbox"： 定义复选框。  name： 同text的name属性。  value： 定义复选框的值。 注意： 通常情况下，对于一组复选框的name值推荐使用相同的值，这样提交表单后，在服务器端便于数据的处理。 (7) 单选按钮。 单选按钮只允许访问者在待选项中选择唯一的一项。该控件用于一组相互排斥的值，组中每个单选按钮控件的名字相同，用户一次只能选择一个选项。 其语法格式如下： 其中，  type="radio"： 定义单选按钮。  name： 同text的name属性，name相同的单选按钮为一组，一组内只能选中一项。  value： 定义单选按钮的值，在同一组中，单选按钮的值不能相同。 (8) 文件上传框。 文件上传框用于让用户上传自己的文件，文件上传框与其他文本域类似，但它还包含了一个浏览按钮。访问者可以通过输入需要上传的文件的路径或者单击“浏览”按钮选择需要上传的文件。 其语法格式如下： 其中，  type="file"： 定义文件上传框。  name： 同text的name属性。  size： 定义文件上传框的宽度，单位是单个字符宽度。  maxlength： 定义最多输入的字符数。 注意： 在使用文件域以前，需要确定服务器是否允许匿名上传文件。另外，在表单标签中必须设置enctype="multipart/formdata"来确保文件被正确编码； 表单的传送方式必须设置成post。 (9) 下拉列表框。 下拉列表框可以让浏览者快速、方便、正确地选择一些选项，同时可以节省页面空间，它通过标签至少包含一个时所使用的标注 selectedselected规定选项(在首次显示在列表中时)表现为选中状态 valuetext定义送往服务器的选项值 HTML5新增属性列表 属性值描述 autofocusautofocus规定在页面加载时下拉列表自动获得焦点 formform_id定义 其中，  type="submit"： 定义提交按钮。  name： 定义提交按钮的名称。  value： 定义按钮的显示文字。 ② 复位按钮。 复位按钮用来重置表单。 其语法格式如下： 其中，  type="reset"： 定义复位按钮。  name： 定义复位按钮的名称。  value： 定义按钮的显示文字。 注意： 复位按钮并不是清空表单信息，只是还原成默认值，例如，表单中有文本框，在该文本框中填入“李四”，当单击该复位按钮时，清除文本框中的“李四”，还原为“张三”。 ③ 普通按钮。 普通按钮通常用来响应JavaScript事件(如onclick)，用来调用相应的JavaScript函数来实现各种功能。 其语法格式如下： 其中，  type="button"： 定义普通按钮。  name： 定义按钮的名称。  value： 定义按钮的显示文字。  onclick： 通过指定脚本函数来定义按钮的行为。 网页中表单的用途很广，下面是一些典型表单的应用：  在用户注册某种服务时收集姓名、地址、电话号码、电子邮件和其他信息。  收集购买某个商品的订单信息、收集关于调查问卷信息等。  通过创建用户注册页面，演示HTML表单的综合应用。 在上面的情况下，通常要求用户输入关于个人的基本信息并提交到服务器，这些表单类似于在网站上注册用户时的表单。代码如下： 表单控件
用户名:
密码:
性别: 男 女
国家:
爱好: 音乐 旅游 登山 阅读 篮球 足球
个人简介:
  
通过IE查看该HTML，效果如图35所示。 图35表单控件应用案例 表格和表单 3.1.3案例实现 1. 案例分析 对图31进行分析，得出如图36所示结果。 图36表格分析 2. 代码实现 form test
姓名：
密码:
确认密码：
邮箱：
性别： 男 女
爱好： 吃饭 玩耍 休息
城市：
自我介绍：
3. 运行效果 通过Chrome查看该HTML，上述代码运行结果如图37所示。 图37表格实例 3.2HTML5新增标签 HTML5是一个新的网络标准，目的是取代现有的HTML 4.01、XHTML 1.0和DOM Level 2 HTML标准。它希望能够减少浏览器对于需要插件的丰富性网络应用服务(pluginbased Rich Internet Application，RIA)，如Adobe Flash、Microsoft Silverlight与Sun JavaFX的需求。 HTML5提供了一些新的元素和属性，其中有些在技术上类似了
和标签，例如