html第5章：框架、表单.ppt

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