第五章(表单和表单元素)ppt课件.ppt

《第五章(表单和表单元素)ppt课件.ppt》由会员分享，可在线阅读，更多相关《第五章(表单和表单元素)ppt课件.ppt（31页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第五章表单与表单元素回顾框架标记各窗口尺寸设置各窗口间相互操作(Frame Target)IFrame的外观IFrame的使用n表单的基本概念及作用 n九种写入标记n菜单下拉列表的使用 课程目标体验 n用于采集和提交用户输入的信息 表单标记n表单在Web网页中用来给访问者填写信息，从而能采集客户端信息，使网页具有交互的功能 n表单是由窗体和控件组成的 处理程序的程序名(包括 网络路径:网址或相对路径)提交信息的方式 methodnGET，显示提交，数据量小nPOST，隐式提交，数据量大GET|POST平板车搬家大型集装箱货车搬家写入标记 n标记能够将浏览器中的控件加载到html文档中n必须放在

2、标志对之间n用来定义一个用户输入区，用户可在其中输入信息。标志中共提供了九种类型的输入区域，具体是哪一种类型由type属性来决定 注意：该标记是单标记，没有结束标记 的属性1单行的文本输入区域2按钮 3复选框4隐藏区域 5密码输入区 6单选按钮类型 7图像按钮 input type=checkbox 8表单事件处理按钮 9文件域 单行的文本框(1)name定义控件名称(2)value指定控件初始值,属性及说明(3)size指定控件宽度(4)maxlength表示该文本输入框允许输入 的最大字符数(5)onchang 当文本改变时要执行的函数(6)onselect 当控件被选中时要执行的函数(7

3、)onfocus 当文本接受焦点时要执行的函数 单行文本框实例 必须放在之间设置当行文本框的其他属性，观察效果输入密码的区域 属性 name 定义控件名称。value 指定控件初始值,该值就是浏览器 一开始在文本框中的内容。size 指定控件宽度,表示该文本输入框 所能显示的最大字符数。maxlegnth 表示该文本输入框允许用户输入 的最大字符数。当用户输入密码时，区域内将会显示“*”号密码框实例两者的唯一区别查看源码查看源码按钮 分类分类普通按钮提交到服务器的按钮 重置按钮 可将表单内容全部清除点击就会连接到action指定的url地址按钮共同的属性 共同的属性 name 指定按钮名称va

4、lue 指定按钮表面显示的文字onclick 指定单击按钮后要调用的函数onfocus 指定按钮接受焦点时要调用的函数所谓调用的函数，是后面章节学的JavaScript函数普通按钮n当这个按钮被点击时，默认不会有任何的效果n必须调用属性onclick指定的函数n在使用这个按钮时，一般配合使用value指定在它上面显示的文字n用onclick指定一个函数，一般为JavaScript的一个方法按钮实例msg()就是JavaScript代码,后面的章节会详细讲解查看源码查看源码图像按钮 n图像的源文件名由src属性指定，用户点击后，表单中的信息和点击位置的X、Y坐标一起传送给服务器 属性 name

5、指定图像按钮名称。src 指定图像的url地址图像按钮实例 查看源码查看源码单选按钮类型 radio用于单选，有以下属性(1)name 定义控件名称(2)value 定义控件的值(3)checked 设定控件初始状态是被选中的(4)onclick 定义控件被选中时要执行的函数(5)onfocus 定义控件为焦点时要执行的函数当为单选项时，所有按钮name属性必需相同单选按钮实例 音乐音乐checked表示默认被选中radio表示单选按钮查看源码查看源码复选框 ncheckbox用于多选name 定义控件名称。value 定义控件的值。checked 设定控件初始状态是被选中的。onclick

6、定义控件被选中时要执行的函数。onfocus 定义控件为焦点时要执行的函数。JavaScript函数可口可乐可口可乐复选框实例1.注意这里的value值2.name可以相同也可以不同3.相同name属性的复选框可以看成一组4.checked=“checked”表示默认被选中查看源码查看源码文件域属性：name 控件名称。例如 用户可以通过文件域来浏览本地文件并选择。配合服务端程序，可以实现本地文件的上传注意：要实现文件上传必须以Post为提交方式 并且设置表单属性enctype=multipart/form-data隐藏区域属性name 控件名称。value 控件默认值。例如 用户不能在其中输

7、入，用来预设某些要传送的信息对用户来说是不可见的看不见的文本框下拉列表框 属性 multiple name size设置列表的高度缺省时值为1 可多选 控件名称标志对用来创建一个菜单下拉列表框下拉列表框实例苹果multiple代表多选Selected表示默认选项将size改为1，看看效果查看源码查看源码可以输入多行的文本框 属性(1)onchange指定控件改变时要调用的函数(2)onfocus当控件接受焦点时要执行的函数(3)onblur当控件失去焦点时要执行的函数(4)onselect当控件内容被选中时要执行的函数(5)name文字区块的名称，作识别之用，将会传至CGI(6)cols文字区块的宽度(7)rows文字区块的列数，即其高度(8)wrap属性 定义输入内容大于文本域时显示的方式 用来创建一个可以输入多行的文本框 文本域示例 查看源码查看源码表单的作用n用户注册n系统登录n发表留言或内容n任何需要用户填写内容，进行交互操作的时候总结n表单的作用？Action method name 属性n中type的不同，决定了表单中不同的控件n文本框，密码框，文本域，隐藏域的区别n单选框和复选框的区别n下拉列表框不同属性值，会有不同的显示效果作业n完成一个网站用户注册的页面n要求：n需要有账号，密码n个人详细信息n个人兴趣爱好n网站服务条款n注册和取消按钮