html第5章：框架、表单.ppt
网页编程基础：HTML 第5章：框架、表单,本章内容,框架的概念 多窗口页面 框架集元素 框架元素 链接到框架 无框架元素 浮动框架 表单 表单的功能 表单元素form Input元素 Textarea元素 Select元素 Option元素,Label元素 Fieldset元素和legend元素 表单数据及处理方式,多窗口页面,包含框架的页面是一个多窗口页面，这样的页面可以在浏览器中同时显示多个超文本 多窗口页面中每个窗口被称为一个框架或帧，整个页面看成是框架的集合或帧的集合 每个框架可以包含不同的Web页，也可以有独立的滚动条 多窗口页面直接使用frameset（分帧），frameset不能包含在body中。 一个frameset中包含N个frame(帧)。,多窗口页面的组成,多窗口页面的结构由包含框架集元素的HTML文档定义 多窗口中显示的页面往往是独立的HTML文档 框架集元素frameset指定窗口的结构，框架元素frame指定窗口显示的超文本的url,框架集文档index.htm,Document1.htm,Document2.htm,Document3.htm,Document4.htm,框架集元素,语法 开始标记： 必需 内容： Frameset元素、frame元素、noframes元素 结束标记： 必需 主要属性 id、class、title、style 等通用属性 cols：告诉浏览器将拥有几个垂直的框架 rows：告诉浏览器将拥有几个水平的框架 frameborder：是否显示边框，可选择的值：1，0，yes,no border： 边框的宽度,框架集元素的应用举例,rows=“*，80“ frameborder=“yes“,rows=“*，80“ cols=“80，*“ frameborder=“yes“, (框架集嵌套),框架集元素的应用举例,框架元素,语法 开始标记： 必需 内容：空 结束标记：无 主要属性 name 框架名称，如果有文件需要用该窗口打开，可以给超级链接的target属性指定name的值 Src：框架内容的链接 Frameborder：框架边框的宽度 Marginwidth：空白的宽度 Marginheight：空白的高度 Noresize：不可改变边框的大小 Scrolling：滚动条设置，当内容超过框架的显示范围是否出现滚动条，有三种取值auto、yes、no,Frame属性：,marginWidth,marginHeight,Frame元素应用举例,goto frame1 ,点击,链接到框架窗口,超级链接元素有一个属性target，可以指定网页在多窗口页面中哪一个窗口中打开 Target属性的值 _blank：强制a标识的链接文档在一个新浏览器窗口打开 _self：强制a标识的链接文档在和a元素所在的窗口（框架）打开 _parent：在当前a元素所在框架的父框架中打开，如果没有父框架，作用和_self相同 _top：强制a标识的链接文档在浏览器的整个窗口打开 FrameName：强制a标识的链接文档在指定框架中打开,无框架元素,语法 开始标记：必需 内容： 无框架网页的html 结束标记：必需 主要属性 id，class，title，style，lang，dir等通用属性 作用 保存一些内容，当浏览器不支持框架时，会显示出来，而对于支持框架的浏览器，noframes元素中的内容不显示出来,浮动/嵌入框架,语法 开始标记：必需 内容：空 结束标记：必需 主要属性 Id，class，title，style，等通用属性 Name：框架的名字 Src：浮动框架中的网页的url Fameborder：缺省值为“1”，如不要边框设为“0” Marginwidth：以像素为单位定义左右两侧空白的宽度 Marginheight：以像素为单位定义上下两侧空白的宽度 Srolling： yes，on或auto Height： 高度 Width： 宽度,浮动框架应用举例,同步练习,建立一个文字链接，让链接内容在新的窗口中打开 在多窗口文档中建立一个文字链接，让链接内容在整个浏览器内显示,本章内容,框架的概念 多窗口页面 框架集元素 框架元素 链接到框架 无框架元素 浮动框架 表单 表单的功能 表单元素form Input元素 Textarea元素 Select元素 Option元素,Label元素 Fieldset元素和legend元素 表单数据及处理方式,表单的功能,用户登录,收集用户信息,提交用户请求,基于互联网的电子商务,表单的处理过程,一、设计表单，并放入一些输入域 二、网站访问者在自己的计算机上填写上述输入域，并提交到服务器端 三、服务器处理数据并返回确认信息,Internet,服务器,数据库,表单元素,语法 开始标记：必需 内容： 表单域元素 结束标记：必需 主要属性 Action属性：定义表单被提交时发生的动作，通常包含服务方脚本的URL（比如ASP、PHP） Method属性：指出表单数据提交的方式。有两个可能值 Get： 将表单数据附加在请求中的URL上 Post： 将表单数据封装在发送到服务器的请求中 作用：定义一个区域可以加入表单对象,表单控件元素,表单控件元素是包含在表单元素中具有可视化外观的HTML元素，用于访问者输入信息 表单控件元素有 input元素-text/password textarea元素 select和option元素 Radio,checkbox File label,元素,语法 开始标记：必需 内容：空 结束标记：禁用 主要属性 Type属性：指定表单控件的类型 button、checkbox、image、hidden、text、radio、submit、reset、password、file。 按扭的类型可以为submit,button,reset Value属性：指定表单控件的数据 Name属性：指定该控件的名字 作用： 根据对type属性不同的取值可以建立多种显示风格的表单控件，如文本区域、口令域、复选框、单选按钮、提交按钮、重新设置按钮、文本域、隐藏域、图像域和通用按钮,文本域控件,Type = “text” 作用：用于创建一个单行文本输入字段 值：由访问者自由输入的任何文本 与input元素的其它属性配合： Maxlength属性可以限制输入的字符数 Readonly属性可以让文本控件只读 Disabled是否禁用,口令控件,Type = “password” 作用：用于创建一个单行文本输入字段，并用*号屏蔽用户的输入。注意，当password输入的数据提交时并不以任何形式加密 value值：由访问者自由输入的任何文本作为默认值 与input元素的其它属性配合： Maxlength属性可以限制输入的字符数,提交按钮和重置按钮,Type=“submit” 作用：传送表单数据给服务器端脚本或其它程序处理 value值：按钮的标题文字 Type=“reset” 作用：清空表单的内容并把所有表单控件设置为最初的默认值 value值：按钮的标题文字,复选框控件,Type=“checkbox” 作用：创建一个可以在选中和未选中之间切换的控件，当该表单提交给一个脚本进行处理时，每个被选取的复选框将返回一个与该复选框的名称相关联的值 value值：选中该控件的值，可以是任意文本 与input元素的其它属性配合： 要以选取状态显示复选框，使用checked属性, 旅游 运动 唱歌,单选按钮,Type=“radio” 作用：创建一个单选按钮，用于互斥地选择某种属性值 value值：文本，当提交form时，如果选中了此单选按钮，那么value就被发送到服务器 与input元素的其它属性配合： 要以选取状态显示复选框，使用checked属性, 上午 下午 晚上,图像按钮和普通按钮,Type=“image” 作用：创建一个图像按钮，用于实现用户自定义的按钮风格 Src属性：指向按钮图片的位置 Type=image与元素功能一样。 Type=“button” 作用：用于控制执行客户端脚本 Value值：文本，显示在按钮上的标签,隐藏控件和文件选择控件,Type=“hidden” 作用：用于在表单中包含不希望用户看见的信息 Value值：文本，指派给控件的值，当用户提交表单时，该值与其它数据一起被发送 Type=“file” 作用：上载文件 Value值：文本，要上载的文件在本地的路径,同步练习,创建一个用户登录表单 创建一个表单，加入由input元素构成的各种控件,元素,语法 开始标记：必需 内容： 出现在textarea中的初始文本 结束标记：必需 主要属性： cols属性：指定文本区域的列数 rows属性：指定文本区域的行数 Name属性：指定该控件的名字 Readonly：使文本区域不能编辑 Accesskey：设置快捷键 Tabindex：tab键控制顺序 作用： 建立一个多行的文本输入区域,文本域控件举例,以下代码创建了一个高20字符宽5字符的文本区域 请输入,菜单/列表元素,语法 开始标记：必需 内容： Option元素 结束标记：必需 主要属性： size属性：指定列表的高度 multiple属性：指定数据项可以多选 Name属性：指定该控件的名字 作用：建立一个选择菜单/列表,菜单项/列表项元素,语法 开始标记：必需 内容： 文本 结束标记：可选 主要属性： value属性：指定选中该项提交的值 selected属性：指定该项预先被选择 作用：代表一个选择菜单/列表的选项,菜单/列表控件举例, 学生 教职员工 工人 , 学生 教职员工 工人 ,菜单/列表控件举例,Optgroup分组,菜单/列表控件举例,多选,标签元素,语法 开始标记：必需 内容：文本 结束标记：必需 主要属性： For：表示与该元素相联系的控件的ID值 作用： 将文本与控件联系在一起，将文本与控件联系在一起后，用户就可以单击这个文本，效果就同单击控件一样,FIELDSET元素,语法 开始标记：必需 内容： LEGEND元素 元素 结束标记：必需 作用： 对输入域元素进行分组,LEGEND元素,语法 开始标记：必需 内容： 文本 结束标记：必需 作用： 为FIELDSET提供一个说明性的标题,表单数据及处理方式,处理表单数据的主要方式 通用网关脚本（CGI脚本） 服务器端Java(JSP,Servlet,ASP,ASPX,PHP,etc),任务5-1:设计用户注册页面,设计用户注册页面 很多网站只对注册用户提供服务，要成为注册用户，必须进行注册，一般注册的方式都要通过注册页面来收集用户的信息，本任务就设计这样一个用户注册页面,本章总结,了解框架的概念 掌握如何创建带有框架的网页 理解表单的概念及其功能 掌握如何使用表单控件,
