《html表单和框架》PPT课件.ppt

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