(精品)html表单和框架.ppt
第三章第三章第三章第三章表单和框架表单和框架表单和框架表单和框架本章任务本章任务制作制作“注册注册”页面页面制作制作“客户中心客户中心”页面页面2会使用表单的基本结构制作表单页面会使用表单的基本结构制作表单页面会使用各种表单元素实现注册页面会使用各种表单元素实现注册页面能理解能理解post和和get两种提交方式的区别两种提交方式的区别会使用框架结构实现多窗口展示页面会使用框架结构实现多窗口展示页面本章目标本章目标3表单表单表单的典型应用表单的典型应用注册用户注册用户收集信息收集信息反馈信息反馈信息为网站提供搜索工具为网站提供搜索工具注册用户注册用户收集信息收集信息反馈信息反馈信息提供搜提供搜索工具索工具4表单包含的控件表单包含的控件单行文本输入单行文本输入框框(TEXT)单选按钮单选按钮(RADIO)复选框复选框(CHECKBOX)下拉列表下拉列表(SELECT)重置按钮重置按钮(RESET)提交按钮提交按钮(SUBMIT)多行文本框多行文本框(TEXTAREA)密码框密码框(PASSWORD)5表单页面的基本结构表单页面的基本结构METHOD=“post或或get”ACTIONMETHOD指定提交后，由服务器指定提交后，由服务器上那个处理程序处理上那个处理程序处理指定向服务器提交的方法指定向服务器提交的方法:一般为一般为post或或get方法方法,post方法比较安全方法比较安全 ACTION=“URL”演示示例演示示例1 1：使用使用 postpost提交方式提交方式 和和 getget提交方式提交方式 6表单元素的统一格式表单元素的统一格式 指定元素的类型，可指定元素的类型，可为为TEXT、RADIO、SUBMIT等等控件的控件的名称名称控件的控件的初始值初始值控件的控件的初始初始宽度宽度控件中输入的控件中输入的最多字符个数最多字符个数控件是否控件是否被被选中选中7表单元素的逐一介绍表单元素的逐一介绍文本框基本语法文本框基本语法名名 字字：查看源代码查看源代码单行文本输入框，单行文本输入框，字符宽度为字符宽度为20文本区的宽度文本区的宽度输入元素输入元素的默认值的默认值文本输入框文本输入框8表单元素的逐一介绍表单元素的逐一介绍密码框基本语法密码框基本语法密码区宽度密码区宽度初始密码初始密码密码框密码框密密 码码：查看源代码查看源代码密码框，密码框，22个字符宽度个字符宽度9表单元素的逐一介绍表单元素的逐一介绍单选按钮基本语法单选按钮基本语法初始值初始值单选按钮单选按钮默认选中默认选中性别性别：男男 查看源代码查看源代码设置此单选设置此单选按钮被选中按钮被选中10表单元素的逐一介绍表单元素的逐一介绍复选框基本语法复选框基本语法复选框复选框复选框名复选框名复选框值复选框值 聊天聊天 查看源代码查看源代码设置此复选设置此复选框被选中框被选中11列表框基本语法列表框基本语法 说明：说明：size确定列表中可同时看到的行数。确定列表中可同时看到的行数。selected默认被选中的可选项。默认被选中的可选项。表单元素的逐一介绍表单元素的逐一介绍查看源代码查看源代码出生日期出生日期： 年年 选择月份选择月份 一月一月 二月二月 月月 日日 设置此输入框最多设置此输入框最多只能输入四个符号只能输入四个符号设置设置“选择月份选择月份”选项默认被选中选项默认被选中12表单元素的逐一介绍表单元素的逐一介绍按钮基本语法按钮基本语法按钮名称按钮名称按钮类型可为按钮类型可为button、submit按钮上的标签按钮上的标签 查看源代码查看源代码单击按钮，控件的值单击按钮，控件的值被重置为被重置为value属性属性中指定的初始值中指定的初始值13表单元素的逐一介绍表单元素的逐一介绍多行文本框基本语法多行文本框基本语法 文本框中的内容文本框中的内容 文本框文本框的名字的名字文本框文本框的列数的列数文本框文本框的行数的行数欢迎阅读服务条款协议，欢迎阅读服务条款协议，本协议阐述之条款和条件适用于您使用本协议阐述之条款和条件适用于您使用Taobao网站的各种工具和服务。网站的各种工具和服务。本服务协议双方为淘宝与淘宝网用户，本服务协议具有合同效力。本服务协议双方为淘宝与淘宝网用户，本服务协议具有合同效力。淘宝的权利和义务淘宝的权利和义务 6行行40个字符宽个字符宽度的多行文字域度的多行文字域查看源代码查看源代码14小结小结1 1编写如左图所示效果对应的编写如左图所示效果对应的html代码代码在网页设计中，表单的主要在网页设计中，表单的主要用途有哪些？用途有哪些？TEXTPASSWORDRADIOTEXTAREASUBMITRESETSELECTCHECKBOX练习答案练习答案练习代码练习代码15框架框架广告栏顶部框架广告栏顶部框架(top.htm)导航栏左导航栏左侧框架侧框架(left.htm)详细内容页详细内容页面右侧框架面右侧框架(main.htm)框架的框架的边框边框框架集页面框架集页面(FrameSet.htm)16框架使用场合框架使用场合页面的一个固定部分页面的一个固定部分显示徽标或静态信息显示徽标或静态信息在另一个在另一个固定部分固定部分显示导航显示导航部分详细部分详细内容内容在此处显示详细内容，在此处显示详细内容，页面中此部分页面中此部分是变化的是变化的。17 框架的基本结构框架的基本结构框架页面的基本语法框架页面的基本语法边框尺边框尺寸大小寸大小将窗口分割成左中将窗口分割成左中右右3个部分个部分,可选可选将窗口分割成上将窗口分割成上下下2个部分个部分,可选可选第一个窗口要第一个窗口要显示的网页显示的网页18框架的基本结构框架的基本结构rows_cols框架框架 将窗口分割成将窗口分割成上中下上中下3部分部分窗口边框窗口边框的宽度的宽度如果要在浏览器中创建左中如果要在浏览器中创建左中右三个窗口右三个窗口,该如何实现？该如何实现？查看源代码查看源代码每个窗口对应一个页面，以及一个框架集每个窗口对应一个页面，以及一个框架集页面，总共需要几个页面，总共需要几个HTML页面文件？页面文件？19如何创建多个复杂的窗口如何创建多个复杂的窗口 要实现如下图所示的窗口，该如何制作？要实现如下图所示的窗口，该如何制作？1、分成上下两个窗口、分成上下两个窗口2、把下面的窗口分成、把下面的窗口分成 左右两个窗口左右两个窗口top窗口窗口left窗口窗口right窗口窗口20如何创建多个复杂的窗口如何创建多个复杂的窗口 创建多个复杂的窗口实现步骤如下：创建多个复杂的窗口实现步骤如下：1、创建一个、创建一个HTML页面页面“top.html”2、创建一个、创建一个HTML页面页面“left.html”3、创建一个、创建一个HTML页面页面“right.html”top.html效果图效果图left.html效果图效果图right.html效果效果21如何创建多个复杂的窗口如何创建多个复杂的窗口4、新建、新建多框架多框架HTML页面页面“Frame_Sets.html”.查看源代码查看源代码设置无框设置无框架边框架边框不显示不显示滚动条滚动条禁止调整禁止调整框架大小框架大小框架名称，便于超框架名称，便于超文本链接锚标签文本链接锚标签target属性所引用属性所引用22如何设置窗口链接的显示位置如何设置窗口链接的显示位置 如如果果在在同同一一个个页页面面中中，要要实实现现在在一一个个框框架架窗窗口口中中的的超链接页面出现在另一个框架窗口中，如何实现？超链接页面出现在另一个框架窗口中，如何实现？演示示例演示示例2 2：不同框架之间超链接效果不同框架之间超链接效果使用使用target目标窗口属性目标窗口属性23如何设置窗口链接的显示位置如何设置窗口链接的显示位置target目标窗口属性目标窗口属性name“显示的窗口名显示的窗口名”target属性指定了所链接属性指定了所链接的文件出现在名称为的文件出现在名称为“窗口名窗口名”的框架窗口里。的框架窗口里。target属性指定了所链接的属性指定了所链接的文件出现在名称为文件出现在名称为“rightframe”的框架窗口的框架窗口里里演示示例演示示例3：使用使用target=“窗口名窗口名”查看源代码查看源代码24如何设置窗口链接的显示位置如何设置窗口链接的显示位置target目标窗口属性目标窗口属性四个特殊的窗口四个特殊的窗口 显示在新窗口显示在新窗口 显示在本窗口显示在本窗口 显示在父窗口显示在父窗口 显示在整个浏览器窗口显示在整个浏览器窗口 新启一个窗口打开文新启一个窗口打开文件件“right.html”演示示例演示示例4 4：使用四个特殊的窗口使用四个特殊的窗口25小结小结2 2top.htmlleft.htmlright1.html或或right2.htmlframe_sets.html练习答案练习答案练习代码练习代码编写如下图所示效果对应的编写如下图所示效果对应的html代码代码26总结总结表单中提交数据的方法有那两种及其区别？表单中提交数据的方法有那两种及其区别？表单里有哪些常用的表单元素？表单里有哪些常用的表单元素？创建一个框架页面至少需要哪两个标签？创建一个框架页面至少需要哪两个标签？targettarget设定目标资源所要显示的窗口，其取值可以设定目标资源所要显示的窗口，其取值可以为哪些？为哪些？简述创建一个多框架页面所需的主要步骤。简述创建一个多框架页面所需的主要步骤。2728
