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