JavaScript第4章.ppt

第四章第四章表单对象表单对象课程目标课程目标q熟悉熟悉JavaScript的的action、elements、name、length属性属性q掌握掌握JavaScript的的submit()方法方法q掌握文本框、普通按钮、提交按钮、重置按钮、下拉框、掌握文本框、普通按钮、提交按钮、重置按钮、下拉框、单选按钮、复选按钮、文件上传等对象的使用方法单选按钮、复选按钮、文件上传等对象的使用方法体验项目体验项目 想知道常用表单对象是如何使用吗？想在网页中自己设计想知道常用表单对象是如何使用吗？想在网页中自己设计一个一个“学生信息管理学生信息管理”的界面吗？请看本章的体验程序。的界面吗？请看本章的体验程序。表单对象及其常用属性、方法表单对象及其常用属性、方法 表单对象是页面中最常用的对象之一，它有自己的属性和方法。表单对象是页面中最常用的对象之一，它有自己的属性和方法。表单对象表单对象Form 文本对象文本对象Text 按钮对象按钮对象Button 密码对象密码对象Password Submit（提交按钮）对象、（提交按钮）对象、Reset（重置按钮）对象（重置按钮）对象 选择对象选择对象Select 选择对象的子对象选择对象的子对象Option 单选按钮对象单选按钮对象Radio 复选对象复选对象Checkbox 文本区域对象文本区域对象Textarea 文件上传对象文件上传对象File 表单对象表单对象Form 表单对象是文件对象的子对象，表单对象是文件对象的子对象，JavaScript的运行时引擎自动为每一个表单建立一的运行时引擎自动为每一个表单建立一个表单对象。个表单对象。格式：格式：document.forms索引索引.属性属性document.forms索引索引.方法（参数）方法（参数）document.表单名称表单名称.属性属性document.表单名称表单名称.方法（参数）方法（参数）表单对象的属性说明表单对象的属性说明 属性属性说说明明Action表表单动单动作作Elements以索引表示的所有表以索引表示的所有表单单元素元素EncodingMIME的的类类型型Length表表单单元素的个数元素的个数Method方法方法Name表表单单名称名称Target目目标标文本对象文本对象Text 格式：格式：document.forms索引索引.elements索引索引.属性属性document.forms索引索引.elements索引索引.方法（参数）方法（参数）document.表单名称表单名称.文本对象名称文本对象名称.属性属性document.表单名称表单名称.文本对象名称文本对象名称.方法（参数）方法（参数）文本对象的属性文本对象的属性 属性属性说说明明defaultValue该对该对象的象的value默默认认属性属性form该对该对象所在的表象所在的表单单name该对该对象的象的name属性属性type该对该对象的象的type属性属性value该对该对象的象的value属性属性文本对象的方法文本对象的方法 方法方法说说明明blur()失去焦点失去焦点focus()获获得焦点得焦点handleEvent(事件事件)使事件使事件处处理程序生效理程序生效select()该对该对象象设设置置为选为选取状取状态态事件处理程序事件处理程序 onBlur、onChange、onClick、onDbClick、onFocus、onKeyDown、onKeyPress、onKeyUp、onMouseDown、onMouseUp、onMouseOver、onMouseOut、onMouseMove、onSelect。按钮对象按钮对象Button 格式：格式：document.forms索引索引.elements索引索引.属性属性document.forms索引索引.elements索引索引.方法（参数）方法（参数）document.表单名称表单名称.按钮对象名称按钮对象名称.属性属性document.表单名称表单名称.按钮对象名称按钮对象名称.方法（参数）方法（参数）按钮对象的属性按钮对象的属性 属性属性说说明明form该对该对象所在的表象所在的表单单name该对该对象的象的name属性属性type该对该对象的象的type属性属性value该对该对象的象的value属性属性方法：方法：blur()、click()、focus()、handleEvent(事件事件)事件处理程序：事件处理程序：onBlur、onClick、onDbClick、onFocus、onKeyDown、onKeyPress、onKeyUp、onMouseDown、onMouseUp、onMouseOver、onMouseOut、onMouseMove密码对象密码对象Password 格式：格式：document.forms索引索引.elements索引索引.属性属性document.forms索引索引.elements索引索引.方法（参数）方法（参数）document.表单名称表单名称.密码对象名称密码对象名称.属性属性document.表单名称表单名称.密码对象名称密码对象名称.方法（参数）方法（参数）属性：属性：属性属性说说明明defaultValue该对该对象的象的value属性属性form该对该对象所在的表象所在的表单单name该对该对象的象的name属性属性type该对该对象的象的type属性属性value该对该对象的象的value属性属性方法：方法：blur()、focus()、handleEvent(事件事件)、select()事件处理程序：事件处理程序：onBlur、onChange、onClick、onDbClick、onFocus、onKeyDown、onKeyPress、onKeyUp、onMouseDown、onMouseUp、onMouseOver、onMouseOut、onMouseMove、onSelect下面看一下密码对象的使用，下面的例子将在页面里显示下面看一下密码对象的使用，下面的例子将在页面里显示一个密码框。一个密码框。密码：密码：程序运行后，在密码框中输入内容，如图所示，可以看到输入的内容以程序运行后，在密码框中输入内容，如图所示，可以看到输入的内容以“*”代替代替 Submit（提交按钮）对象、（提交按钮）对象、Reset（重置按钮）对象（重置按钮）对象Submit对象是一个表单元素，必须在对象是一个表单元素，必须在Form标记内定义。标记内定义。单击单击“提交提交”按钮将把表单提交给由表单的按钮将把表单提交给由表单的“action”属属性所指定的性所指定的URL处理。该处理。该URL可是其他页面，也可以是本可是其他页面，也可以是本页面。页面。下面的例子将创建一个名称为下面的例子将创建一个名称为“submitButton”的的Submit对象，按钮上的显示文字为对象，按钮上的显示文字为“完成完成”。Reset对象是用于清除用户输入的表单数据，比如下面的对象是用于清除用户输入的表单数据，比如下面的例子就是清除用户输入到文本对象中的内容，以便用户重例子就是清除用户输入到文本对象中的内容，以便用户重新输入。新输入。国籍国籍:当点击重置按钮时当点击重置按钮时“中国中国”二字即被清二字即被清除除选择对象选择对象Select 选择对象属性：选择对象属性：属性属性说说明明form该对该对象所在的表象所在的表单单name该对该对象的象的name属性属性length选项选项的数目的数目options标记标记selectedIndex所所选项选项目的索引目的索引值值type该对该对象的象的type属性属性方法：方法：blur()、focus()、handleEvent(事件事件)事件处理程序：事件处理程序：onBlur、onClick、onChange、onFocus、onKeyDown、onKeyPress、onKeyUp、onMouseDown、onMouseUp、onMouseOver、onMouseOut、onMouseMove 选择对象的子对象选择对象的子对象Option 格式：格式：文字文字new Option(文字文字,值值,defaultSelected,selected)属性：属性：属性属性说说明明selected判断判断该选项该选项是否被是否被选选取取defaultSelected指定指定该选项为该选项为默默认选认选定状定状态态index所有所有选项选项所构成的数所构成的数组组索引索引值值length选项选项的数目的数目text该选项显该选项显示的文字示的文字value所所选项传选项传到服到服务务器的器的值值在下面的例子中有两个选择对象：在下面的例子中有两个选择对象：在第一个选择对象中，用户只能选择一项；在第一个选择对象中，用户只能选择一项；在第二个选择对象中，用户可以选择多项。在第二个选择对象中，用户可以选择多项。请选择你喜欢的音乐请选择你喜欢的音乐(单选单选)：R&B Jazz Blues New Age 请选择你喜欢的音乐请选择你喜欢的音乐(多选多选):R&B Jazz Blues New Age 单选按钮对象单选按钮对象radio Html表单中一组单选按钮中的单个单选钮。用户可以使用一组单选按表单中一组单选按钮中的单个单选钮。用户可以使用一组单选按钮用于从一系列选项中选择一个。钮用于从一系列选项中选择一个。Html中将中将input标签中的标签中的type属性值设定为属性值设定为“radio”即可创建即可创建radio类类型的对象。所有位于同一组中的单选按钮的型的对象。所有位于同一组中的单选按钮的name属性必须相同。这将属性必须相同。这将使得它们可以作为一个独立组访问。使得它们可以作为一个独立组访问。格式：格式：document.forms索引索引.elements索引索引(索引索引).属性。属性。document.forms索引索引.elements索引索引(索引索引).方法（参数）方法（参数）document.表单名称表单名称.单选对象名称单选对象名称索引索引.属性属性document.表单名称表单名称.单选对象名称单选对象名称索引索引.方法（参数）方法（参数）属性：属性：属性属性说说明明checked设设置置该对该对象象为选为选定状定状态态defaultChecked对应该对对应该对象的默象的默认选认选定状定状态态form该对该对象所在的表象所在的表单单name该对该对象的象的name属性属性type该对该对象的象的type属性属性value该对该对象的象的value属性属性方法：方法：blur()、click()、focus()、handleEvent(事件事件)事件处理程序：事件处理程序：onBlur、onClick、onDbClick、onFocus、onKeyDown、onKeyPress、onKeyUp、onMouseDown、onMouseUp、onMouseOver、onMouseOut、onMouseMove 复选对象复选对象Checkbox 复选对象是可以同时选中多个选项的对象。复选对象是可以同时选中多个选项的对象。格式：格式：document.forms索引索引.elements索引索引.属性属性document.forms索引索引.elements索引索引.方法（参数）方法（参数）document.表单名称表单名称.复选对象名称复选对象名称索引索引.属性属性document.表单名称表单名称.复选对象名称复选对象名称索引索引.方法（参数）方法（参数）属性：属性：属性属性说说明明checked设设置置该对该对象象为选为选定状定状态态defaultChecked对应该对对应该对象的默象的默认选认选定状定状态态form该对该对象所在的表象所在的表单单name该对该对象的象的name属性属性type该对该对象的象的type属性属性value该对该对象的象的value属性属性方法：方法：blur()、click()、focus()、handleEvent(事件事件)事件处理程序：事件处理程序：onBlur、onClick、onDbClick、onFocus、onKeyDown、onKeyPress、onKeyUp、onMouseDown、onMouseUp、onMouseOver、onMouseOut、onMouseMove 文本区域对象文本区域对象Textarea 它是由若干行的文本组成的对象。它是由若干行的文本组成的对象。属性：属性：属性属性说说明明defaultValue对应该对对应该对象的默象的默认值认值form该对该对象所在的表象所在的表单单name该对该对象的象的name属性属性type该对该对象的象的type属性属性value该对该对象的象的value属性属性方法：方法：blur()、select()、focus()、handleEvent(事件事件)事件处理程序：事件处理程序：onBlur、onClick、onChange、onSelect、onFocus、onKeyDown、onKeyPress、onKeyUp、onMouseDown、onMouseUp、onMouseOver、onMouseOut、onMouseMove 下面的代码中提供了一个文本区域对象，当用户输入的文字超过六十下面的代码中提供了一个文本区域对象，当用户输入的文字超过六十字，点击字，点击“留言完毕留言完毕”按钮时，就会弹出提示对话框按钮时，就会弹出提示对话框“留言内容太长，留言内容太长，请修改后再发送请修改后再发送.”。function isTooLong(elm)if(elm.length50)alert(留言内容太长，请修改后再发送留言内容太长，请修改后再发送.);return false;如果大于规定的长度，就提示如果大于规定的长度，就提示进行修改的信息进行修改的信息欢迎留言，不过请长话短说欢迎留言，不过请长话短说.程序运行后，当用户在文本区域中输入的文字超过规定的字数后，程序运行后，当用户在文本区域中输入的文字超过规定的字数后，就会弹出提示对话框就会弹出提示对话框“留言内容太长，请修改后再发送留言内容太长，请修改后再发送.”文件上传对象文件上传对象File 属性：属性：属性属性说说明明form该对该对象所在的表象所在的表单单name该对该对象的象的name属性属性type该对该对象的象的type属性属性value该对该对象的象的value属性属性方法：方法：blur()、select()、focus()、handleEvent(事件事件)事件处理程序：事件处理程序：onBlur、onClick、onSelect、onFocus、onKeyDown、onKeyPress、onKeyUp、onMouseDown、onMouseUp、onMouseOver、onMouseOut、onMouseMove下面的例子显示了一个文件上传对象的相关操作，先用一个文件对象下面的例子显示了一个文件上传对象的相关操作，先用一个文件对象显示用户选择的上传文件，然后用两个按钮得到用户选择文件对象的显示用户选择的上传文件，然后用两个按钮得到用户选择文件对象的属性名及文件路径。属性名及文件路径。请选择需要上传的文件请选择需要上传的文件:你选择的文件的属性分别是：你选择的文件的属性分别是：在上面的代码中，当用户选择了需要上传的文件后，点击在上面的代码中，当用户选择了需要上传的文件后，点击“得到得到文件路径和文件名文件路径和文件名”按钮时，程序就会弹出一个含有文件路径的按钮时，程序就会弹出一个含有文件路径的对话框。程序运行效果如图所示：对话框。程序运行效果如图所示：体验实践体验实践 项目要求项目要求（1）页面设计：设计页面的颜色和字体；设计学生信息管理的页面，）页面设计：设计页面的颜色和字体；设计学生信息管理的页面，页面中包含的对象有：学员编号、姓名、出生日期、年龄、性别、民页面中包含的对象有：学员编号、姓名、出生日期、年龄、性别、民族、婚姻状况、固定电话、手机、邮箱地址、邮政编码、三个联系人族、婚姻状况、固定电话、手机、邮箱地址、邮政编码、三个联系人及联系方式、家庭住址、有无重大病史、病史概述、下一步及提交按及联系方式、家庭住址、有无重大病史、病史概述、下一步及提交按钮等。其中，民族和出生日期使用选择对象，从钮等。其中，民族和出生日期使用选择对象，从1970年到年到2008年，性年，性别和有无重大病史使用单选按钮，下一步和提交使用按钮，其余全部别和有无重大病史使用单选按钮，下一步和提交使用按钮，其余全部用文本对象。用文本对象。（2）年龄验证，如果用户的年龄不是数字或大于三位数，提示输入）年龄验证，如果用户的年龄不是数字或大于三位数，提示输入非法。非法。（3）对学生的病史状况进行控制。如果没有重大病史，则病史概述）对学生的病史状况进行控制。如果没有重大病史，则病史概述不可用，同时改变颜色，否则病史概述可用。不可用，同时改变颜色，否则病史概述可用。（4）用户的出生日期是通过选择对象进行选择的，由于不同的年和）用户的出生日期是通过选择对象进行选择的，由于不同的年和月，对应的每月的天数不同，所以需要将用户选择的年和月转换成数月，对应的每月的天数不同，所以需要将用户选择的年和月转换成数字，然后根据这个数字计算该月的天数。字，然后根据这个数字计算该月的天数。本章总结本章总结q熟悉熟悉JavaScript的的action、elements、name、length属性属性q掌握掌握JavaScript的的submit()方法方法q掌握文本框、普通按钮、提交按钮、重置按钮、掌握文本框、普通按钮、提交按钮、重置按钮、下拉框、单选按钮、复选按钮、文件上传等对象下拉框、单选按钮、复选按钮、文件上传等对象的使用方法的使用方法