《HTML表单与页面控件.ppt》由会员分享，可在线阅读，更多相关《HTML表单与页面控件.ppt（31页珍藏版）》请在三一办公上搜索。
1、第六章,表单与页面控件重要的编程界面接口元素,课程目标,通过本章学习，可以掌握：表单的基本概念及作用 写入标记菜单下拉列表,DOM文档对象模型,从编程角度，可以将网页各层次分解成不同对象浏览器窗口：window网页所在层面：document网页内部层面：frame,form,button,在编程的时候，比如 javascript，本质上就是操作这些对象，并调用它们的属性和方法这些元素也是构成与用户交互的重要构件,DOMdocument 文档对象模型,DOMwindow 文档对象模型,表单与页面控件,表单标记写入标记下拉列表框可以输入多行的文本框,表单标记,表单在Web网页中用来给访问者填写信息
2、，从而能采集客户端信息，使网页具有交互的功能 表单是由窗体和控件组成的 格式：,处理程序的程序名(包括 网络路径:网址或相对路径),从表单中获得信息的方式,写入标记,在html语言中,标记具有重要的地位，它能够将浏览器中的控件加载到html文档中标志用来定义一个用户输入区，用户可在其中输入信息 标志中共提供了九种类型的输入区域，具体是哪一种类型由type属性来决定,该标记是单标记，没有结束标记,必须放在标志对之间,的属性,1单行的文本输入区域,2按钮,3复选框,4隐藏区域,5密码输入区,6单选按钮类型,7使用图像来代替Submit按钮,单行的文本输入区域,(1)name定义控件名称,(2)va
3、lue指定控件初始值,属性及说明,(3)size指定控件宽度,(4)maxlength表示该文本输入框允许输入的最大字符数,(5)onchang 当文本改变时要执行的函数,(6)onselect 当控件被选中时要执行的函数,(7)onfocus 当文本接受焦点时要执行的函数,单行的文本输入区域实例,标记单独使用,必须放在之间,按 钮,分类,普通按钮,提交到服务器的按钮,重置按钮,可将表单内容全部清除,当这个按钮被点击时，就会连接到表单form属性action指定的url地址,按钮共同的属性,共同的属性,name 指定按钮名称。value 指定按钮表面显示的文字。onclick 指定单击按钮后要
4、调用的函数。onfocus 指定按钮接受焦点时要调用的函数,普通按钮,当这个按钮被点击时，就会调用属性onclick指定的函数；在使用这个按钮时，一般配合使用value指定在它上面显示的文字；用onclick指定一个函数，一般为JavaScript的一个事件,按钮实例,点击按钮function msg()alert(我被点击了.);,复选框,checkbox用于多选,有以下属性,name 定义控件名称。value 定义控件的值。checked 设定控件初始状态是被选中的。onclick 定义控件被选中时要执行的函数。onfocus 定义控件为焦点时要执行的函数。,复选框实例,复选框你喜欢江山还
5、是美人？a.江山b.美人c.爱江山也爱美人,隐藏区域,用户不能在其中输入，用来预设某些要传送的信息,对用户来说是不可见的,属性,name 控件名称。value 控件默认值。hidden隐藏控件的默认值会随表单一起发送给服务器,例如,输入密码的区域,当用户输入密码时，区域内将会显示“*”号,属性,name 定义控件名称。value 指定控件初始值,该值就是浏览器被打开时在文本框中的内容。size 指定控件宽度,表示该文本输入框所能显示的最大字符数。maxlegnth 表示该文本输入框允许用户输入的最大字符数。,密码框实例,两者的唯一区别,单选按钮类型,radio用于单选，有以下属性,(1)nam
6、e 定义控件名称(2)value 定义控件的值(3)checked 设定控件初始状态是被选中的(4)onclick 定义控件被选中时要执行的函数(5)onfocus 定义控件为焦点时要执行的函数,当为单选项时，所有按钮name属性必需相同。如：都设置为abc,单选按钮实例,你的休闲爱好是什么：音乐体育 旅游,使用图像来代替Submit按钮,图像的源文件名由src属性指定，用户点击后，表单中的信息和点击位置的X、Y坐标一起传送给服务器,属性,name 指定图像按钮名称。src 指定图像的url地址,图像按钮实例,下拉列表框,标志对用来创建一个菜单下拉列表框此标志对用于标志对之间,属性,multi
7、ple name size,设置列表的高度，缺省时值为1,可多选,控件名称,下拉列表框实例,请选择最喜欢的女歌星:张曼玉王菲田震那英,可以输入多行的文本框,用来创建一个可以输入多行的文本框 此标志对用于标志对之间,属性,(1)onchange指定控件改变时要调用的函数(2)onfocus当控件接受焦点时要执行的函数(3)onblur当控件失去焦点时要执行的函数(4)onselect当控件内容被选中时要执行的函数(5)name文字区块的名称，作识别之用，将会传至CGI(6)cols文字区块的宽度(7)rows文字区块的列数，即其高度(8)wrap属性 定义输入内容大于文本域时显示的方式,您的意见对我很重要:请将意见输入此区域,使用必须以Post为提交方式,动手实践,创建具有交互性的HTML页面 本章我们要为HTML页面添加一些表单控件，使页面更加具有交互性。如图所示：,再 见,
