HTML4表单与框架.ppt

《HTML4表单与框架.ppt》由会员分享，可在线阅读，更多相关《HTML4表单与框架.ppt（26页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、网网络络营营n销销网络营销网络营销2/31v会使用表单的基本结构制作表单页面会使用表单的基本结构制作表单页面v会使用各种表单元素实现注册页面会使用各种表单元素实现注册页面v使用使用内嵌框架制作网页内嵌框架制作网页技能展示网网络络营营n销销网络营销网络营销3/31本章结构内嵌框架内嵌框架表单的高级用法表单的高级用法的用法的用法使用使用Dreamweaver添加表单添加表单表单与内嵌框架表单与内嵌框架内嵌框架简介内嵌框架简介表单的基本语法表单的基本语法表单元素的介绍表单元素的介绍表单表单网网络络营营n销销网络营销网络营销4/31v表单的典型应用表单的典型应用 注册用户注册用户 收集信息收集信息 反

2、馈信息反馈信息 提供搜索工具提供搜索工具为什么使用表单注册用户注册用户收集信息收集信息反馈信息反馈信息提供搜索工具提供搜索工具网网络络营营n销销网络营销网络营销5/31常见的表单元素单行文本框单行文本框(text)(text)单选按钮单选按钮(radio)(radio)复选框复选框(checkbox)(checkbox)下拉列表下拉列表(select)(select)重置按钮重置按钮(reset)(reset)提交按钮提交按钮(submit)(submit)密码框密码框(password)(password)文本域文本域(textarea)(textarea)网网络络营营n销销网络营销网络营销

3、6/31 action属性属性 指定提交后，由服务器上哪个处理程序处理指定提交后，由服务器上哪个处理程序处理 值一般为值一般为URL method属性属性 规定提交方式，取值为规定提交方式，取值为get或或post post方法比较安全方法比较安全表单的基本语法2-1 网网络络营营n销销网络营销网络营销7/31v制作简单的表单页面制作简单的表单页面表单的基本语法2-2 用户名：用户名： 密密  码：码：    表单输入元素：表单输入元素：inputinput表单提交地址表单提交地址和方法的设置和方法的设置网网络络营营n销销网络营销网络营销8/31v表单元

4、素大部分都是用表单元素大部分都是用标签标签表单元素的基本格式指定元素的类型，可为指定元素的类型，可为texttext、radioradio、submitsubmit等等元素的元素的名称名称元素的元素的初始值初始值元素的元素的初始宽度初始宽度元素中输入的元素中输入的最多字符个数最多字符个数元素是否被元素是否被选中选中checkedchecked网网络络营营n销销网络营销网络营销9/31v文本框文本框表单元素逐一介绍8-1文本框类型文本框类型 名名  字：字： 地地  址：址： 单行文本输入框，单行文本输入框，字符宽度为字符宽度为2020网网络络营营n销销网

5、络营销网络营销10/31v密码框密码框表单元素逐一介绍8-2 用户名：用户名： 密密  码：码： 密码框类型密码框类型输入密码密文显示输入密码密文显示网网络络营营n销销网络营销网络营销11/31v单选按钮单选按钮表单元素逐一介绍8-3性别：性别： 男男  女女单选按钮类型单选按钮类型默认选中默认选中网网络络营营n销销网络营销网络营销12/31v复选框复选框表单元素逐一介绍8-4爱好：爱好： 运动运动   聊天聊天   玩游戏玩游戏单选按钮类型单选按钮类型默认选中默认选中网网络络营营n销销网络营销网络营销13/31v列表框列表

6、框表单元素逐一介绍8-5 默认选择项默认选择项 出生日期出生日期: 年年  选择月份选择月份 一月一月 二月二月 三月三月 十二月十二月 月月  日日 默认选择项默认选择项默认选择项效果默认选择项效果网网络络营营n销销网络营销网络营销14/31普通按钮：普通按钮：buttonbutton提交按钮：提交按钮：submitsubmit重置按钮：重置按钮：resetreset图片按钮：图片按钮：imageimagev按钮按钮表单元素逐一介绍8-6 用户名：用户名： 密密  码：码： 普通按钮普通按钮提交按钮提交按钮重置按钮重置按钮普通按钮普通按钮提交按钮提交按

7、钮重置按钮重置按钮 图片按钮图片按钮图片所在路径图片所在路径图片按钮图片按钮网网络络营营n销销网络营销网络营销15/31v多行文本框多行文本框表单元素逐一介绍8-7 初始文本内容初始文本内容 阅读网站服务协议阅读网站服务协议 欢迎阅读服务条款协议欢迎阅读服务条款协议. 6 6行行4040个字符宽度个字符宽度6 6行行4040个字符宽个字符宽度的多行文本框度的多行文本框网网络络营营n销销网络营销网络营销16/31 选择需要上传的文件：选择需要上传的文件： v文件域文件域表单元素逐一介绍8-8文件域类型文件域类型文件域文件域网网络络营营n销销网络营销网络营销17/31v只读和禁用属性只读和禁用属性

8、 readonly：希望某个框内的内容只允许用户看，不能修改：希望某个框内的内容只允许用户看，不能修改 disabled：因没达到使用的条件，限制用户使用：因没达到使用的条件，限制用户使用 表单的高级用法 阅读网站服务协议阅读网站服务协议 欢迎阅读服务条款协议欢迎阅读服务条款协议 同意以上协议同意以上协议 内容禁止修改内容禁止修改按钮禁用按钮禁用网网络络营营n销销网络营销网络营销18/31v表单表单form的基本语法的基本语法 ？v表单元素有哪些，语法分别是什么表单元素有哪些，语法分别是什么 ？v如何设置表单元素的只读和禁用属性如何设置表单元素的只读和禁用属性 ？请思考typetype功能功能

9、例子例子texttext单行文本输入单行文本输入input type= name=username /passwordpassword密码密码input type= name=password /radioradio单选单选input type= /男男input type= /女女checkboxcheckbox多选多选input type= /书书input type= /画画input type= /琴琴resetreset重置表单数据重置表单数据input type= /filefile文件上传文件上传input type= name=files /submitsubmit提交表单数据

10、提交表单数据input type= /imageimage图形提交按钮图形提交按钮input type= src=images/button.gif /buttonbutton普通按钮普通按钮input type= /v列表框列表框v多行文本框多行文本框v文件域文件域 初始文本内容初始文本内容 选择需要上传的文件：选择需要上传的文件： 选择月份选择月份 一月一月 二月二月网网络络营营n销销网络营销网络营销19/31v使用使用Dreamweaver制作注册页面制作注册页面 新建页面插入表单新建页面插入表单 在插入面板组中选择在插入面板组中选择“表单表单” 在菜单中选择在菜单中选择“插入插入”“表

11、单表单” “表单表单” 显示表单，显示表单，“查看查看”“可视化助理可视化助理”“不可见元素不可见元素” 设置表单属性设置表单属性 在表单中插入一个在表单中插入一个9行行3列的表格列的表格 合并最后一列所有单元格合并最后一列所有单元格 设置表格属性设置表格属性 在第一列中输入文本在第一列中输入文本 在表格相应位置插入表单元素并设置属性在表格相应位置插入表单元素并设置属性使用Dreamweaver添加表单网网络络营营n销销网络营销网络营销20/31v什么是内嵌框架什么是内嵌框架 内嵌框架标签内嵌框架标签 内嵌框架又称浮动帧标记内嵌框架又称浮动帧标记 可以将一个文档可以将一个文档A嵌入在另一个文档

12、嵌入在另一个文档B中显示中显示v内嵌框架的优点内嵌框架的优点 保持网站风格一致保持网站风格一致 灵活性与方便性灵活性与方便性 iframe标记可以把一个页面嵌入任何一个页面的任何位置标记可以把一个页面嵌入任何一个页面的任何位置 提高网页的下载速度提高网页的下载速度内嵌框架网网络络营营n销销网络营销网络营销21/31v内嵌框架的语法内嵌框架的语法内嵌框架的用法2-1 第一个内嵌框架第一个内嵌框架第二个内嵌框架第二个内嵌框架第一个内嵌框架第一个内嵌框架第二个内嵌框架第二个内嵌框架网网络络营营n销销网络营销网络营销22/31v内嵌框架的属性内嵌框架的属性内嵌框架的用法2-2属性属性作用作用举例举例含

13、义含义srcsrc在在iframeiframe中显示的中显示的文档的文档的URLURLsrc=http:/www.basrc=http:/引用的引用的URLURL为为http:/http:/heightheightiframeiframe高度高度height=236height=236iframeiframe高度为高度为236px236pxwidthwidthiframeiframe宽度宽度width=400width=400iframeiframe宽度为宽度为400px400pxframeborderframeborder是否显示框架周围是否显示框架周围的边框的边框frameborder=1

14、frameborder=1显示边框显示边框frameborder=0frameborder=0不显示边框不显示边框namename框架标识名框架标识名name=mainFramename=mainFrame框架标识名框架标识名scrollingscrolling是否显示滚动条是否显示滚动条scrolling=noscrolling=no不显示滚动条不显示滚动条scrolling=yesscrolling=yes显示滚动条显示滚动条scrolling=autoscrolling=auto根据内容确定是否显示滚动条根据内容确定是否显示滚动条网网络络营营n销销网络营销网络营销23/31使用内嵌框架制作页面上方导航条上方导航条 下边显示第一页下边显示第一页 下边显示第二页下边显示第二页 下边显示第三页下边显示第三页 链接位置为内嵌链接位置为内嵌框架名称框架名称内嵌框架的初始值内嵌框架的初始值frameborder=1frameborder=1，设置边框设置边框为显示为显示网网络络营营n销销网络营销网络营销24/31本章总结内嵌框架内嵌框架表单的高级用法表单的高级用法的用法的用法使用使用Dreamweaver添加表单添加表单表单与内嵌框架表单与内嵌框架内嵌框架简介内嵌框架简介表单的基本语法表单的基本语法表单元素的介绍表单元素的介绍表单表单结束结束