第3章 表格、表单和框架.ppt

1、第三章,表格、表单控件、框架,课程回顾,上次课我们主要讲了： 文字的排版 图片的应用技巧 超链接的应用技巧,2,本章节授课目标,数据表格的使用规范 掌握表单及表单控件的使用 表单控件的事件驱动 框架在网页中的应用,3,第一节,表格,数据表格, 标签被用来定义 HTML 表格 一个标准的数据表格应该包括表头组、表身组和表尾组。,5,注：如果要使用 thead、tfoot 以及 tbody 元素，就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了,数据表格,标准的数据表格结构如下图所示：,6,表格 表头组 表尾组 表身组 ,tr代

2、表一行,td代表一列，一 个单元格,数据表格,完整数据表格例子,数据表格,但是在一般情况下，表格的表头组、表尾组都可以不编写，甚至连都不需要编写，简化后的表格结构如下：,8,表格 表行 单元格 ,数据表格,简化后的数据表格例子,元素特点, ：定义一个表格。每一个表格只有一对和，一张页面中可以有多个表格 ：定义表格的行，一个表格可以有多行，所以对于一个表格来说不是唯一的 ：定义表格的一个单元格。每行可以有不同数量的单元格，在和之间是单元格的具体内容 ：定义表头，多在表格第一tr内使用，取代td的位置,10,注：上述的4个元素必须、而且只能够配对使用。缺少任何一个元素，都无法定义出一个表格,属性,

3、width：规定表格的宽度 align：规定表格相对周围元素的对齐方式 bgcolor：规定表格的背景颜色 border：规定表格边框的宽度 frame：规定外侧边框的哪个部分是可见的 rules：规定内侧边框的哪个部分是可见的 summary：规定表格的摘要 cellpadding：规定单元边沿与其内容之间的空白 cellspacing：规定单元格之间的空白,11,Cellspacing,cellspacing：单元格间距 通常情况，我们为了不让单元格之间显得太拥挤，通过table的cellspacing属性让单元格产生一定间隔,12,技巧：当我们需要单元格具有边框时，用td的边框会造成相邻

4、两边框叠加，并且在td内没有内容时，该单元格不会显示。 那么我们通常采用cellspacing让单元格之间产生1px的间距，通过table的背景让单元格边框出现, 月份 工资 8月 100￥ ,td,与table一样，td的属性基本都已被css所取代，只有两个是会被我们经常用到的： colspan：可跨的列数 rowspan：可跨的行数,13,表格的嵌套,通常我们只需要灵活的使用td的跨行和跨列特性，就能完成比较复杂的表结构 但是如果数据表的结构过于复杂，无法通过td来划分实现，那么我们就可以用表格的嵌套来实现 在 之间再插入一个表格，可以实现表格嵌套,14, ,练习,表格练习,15,小结,有

5、问题吗？,16,第二节,表单,表单能做什么,表单： ,是HTML的一个重要部分，提供一个入口，主要用于采集和提交用户输入的信息，把数据提交给后台程序处理 表单由很多表单子元素组成，即表单控件，作用是提供不同类型的容器，记录浏览者输入的数据。 一个页面中可以有多个表单，但要保证一个表单只能提交一次数据。 表单最常见应用：用户登陆界面、用户注册界面、用户添加留言界面、网页问卷调查等。,18,表单的属性,action：action作为表单的提交对象，是必须设定路径值的，该值可以是绝对路径，也可以是相对路径，它代表了从表单中采集到的数据，将被提交到哪里处理 method：规定如何发送数据（以什么方式提

6、交） method有两种方法：get和post。其中post为最常用的方法 get方法通过URL传数据给程序，数据容量小并且内容暴露在URL中,非常不安全。其中？连接地址与变量，&连接变量与变量 post方法能传输大量数据，并且所有操作对用户来说都是不可见的，非常安全。,19,表单的属性,编码方式(enctype)： 当需要做文件上传或者图片上传的时候，这个功能是表单的 规定在发送到服务器之前应该如何对表单数据进行编码。默认地，表单数据会编码为 application/x-www-form-urlencoded。就是说，在发送到服务器之前，所有字符都会进行编码（空格转换为 + 加号，特殊符号转

7、换为 ASCII HEX 值） 通常情况，我们都不需要对enctype属性进行设定，但是表单中如果存在文件上传时，必须将其值设为 multipart/form-data，否则文件不会上传上去,常用的表单控件,21,单行文本输入框,：单行文本输入框允许用户输入一些简短的单行信息，如用户姓名：,22,密码输入框, ：与单行文本输入框类似，密码输入框也允许用户输入一些简短的单行信息，但这些信息并不以明文显示，而是显示为 *：,23,复选框, ：复选框允许用户在一组选项里，选择多个： 用checked表示缺省已选的选项,24,苹果 桔子 芒果,苹果,单选框, ：使用单选框，让用户在一组选项里只能选择一

8、个： 用checked表示缺省已选的选项,25,苹果 桔子 芒果,苹果,下拉框, ：既可以用做单选，也可以用做复选，默认为单选。 单选,26, 北京 天津 上海 武汉 沈阳 ,下拉框,复选 设置其multiple属性，可实现复选，用户可通过ctrl+鼠标左键来实现多选效果,27, 北京 天津 上海 武汉 沈阳 ,下拉框,用selected表示缺省已选的选项 Tips: 与其他标签元素相比较，下拉框的z-index值最大，总会显示在最上面，除了iframe可以遮住它。但是z-index值调整的适当的话，像div这些元素也可以盖住iframe,28, 苹果 桔子 芒果 , & , ：定义下拉列表中

9、的一个选项 ：可将 option 分组,29,多行输入框, ：主要用于输入较长的文本信息 textarea标签与input标签不同，没有value属性，它的值要被填写在标签内部： cols和rows两个属性，分别代表输入框的宽度和高度，这里并没有用width和height来表示，而是用列和行的概念,30,多行,按钮, ：按钮一般作为触发表单事件的最终对象，它具有三种不同功能的形态，由type属性来区分： Type = “button”：普通按钮，多用于js触发事件的起点 Type = “submit”：提交按钮，点击后会直接提交表单数据 Type = “reset”：重置按钮，点击后会清空表单

10、数据,31,注: a按钮上显示的文字内容，由value属性决定，如：value=“普通按钮” b默认情况下，提交按钮(submit)会最先获得焦点,标签, ： 标签为 input 元素定义标注（标记） label 元素不会向用户呈现任何特殊效果，与普通标签无异 但是label具有特殊的鼠标可用性 通过 for 属性与相关元素的 id 属性相关联,32, 男 女 ,隐藏表单, ：hidden 对象代表一个 HTML 表单中的某个隐藏输入域，它在用户界面是不可见的，但是其value值却可以跟随其他表单数据一起提交 隐藏表单拥有不占位、不可见的特点，可以将它放在from标签内部的任何位置 除了不可见

11、，hidden对象与其他表单元素没有区别，我们同样可以通过JS在前台对其进行操作 通常我们需要传递一些非用户输入值的时候，就可以使用它来操作，如：,33, 我们将数据表中的ID字段值赋给隐藏表单的value，当表单被提交后，我们就可以从后台取得这个值,文件上传表单, ：文件上传域 点击浏览，可查看本地目录 在文本框输入绝对路径，也可找到文件 若需要上传文件，需将 form 的 enctype 属性设为 multipart/form-data file 表单不允许设定初始值或通过 js 赋值,34,图片按钮, ： 相当于 ，它的作用也是提交表单数据。不同的是，它比“submit”按钮多一个src

12、属性，输出效果是以一个图片作为按钮来使用,35,注：由于使用css来控制元素背景图更为灵活，因此基本上image控件已经不被我们所使用,小结,有问题吗？,36,第三节,框架,框架的使用,在浏览网页时，浏览器的一个窗口一般只能显示一个页面。但是HTML技术提供了一种特殊的页面浏览方法，能使浏览者在一个窗口中浏览多个页面，这就是框架页面。 框架(frameset) :其作用是指定一个框架集，用于组织多个框架和嵌套框架集，从而达到多个页面同时出现的效果 FRAMESET 元素是 FRAME 元素的容器，HTML 文档可包含 FRAMESET 元素或 BODY 元素之一，而不能同时包含两者,38,框架

13、的使用,body容器 frameset容器,39,框架的结构分析,框架页面上有多个frame，每个HTML文件占据一个frame，而且多个frame可以同时显示在同一个浏览器窗口内，也就是一个包含多个HTML文档的HTML框架集页面。,40,语法规则,框架由一对定义 有两个属性：rows和cols rows：定义上下分割的框架的大小 cols：定义左右分割的框架的大小 在定义大小时，rows和cols可以使用绝对大小或以百分比为单位，我们还可以用 “ *” 来让框架自适应大小,41,应用 窗口排列方式,纵排多个窗口 排列方式,42, ,应用 窗口排列方式,横排多个窗口 排列方式,43, ,框架

14、frameset 的属性,frameborder设置框架边框，值有四种形式 1,0，yes,no framespacing ：frame之间的间距，单位为像素，间距越大，边框越粗（火狐浏览器不支持） bordercolor ：用于设置边框颜色,44,注：0为不显示边框，1为显示边框,框架 frame 的属性,frame name：定义该框架的名字。这个名字可以被一些网页元素引用，如被元素引用 src：在本框架里显示网页的URL,45,超链接的打开方式,在当前框架中打开超链接页面，与在普通页面中打开超链接的方式一样，只是相对上一层，我们多了一些选择： 默认就是在当前框架页中打开,也可以采用tar

15、get=“_self” 在指定框架中打开超级链接页面：target=“name” 新开窗口打开链接页面：target=“_blank” 跳出整个框架集：target=“_parent”,46,frame属性,scrolling属性，就是用来设定框架中滚动条的显示方式，同时我们也可以用css来控制框架的滚动条 Scrolling：是否显示滚动条，可以有三种值：yes, no, auto Noresize：框架在浏览器里不可以被调整大小,47,默认情况下，框架体是可以通过鼠标拉伸改变大小的，通过设定noresize，则可以避免因鼠标拖动造成的页面混乱,复杂帧结构的框架页面, ,48,嵌入式框架(i

16、frame),Frameset框架是无法与body共存的，那么如果我们需要body，同时又需要框架该怎么办呢？ iframe：嵌入式框架，可以被插入到body内部的任何位置 Iframe与frameset有些不同，它是不可以被拖拽来改变大小的，除了这一点，它与frameset基本没有区别,49,iframe的应用,切记iframe为双标签 ,50,src指向连接地址,scrolling设置滚动条,小结,有问题吗？,51,事件,我们拥有的能和计算机交互的东西： 都有哪些事件会被触发： 事件：触发浏览器行为的一个驱动，可分为以下几类： 窗口事件 (Window Events)：仅在 body 和

17、frameset 元素中有效，在窗口被加载或卸载的时候会触发 表单元素事件 (Form Element Events)：仅在表单元素中有效 键盘事件 (Keyboard Events)：在下列元素中无效：br, frame, frameset, head, html, iframe, meta, script, style, 以及 title 元素 鼠标事件 (Mouse Events)：同键盘事件一样,52,鼠标、键盘,鼠标事件：单击、双击、按下、抬起、移动、经过、离开、 键盘事件：敲击弹起、按下,窗口事件,窗口事件只会在页面被加载或卸载（关闭）时触发，因此窗口事件仅有两个: onload：

18、当文档被载入时执行脚本 onunload：当文档被卸载(关闭)时执行脚本 窗体事件一般会被绑定在标签上,53,表单元素事件,常用表单元素事件包括以下几种： onfocus：当元素获得焦点时执行脚本 onblur：当元素失去焦点时执行脚本 onselect：当元素被选取时执行脚本 onchange：当元素改变时执行脚本 onsubmit：当表单被提交时执行脚本 onreset：当表单被重置时执行脚本,54,键盘事件,键盘事件就是在我们敲击键盘时触发的事件，而实际上在我们敲击键盘的时候，包括三种状态： onkeydown：当键盘被按下时执行脚本 onkeyup：当键盘被松开时执行脚本 onkeypress：当键盘被按下后又松开时执行脚本,55,注：从表面上看，onkeypress与onkeydown和onkeyup具有相同之处，但是在实际操作中，他们是有明显区别的，比如当按下键盘还未松开时，焦点发生变化，那么则只触发onkeydown事件，而不会触发onkeypress事件,鼠标事件,鼠标事件是我们使用频率最高的事件驱动，同键盘事件一样，它包括很多种不同状态： onclick：当鼠标被单击时执行脚本 on