HTML表单和框架优质PPT.ppt

HTML表单和框架优质PPT.ppt

《HTML表单和框架优质PPT.ppt》由会员分享，可在线阅读，更多相关《HTML表单和框架优质PPT.ppt（39页珍藏版）》请在冰豆网上搜索。

使用使用postpost提交方式提交方式和和getget提交方式提交方式西安工业大学计算机学院西安工业大学计算机学院3.1表单表单表单元素的一般格式表单元素的一般格式表单元素的一般格式表单元素的一般格式指定元素的类型，可指定元素的类型，可为为TEXT、RADIO、SUBMIT等等控件的控件的名称名称控件的控件的初始值初始值控件的控件的初始初始宽度宽度控件中输入的控件中输入的最多字符个数最多字符个数控件是否控件是否被被选中选中西安工业大学计算机学院西安工业大学计算机学院3.1表单表单文本输入框元素文本输入框元素文本输入框元素文本输入框元素名名&

nbsp;

&

字字：

查看源代码查看源代码单行文本输入框，单行文本输入框，字符宽度为字符宽度为20文本区的宽度文本区的宽度输入元素输入元素的默认值的默认值文本输入框文本输入框西安工业大学计算机学院西安工业大学计算机学院3.1表单表单密码输入框元素密码输入框元素密码输入框元素密码输入框元素密码框基本语法密码框基本语法密码区宽度密码区宽度初始密码初始密码密码框密码框密密&

码码：

查看源代码查看源代码密码框，密码框，22个字符宽度个字符宽度西安工业大学计算机学院西安工业大学计算机学院3.1表单表单单选按钮元素单选按钮元素单选按钮元素单选按钮元素单选按钮基本语法单选按钮基本语法初始值初始值单选按钮单选按钮默认选中默认选中性别性别：

男男&

查看源代码查看源代码设置此单选设置此单选按钮被选中按钮被选中西安工业大学计算机学院西安工业大学计算机学院3.1表单表单复选框元素复选框元素复选框元素复选框元素复选框基本语法复选框基本语法复选框复选框复选框名复选框名复选框值复选框值聊天聊天&

查看源代码查看源代码设置此复选设置此复选框被选中框被选中西安工业大学计算机学院西安工业大学计算机学院3.1表单表单列表框元素列表框元素列表框元素列表框元素列表框基本语法列表框基本语法说明：

说明：

size确定列表中可同时看到的行数。

确定列表中可同时看到的行数。

selected默认被选中的可选项。

默认被选中的可选项。

西安工业大学计算机学院西安工业大学计算机学院3.1表单表单列表框元素列表框元素列表框元素列表框元素查看源代码查看源代码出生日期出生日期：

年年选择月份选择月份一月一月二月二月月月&

日日设置此输入框最多设置此输入框最多只能输入四个符号只能输入四个符号设置设置“选择月份选择月份”选项默认被选中选项默认被选中西安工业大学计算机学院西安工业大学计算机学院3.1表单表单按钮元素按钮元素按钮元素按钮元素按钮基本语法按钮基本语法按钮名称按钮名称按钮类型可为按钮类型可为button、submit按钮上的标签按钮上的标签查看源代码查看源代码单击按钮，控件的值单击按钮，控件的值被重置为被重置为value属性属性中指定的初始值中指定的初始值西安工业大学计算机学院西安工业大学计算机学院3.1表单表单多行文本框元素多行文本框元素多行文本框元素多行文本框元素多行文本框基本语法多行文本框基本语法文本框中的内容文本框中的内容文本框文本框的名字的名字文本框文本框的列数的列数文本框文本框的行数的行数欢迎阅读服务条款协议，欢迎阅读服务条款协议，本协议阐述之条款和条件适用于您使用本协议阐述之条款和条件适用于您使用Taobao网站的各种工具和服务。

网站的各种工具和服务。

本服务协议双方为淘宝与淘宝网用户，本服务协议具有合同效力。

淘宝的权利和义务淘宝的权利和义务6行行40个字符宽个字符宽度的多行文字域度的多行文字域查看源代码查看源代码西安工业大学计算机学院西安工业大学计算机学院3.1表单表单练习练习练习练习编写如左图所示效果对应的编写如左图所示效果对应的html代码代码在网页设计中，表单的主要在网页设计中，表单的主要用途有哪些？

用途有哪些？

TEXTPASSWORDRADIOTEXTAREASUBMITRESETSELECTCHECKBOX练习答案练习答案练习代码练习代码西安工业大学计算机学院西安工业大学计算机学院3.2框架框架框架应用示例框架应用示例框架应用示例框架应用示例顶部框架顶部框架（top.htm）导航栏左导航栏左侧框架侧框架（left.htm）详细内容页详细内容页面右侧框架面右侧框架（main.htm）框架的框架的边框边框框架集页面框架集页面（FrameSet.htm）西安工业大学计算机学院西安工业大学计算机学院框架页面的基本语法框架页面的基本语法边框尺边框尺寸大小寸大小将窗口分割成左中将窗口分割成左中右右3个部分个部分,可选可选将窗口分割成上将窗口分割成上下下2个部分个部分,可选可选第一个窗口要第一个窗口要显示的网页显示的网页3.2框架框架框架元素语法框架元素语法框架元素语法框架元素语法西安工业大学计算机学院西安工业大学计算机学院3.2框架框架框架的基本结构框架的基本结构框架的基本结构框架的基本结构rows_cols框架框架将窗口分割成将窗口分割成上中下上中下3部分部分如果要在浏览器中创建左中如果要在浏览器中创建左中右三个窗口右三个窗口,该如何实现？

该如何实现？

查看源代码查看源代码每个窗口对应一个页面，以及一个框架集每个窗口对应一个页面，以及一个框架集页面，总共需要几个页面，总共需要几个HTML页面文件？

页面文件？

窗口边框窗口边框的宽度的宽度西安工业大学计算机学院西安工业大学计算机学院3.2框架框架复杂的框架复杂的框架复杂的框架复杂的框架要实现如下图所示的窗口，该如何制作？

要实现如下图所示的窗口，该如何制作？

1、分成上下两个窗口、分成上下两个窗口2、把下面的窗口分成、把下面的窗口分成左右两个窗口左右两个窗口top窗口窗口left窗口窗口right窗口窗口西安工业大学计算机学院西安工业大学计算机学院3.2框架框架复杂框架示例复杂框架示例复杂框架示例复杂框架示例创建各个窗口页面：

创建各个窗口页面：

1、创建一个、创建一个HTML页面页面“top.html”2、创建一个、创建一个HTML页面页面“left.html”3、创建一个、创建一个HTML页面页面“right.html”top.html效果图效果图left.html效果图效果图right.html效果效果西安工业大学计算机学院西安工业大学计算机学院3.2框架框架复杂框架示例复杂框架示例复杂框架示例复杂框架示例.查看源代码查看源代码设置无框设置无框架边框架边框不显示不显示滚动条滚动条禁止调整禁止调整框架大小框架大小框架名称，便于超框架名称，便于超文本链接锚标签文本链接锚标签target属性所引用属性所引用创建多框架的主页面：

创建多框架的主页面：

西安工业大学计算机学院西安工业大学计算机学院3.2框架框架在多框架窗口中导航在多框架窗口中导航在多框架窗口中导航在多框架窗口中导航如如果果在在同同一一个个页页面面中中，要要实实现现在在一一个个框框架架窗窗口口中中的的超链接页面出现在另一个框架窗口中，如何实现？

超链接页面出现在另一个框架窗口中，如何实现？

演示示例演示示例22：

不同框架之间超链接效果不同框架之间超链接效果使用使用target目标窗口属性目标窗口属性西安工业大学计算机学院西安工业大学计算机学院3.2框架框架在多框架窗口中导航在多框架窗口中导航在多框架窗口中导航在多框架窗口中导航target目标窗口属性目标窗口属性name“显示的窗口名显示的窗口名”target属性指定了所链接属性指定了所链接的文件出现在名称为的文件出现在名称为“窗口名窗口名”的框架窗口里。

的框架窗口里。

target属性指定了所链接的属性指定了所链接的文件出现在名称为文件出现在名称为“rightframe”的框架窗口的框架窗口里里演示示例演示示例3：

使用使用target=“窗口名窗口名”查看源代码查看源代码西安工业大学计算机学院西安工业大学计算机学院3.2框架框架在多框架窗口中导航在多框架窗口中导航在多框架窗口中导航在多框架窗口中导航target目标窗口属性目标窗口属性四个特殊的窗口四个特殊的窗口显示在新窗口显示在新窗口显示在本窗口显示在本窗口显示在父窗口显示在父窗口显示在顶层窗口显示在顶层窗口西安工业大学计算机学院西安工业大学计算机学院3.2框架框架TargetTarget属性示例属性示例属性示例属性示例新启一个窗口打开文新启一个窗口打开文件件“right.html”演示示例演示示例44：

使用四个特殊的窗口使用四个特殊的窗口西安工业大学计算机学院西安工业大学计算机学院3