《HTML表单和框架.ppt》由会员分享，可在线阅读，更多相关《HTML表单和框架.ppt（40页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、西安工业大学计算机学院西安工业大学计算机学院学习目标学习目标西安工业大学计算机学院西安工业大学计算机学院内容提要内容提要西安工业大学计算机学院西安工业大学计算机学院3.1 表单表单 表单的典型应用表单的典型应用 注册用户注册用户 收集信息收集信息 反馈信息反馈信息 为网站提供搜索工具为网站提供搜索工具西安工业大学计算机学院西安工业大学计算机学院注册用户注册用户收集信息收集信息3.1 表单表单西安工业大学计算机学院西安工业大学计算机学院反馈信息反馈信息3.1 表单表单西安工业大学计算机学院西安工业大学计算机学院提供搜提供搜索工具索工具3.1 表单表单西安工业大学计算机学院西安工业大学计算机学院3
2、.1 表单表单单行文本输入单行文本输入框框(TEXT)单选按钮单选按钮(RADIO)复选框复选框(CHECKBOX)下拉列表下拉列表(SELECT)重置按钮重置按钮(RESET)提交按钮提交按钮(SUBMIT)多行文本框多行文本框(TEXTAREA)密码框密码框(PASSWORD)西安工业大学计算机学院西安工业大学计算机学院3.1 表单表单METHOD =“post或或get”ACTIONMETHOD指定提交后，由服务器指定提交后，由服务器上那个处理程序处理上那个处理程序处理指定向服务器提交的方法指定向服务器提交的方法:一般为一般为post或或get方法方法, post方法比较安全方法比较安全
3、 ACTION = “URL” 演示示例演示示例1 1：使用：使用 postpost提交方式提交方式 和和 getget提交方式提交方式 西安工业大学计算机学院西安工业大学计算机学院3.1 表单表单 指定元素的类型，可指定元素的类型，可为为TEXT、RADIO、SUBMIT等等控件的控件的名称名称控件的控件的初始值初始值控件的控件的初始初始宽度宽度控件中输入的控件中输入的最多字符个数最多字符个数控件是否控件是否被被选中选中西安工业大学计算机学院西安工业大学计算机学院3.1 表单表单名名 字：字： 查看源代码查看源代码单行文本输入框，单行文本输入框，字符宽度为字符宽度为20
4、文本区的宽度文本区的宽度输入元素输入元素的默认值的默认值文本输入框文本输入框西安工业大学计算机学院西安工业大学计算机学院3.1 表单表单 密码框基本语法密码框基本语法 密码区宽度密码区宽度初始密码初始密码密码框密码框密密 码：码： 查看源代码查看源代码密码框，密码框，22个字符宽度个字符宽度西安工业大学计算机学院西安工业大学计算机学院3.1 表单表单 单选按钮基本语法单选按钮基本语法 初始值初始值单选按钮单选按钮默认选中默认选中性别：性别： 男男 查看源代码查看源代码设置此单选设置此单选按钮被选中按钮被选中西安工业大学计算机学院西安工业大学计算机学院3.1 表
5、单表单 复选框基本语法复选框基本语法 复选框复选框复选框名复选框名复选框值复选框值 聊天聊天 查看源代码查看源代码设置此复选设置此复选框被选中框被选中西安工业大学计算机学院西安工业大学计算机学院3.1 表单表单 列表框基本语法列表框基本语法 说明：说明： size确定列表中可同时看到的行数。确定列表中可同时看到的行数。 selected默认被选中的可选项。默认被选中的可选项。西安工业大学计算机学院西安工业大学计算机学院3.1 表单表单查看源代码查看源代码出生日期：出生日期： 年年 选择月份选择月份 一月一月 二月二月 月月 日日 设置此输入框最多
6、设置此输入框最多只能输入四个符号只能输入四个符号设置设置“选择月份选择月份”选项默认被选中选项默认被选中西安工业大学计算机学院西安工业大学计算机学院3.1 表单表单 按钮基本语法按钮基本语法 按钮名称按钮名称按钮类型可为按钮类型可为button、submit按钮上的标签按钮上的标签 查看源代码查看源代码单击按钮，控件的值单击按钮，控件的值被重置为被重置为value属性属性中指定的初始值中指定的初始值西安工业大学计算机学院西安工业大学计算机学院3.1 表单表单 多行文本框基本语法多行文本框基本语法 文本框中的内容文本框中的内容 文本框文本框的名字的名字文本框文本框的列数的列数文本框文本框的行数的
7、行数欢迎阅读服务条款协议，欢迎阅读服务条款协议，本协议阐述之条款和条件适用于您使用本协议阐述之条款和条件适用于您使用Taobao网站的各种工具和服务。网站的各种工具和服务。本服务协议双方为淘宝与淘宝网用户，本服务协议具有合同效力。本服务协议双方为淘宝与淘宝网用户，本服务协议具有合同效力。 淘宝的权利和义务淘宝的权利和义务 6行行40个字符宽个字符宽度的多行文字域度的多行文字域查看源代码查看源代码西安工业大学计算机学院西安工业大学计算机学院3.1 表单表单 编写如左图所示效果对应的编写如左图所示效果对应的html代码代码 在网页设计中，表单的主要在网页设计中，表单的主要用途有哪些？用途有哪些？T
8、EXTPASSWORDRADIOTEXTAREASUBMITRESETSELECTCHECKBOX练习答案练习答案练习代码练习代码西安工业大学计算机学院西安工业大学计算机学院3.2 框架框架顶部框架顶部框架(top.htm)导航栏左导航栏左侧框架侧框架(left.htm)详细内容页详细内容页面右侧框架面右侧框架(main.htm)框架的框架的边框边框框架集页面框架集页面(FrameSet.htm)西安工业大学计算机学院西安工业大学计算机学院 框架页面的基本语法框架页面的基本语法边框尺边框尺寸大小寸大小将窗口分割成左中将窗口分割成左中右右3个部分个部分,可选可选将窗口分割成上将窗口分割成上下下2
9、个部分个部分,可选可选第一个窗口要第一个窗口要显示的网页显示的网页3.2 框架框架西安工业大学计算机学院西安工业大学计算机学院3.2 框架框架rows_cols框架框架 将窗口分割成将窗口分割成上中下上中下3部分部分如果要在浏览器中创建左中如果要在浏览器中创建左中右三个窗口右三个窗口,该如何实现？该如何实现？查看源代码查看源代码每个窗口对应一个页面，以及一个框架每个窗口对应一个页面，以及一个框架集页面，总共需要几个集页面，总共需要几个HTML页面文件？页面文件？窗口边框窗口边框的宽度的宽度西安工业大学计算机学院西安工业大学计算机学院3.2 框架框架 要实现如下图所示的窗口，该如何制作？要实现如
10、下图所示的窗口，该如何制作？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 框架框架
11、. 查看源代码查看源代码设置无框设置无框架边框架边框不显示不显示滚动条滚动条禁止调整禁止调整框架大小框架大小框架名称，便于超框架名称，便于超文本链接锚标签文本链接锚标签target属性所引用属性所引用创建多框架的主页面：创建多框架的主页面：西安工业大学计算机学院西安工业大学计算机学院3.2 框架框架 如果在同一个页面中，要实现在一个框架窗口中的如果在同一个页面中，要实现在一个框架窗口中的超链接页面出现在另一个框架窗口中，如何实现？超链接页面出现在另一个框架窗口中，如何实现？演示示例演示示例2 2：不同框架之间超链接效果不同框架之间超链接效果使用使用target目标窗口属性目标窗口属性西安工业大
12、学计算机学院西安工业大学计算机学院3.2 框架框架 target目标窗口属性目标窗口属性name“显示的窗口名显示的窗口名” target属性指定了所链接属性指定了所链接的文件出现在名称为的文件出现在名称为“窗口名窗口名”的框架窗口的框架窗口里。里。 target属性指定了所链接的属性指定了所链接的文件出现在名称为文件出现在名称为“rightframe”的框架窗口里的框架窗口里演示示例演示示例3：使用使用target=“窗口名窗口名”查看源代码查看源代码西安工业大学计算机学院西安工业大学计算机学院3.2 框架框架 target目标窗口属性目标窗口属性四个特殊的窗口四个特殊的窗口 显示在新窗口显
13、示在新窗口 显示在本窗口显示在本窗口 显示在父窗口显示在父窗口 显示在顶层窗口显示在顶层窗口 西安工业大学计算机学院西安工业大学计算机学院3.2 框架框架新启一个窗口打开文新启一个窗口打开文件件 “right.html”演示示例演示示例4 4：使用四个特殊的窗口使用四个特殊的窗口西安工业大学计算机学院西安工业大学计算机学院3.2 框架框架top.htmlleft.htmlright1.html或或right2.htmlframe_sets.html练习答案练习答案练习代码练习代码编写如下图所示效果对应的编写如下图所示效果对应的html代码代码西安工业大学计算机学院西安工业大学计算机学院复习复习
14、 表单中提交数据的方法有那两种？有何区别？表单中提交数据的方法有那两种？有何区别？ 表单里有哪些常用的表单元素？表单里有哪些常用的表单元素？ 创建一个框架页面至少需要哪两个标签？创建一个框架页面至少需要哪两个标签？ targettarget设定目标资源所要显示的窗口，其取值可以设定目标资源所要显示的窗口，其取值可以为哪些？为哪些？ 简述创建一个多框架页面所需的主要步骤。简述创建一个多框架页面所需的主要步骤。西安工业大学计算机学院西安工业大学计算机学院3.3 动态网页基础动态网页基础 静态页面静态页面由纯由纯HTMLHTML元素构成的页面元素构成的页面每次请求同一个静态页面的都返回同样地结果每次
15、请求同一个静态页面的都返回同样地结果无法处理用户与服务器间的交互无法处理用户与服务器间的交互 动态页面动态页面需要针对用户的请求作出动态的响应需要针对用户的请求作出动态的响应需要在需要在HTMLHTML元素中加入程序代码，处理用户请求元素中加入程序代码，处理用户请求嵌入在嵌入在HTMLHTML中的代码称为中的代码称为“脚本代码脚本代码”，在一定的环境中执行，在一定的环境中执行脚本代码又分为：客户端脚本，服务器端脚本脚本代码又分为：客户端脚本，服务器端脚本西安工业大学计算机学院西安工业大学计算机学院3.3 动态网页基础动态网页基础 常用的服务器端技术常用的服务器端技术ASPASP：Active
16、Server PageActive Server Page，动态服务器页面，动态服务器页面JSPJSP：Java Server PageJava Server Page，JavaJava服务器页面服务器页面PHPPHP：Hypertext PreprocessorHypertext Preprocessor，超文本预处理语言，超文本预处理语言西安工业大学计算机学院西安工业大学计算机学院3.3 动态网页基础动态网页基础 ASP技术技术ASPASP是是微软早期推出的服务器端开发技术微软早期推出的服务器端开发技术ASPASP只能运行于微软的只能运行于微软的IISIIS环境下环境下ASPASP页面页面
17、中可包含文本中可包含文本、HTMLHTML标签和脚本标签和脚本代码代码ASPASP中的脚本代码一般使用中的脚本代码一般使用VBScriptVBScript编写编写脚本代码会在服务器端执行，生成静态的脚本代码会在服务器端执行，生成静态的HTMLHTML内容发送到客户端内容发送到客户端说明：说明：ASP与与HTML的不同的不同当浏览器请求某个当浏览器请求某个 HTML HTML 文件时，服务器会直接返回这个文件文件时，服务器会直接返回这个文件 而当浏览器请求某个而当浏览器请求某个 ASP ASP 文件时，文件时，IIS IIS 将这个请求传递至将这个请求传递至 ASP ASP 引引擎，擎，ASP
18、ASP 引擎会逐行地读取这个文件，并执行文件中的脚本，最引擎会逐行地读取这个文件，并执行文件中的脚本，最后，后，ASP ASP 文件将以纯文件将以纯 HTML HTML 的形式返回到浏览器。的形式返回到浏览器。西安工业大学计算机学院西安工业大学计算机学院3.3 动态网页基础动态网页基础 第一个第一个ASP页面页面 大家好，这是我的第一个大家好，这是我的第一个ASP页面页面% response.write(Hello World!) response.write( & now()% 第一个第一个ASP动态页面：动态页面：西安工业大学计算机学院西安工业大学计算机学院3.3 动态网页基础动态网页基础
19、 脚本循环示例脚本循环示例 % dim i for i=1 to 6 response.write(Header & i & ) next % 使用脚本循环生成使用脚本循环生成HTML标题：标题：西安工业大学计算机学院西安工业大学计算机学院3.3 动态网页基础动态网页基础 脚本分支示例脚本分支示例 现在是北京时间：现在是北京时间：% response.write(now() & ) dim h h=hour(now() If h 使用脚本选择问候语：使用脚本选择问候语：西安工业大学计算机学院西安工业大学计算机学院3.3 动态网页基础动态网页基础 处理处理GET请求请求 您的姓名：您的姓名： % dim fnamefname=Request.QueryString(fname)If fname Then Response.Write(你好！你好！ & fname & ！)End If% 处理处理GET请求：请求：西安工业大学计算机学院西安工业大学计算机学院3.3 动态网页基础动态网页基础 处理处理POST请求请求 您的姓名：您的姓名： % dim fnamefname=Request.Form(fname)If fname Then Response.Write(你好！你好！ & fname & ！)End If% 处理处理POST请求：请求：