第五章 表单、框架和多媒体
网页设计－姚屏
5.1表单
表单是用于实现网页浏览者与服务器之
间信息交互的一种页面元素，它由表单
控件和一般内容组成。 例如：
? 注册表单
? 登录表单
网页设计－姚屏
表单的工作原理
网页设计－姚屏
FORM标记符
FORM包含所有表单内容
? Action 属性
?服务器端脚本程序（ ASP,JSP,PHP,Perl等）
?mailto:mailbox@mailserver.com或网址
? Method属性（ get,post）
INPUT标记
? Type,name,size,maxlength属性
网页设计－姚屏
表单控件的类型（ type）
文本框
复选框
单选框
按钮
选项菜单
文件选择框
隐藏控件
对象控件
网页设计－姚屏
文本框
单行文本框
? <input type="text" name="" value="" size=""
maxlengh="">
口令框
? <input type="password" name="" value=""
size="" maxlengh="" >
演示 —— 文本框示例
网页设计－姚屏
复选框和单选框
复选框
? <input type="checkbox" name="" value=""
(checked)>
单选框
? <input type="radio" name="" value=""
(checked)>
? 注意：单选框 name 属性相同者为一组！
演示 —— 复选框与单选框
网页设计－姚屏
文件选择框
文件选择框
? <input type="file" name="" size=""
value="" >
演示 —— 文件选择框
网页设计－姚屏
按钮
提交按钮
? <input type="submit" name="" value="">
? <input type="image" src="" alt="">
重置按钮
? <input type="reset" name="" value="" >
自定义按钮
? <input type="button" name="" value="" >
演示 1 演示 2
网页设计－姚屏
多行文本框
多行文本框
? <textarea name="" rows="" cols=""
>
演示 —— 多行文本框
网页设计－姚屏
选项菜单
SELECT标记符
? Size属性
? Multiple属性
OPTION标记符
演示 —— 选项菜单
网页设计－姚屏
设置表单控件的标签
<LABEL for="controlID">标签文本 </LABEL>
<INPUT id="controlID">
利用标签能使浏览者在点击某个与控件相关的
文本时，即选中该控件。
演示 —— 设置表单控件的标签
网页设计－姚屏
什么是框架
在同一个浏览器窗口中同时显示多个网
页的交互式结构。
通过为超链接指定目标框架，可以为框
架之间建立起内容的联系，从而实现页
面导航的功能。
演示 —— 框架示例
网页设计－姚屏
定义框架结构
框架集
? 定义框架的结构
? <frameset></frameset>
? 注意该标记不能在 <body>体中出现。
框架
? 具体定义每个页面
? <frame>
网页设计－姚屏
定义框架结构
框架集的定义
? Rows 定义行结构框架
? Cols 定义列结构框架
? Rows 和 cols 的取值：
?像素数
?%
?N*
网页设计－姚屏
演示 —— 定义框架结构
行结构
列结构 1
列结构 2
嵌套框架
网页设计－姚屏
框架的初始化
在 frame 标记符中使用 src 属性可以指
定框架中最初显示的页面。
演示 —— 指定框架页面
网页设计－姚屏
控制框架的显示效果
<FRAME frameborder=“”>设置框架边框。
<FRAME scrolling=“”>设置框架滚动条。
<FRAME marginwidth=“” marginheight=“”>设
置框架内容与框架边框之间的空白。
演示 —— 控制框架显示效果
网页设计－姚屏
使用框架设计网页布局
指定超链接的目标框架。所谓目标框架，
是指单击框架网页中的超链接时，对应
的目标文件显示在哪个框架中。
网页设计－姚屏
设置目标框架
使用 <FRAME name=“”>指定框架名称
特殊的框架名称
? _blank,_self,_top,_parent
在超链接标记符 A 中指定 target 属性，
取值为具体的框架名称。
演示 —— 指定目标框架
网页设计－姚屏
使用页内框架
用 iframe 标记符可以设置页内框架
? <iframe src=“”>不支持框架时显示的内容
</iframe>
也可以指定页内框架为目标框架
演示 —— 页内框架演示
网页设计－姚屏
5.3加入动态效果和多媒体
5.3.1设置字幕（ p93）
<MARQUEE>和 </ MARQUEE >标记符
之间的内容可以以滚动的方式显示。其
常用属性：
—width和 height,align,behavior、
bgcolor,direction,hspace和 vspace、
loop,scrollamount,scrolldelay。
演示 —— 滚动字幕效果
网页设计－姚屏
5.3.2加入音频和视频
BGSOUND 标记符
用于指定网页的背景音乐。该标记符只
有开始标记，没有结尾标记。
基本属性 src，用于指定背景音乐的源文
件；属性 loop，用于指定背景音乐的播
放次数。
演示 —— BGSOUND 的作用
网页设计－姚屏
视频的插入
演示 —— 视频的插入
<img>的 dynsrc属性用于加入视
频
<img src＝, 图像文件 " dynsrc＝ "
视频剪辑文件,avi" loop＝ "次数 "
loopdelay＝ "时间 " srart＝ "值 "
controls>
网页设计－姚屏
5.4自动刷新页面
META 标记符
通常用来说明与 WEB页有关的信息,如文
件创作工具、文件作者等。
设置自动转址功能，即使浏览器自动地
从一个地址跳转到另一个地址。
演示 —— META 的作用
网页设计－姚屏
5.5补充
topmargin=“10,距离浏览器窗口顶端的
距离
leftmargin=“10,距离浏览器窗口顶端的
距离
此属性放在 <body>标记中
网页设计－姚屏
课后习题
P96-97 1,2,3,6
网页设计－姚屏
5.1表单
表单是用于实现网页浏览者与服务器之
间信息交互的一种页面元素，它由表单
控件和一般内容组成。 例如：
? 注册表单
? 登录表单
网页设计－姚屏
表单的工作原理
网页设计－姚屏
FORM标记符
FORM包含所有表单内容
? Action 属性
?服务器端脚本程序（ ASP,JSP,PHP,Perl等）
?mailto:mailbox@mailserver.com或网址
? Method属性（ get,post）
INPUT标记
? Type,name,size,maxlength属性
网页设计－姚屏
表单控件的类型（ type）
文本框
复选框
单选框
按钮
选项菜单
文件选择框
隐藏控件
对象控件
网页设计－姚屏
文本框
单行文本框
? <input type="text" name="" value="" size=""
maxlengh="">
口令框
? <input type="password" name="" value=""
size="" maxlengh="" >
演示 —— 文本框示例
网页设计－姚屏
复选框和单选框
复选框
? <input type="checkbox" name="" value=""
(checked)>
单选框
? <input type="radio" name="" value=""
(checked)>
? 注意：单选框 name 属性相同者为一组！
演示 —— 复选框与单选框
网页设计－姚屏
文件选择框
文件选择框
? <input type="file" name="" size=""
value="" >
演示 —— 文件选择框
网页设计－姚屏
按钮
提交按钮
? <input type="submit" name="" value="">
? <input type="image" src="" alt="">
重置按钮
? <input type="reset" name="" value="" >
自定义按钮
? <input type="button" name="" value="" >
演示 1 演示 2
网页设计－姚屏
多行文本框
多行文本框
? <textarea name="" rows="" cols=""
>
演示 —— 多行文本框
网页设计－姚屏
选项菜单
SELECT标记符
? Size属性
? Multiple属性
OPTION标记符
演示 —— 选项菜单
网页设计－姚屏
设置表单控件的标签
<LABEL for="controlID">标签文本 </LABEL>
<INPUT id="controlID">
利用标签能使浏览者在点击某个与控件相关的
文本时，即选中该控件。
演示 —— 设置表单控件的标签
网页设计－姚屏
什么是框架
在同一个浏览器窗口中同时显示多个网
页的交互式结构。
通过为超链接指定目标框架，可以为框
架之间建立起内容的联系，从而实现页
面导航的功能。
演示 —— 框架示例
网页设计－姚屏
定义框架结构
框架集
? 定义框架的结构
? <frameset></frameset>
? 注意该标记不能在 <body>体中出现。
框架
? 具体定义每个页面
? <frame>
网页设计－姚屏
定义框架结构
框架集的定义
? Rows 定义行结构框架
? Cols 定义列结构框架
? Rows 和 cols 的取值：
?像素数
?%
?N*
网页设计－姚屏
演示 —— 定义框架结构
行结构
列结构 1
列结构 2
嵌套框架
网页设计－姚屏
框架的初始化
在 frame 标记符中使用 src 属性可以指
定框架中最初显示的页面。
演示 —— 指定框架页面
网页设计－姚屏
控制框架的显示效果
<FRAME frameborder=“”>设置框架边框。
<FRAME scrolling=“”>设置框架滚动条。
<FRAME marginwidth=“” marginheight=“”>设
置框架内容与框架边框之间的空白。
演示 —— 控制框架显示效果
网页设计－姚屏
使用框架设计网页布局
指定超链接的目标框架。所谓目标框架，
是指单击框架网页中的超链接时，对应
的目标文件显示在哪个框架中。
网页设计－姚屏
设置目标框架
使用 <FRAME name=“”>指定框架名称
特殊的框架名称
? _blank,_self,_top,_parent
在超链接标记符 A 中指定 target 属性，
取值为具体的框架名称。
演示 —— 指定目标框架
网页设计－姚屏
使用页内框架
用 iframe 标记符可以设置页内框架
? <iframe src=“”>不支持框架时显示的内容
</iframe>
也可以指定页内框架为目标框架
演示 —— 页内框架演示
网页设计－姚屏
5.3加入动态效果和多媒体
5.3.1设置字幕（ p93）
<MARQUEE>和 </ MARQUEE >标记符
之间的内容可以以滚动的方式显示。其
常用属性：
—width和 height,align,behavior、
bgcolor,direction,hspace和 vspace、
loop,scrollamount,scrolldelay。
演示 —— 滚动字幕效果
网页设计－姚屏
5.3.2加入音频和视频
BGSOUND 标记符
用于指定网页的背景音乐。该标记符只
有开始标记，没有结尾标记。
基本属性 src，用于指定背景音乐的源文
件；属性 loop，用于指定背景音乐的播
放次数。
演示 —— BGSOUND 的作用
网页设计－姚屏
视频的插入
演示 —— 视频的插入
<img>的 dynsrc属性用于加入视
频
<img src＝, 图像文件 " dynsrc＝ "
视频剪辑文件,avi" loop＝ "次数 "
loopdelay＝ "时间 " srart＝ "值 "
controls>
网页设计－姚屏
5.4自动刷新页面
META 标记符
通常用来说明与 WEB页有关的信息,如文
件创作工具、文件作者等。
设置自动转址功能，即使浏览器自动地
从一个地址跳转到另一个地址。
演示 —— META 的作用
网页设计－姚屏
5.5补充
topmargin=“10,距离浏览器窗口顶端的
距离
leftmargin=“10,距离浏览器窗口顶端的
距离
此属性放在 <body>标记中
网页设计－姚屏
课后习题
P96-97 1,2,3,6
