JavaScript第4章.ppt

1、第四章,表单对象,课程目标,熟悉JavaScript的action、elements、name、length属性 掌握JavaScript的submit()方法 掌握文本框、普通按钮、提交按钮、重置按钮、下拉框、单选按钮、复选按钮、文件上传等对象的使用方法,体验项目,想知道常用表单对象是如何使用吗？想在网页中自己设计一个“学生信息管理”的界面吗？请看本章的体验程序。,表单对象及其常用属性、方法,表单对象是页面中最常用的对象之一，它有自己的属性和方法。,表单对象Form,文本对象Text,按钮对象Button,密码对象Password,Submit（提交按钮）对象、Reset（重置按钮）对象,选

2、择对象Select,选择对象的子对象Option,单选按钮对象Radio,复选对象Checkbox,文本区域对象Textarea,文件上传对象File,表单对象Form,表单对象是文件对象的子对象，JavaScript的运行时引擎自动为每一个表单建立一个表单对象。 格式： document.forms索引.属性 document.forms索引.方法（参数） document.表单名称.属性 document.表单名称.方法（参数）,表单对象的属性说明,文本对象Text,格式： document.forms索引.elements索引.属性 document.forms索引.elements索引

3、.方法（参数） document.表单名称.文本对象名称.属性 document.表单名称.文本对象名称.方法（参数）,文本对象的属性,文本对象的方法,事件处理程序,onBlur、onChange、onClick、onDbClick、onFocus、onKeyDown、onKeyPress、onKeyUp、onMouseDown、onMouseUp、onMouseOver、onMouseOut、onMouseMove、onSelect。,按钮对象Button,格式： document.forms索引.elements索引.属性 document.forms索引.elements索引.方法（参数

4、） document.表单名称.按钮对象名称.属性 document.表单名称.按钮对象名称.方法（参数）,按钮对象的属性,方法： blur()、click()、focus()、handleEvent(事件),事件处理程序：,onBlur、onClick、onDbClick、onFocus、onKeyDown、onKeyPress、onKeyUp、onMouseDown、onMouseUp、onMouseOver、onMouseOut、onMouseMove,密码对象Password,格式： document.forms索引.elements索引.属性 document.forms索引.ele

5、ments索引.方法（参数） document.表单名称.密码对象名称.属性 document.表单名称.密码对象名称.方法（参数）,属性：,方法：blur()、focus()、handleEvent(事件)、select(),事件处理程序：,onBlur、onChange、onClick、onDbClick、onFocus、onKeyDown、onKeyPress、onKeyUp 、onMouseDown、onMouseUp、onMouseOver、onMouseOut、onMouseMove、onSelect,下面看一下密码对象的使用，下面的例子将在页面里显示一个密码框。,密码： ,程序运

6、行后，在密码框中输入内容，如图所示，可以看到输入的内容以“*”代替,Submit（提交按钮）对象、Reset（重置按钮）对象,Submit对象是一个表单元素，必须在Form标记内定义。 单击“提交”按钮将把表单提交给由表单的“action”属性所指定的URL处理。该URL可是其他页面，也可以是本页面。 下面的例子将创建一个名称为“submitButton”的Submit对象，按钮上的显示文字为“完成”。 ,Reset对象是用于清除用户输入的表单数据，比如下面的例子就是清除用户输入到文本对象中的内容，以便用户重新输入。 国籍: ,当点击重置按钮时“中国”二字即被清除,选择对象Select,选择对

7、象属性：,方法： blur()、focus()、handleEvent(事件),事件处理程序：,onBlur、onClick、onChange、onFocus、onKeyDown、onKeyPress、onKeyUp 、onMouseDown、onMouseUp、onMouseOver、onMouseOut、onMouseMove,选择对象的子对象Option,格式：,文字 new Option(文字,值,defaultSelected,selected),属性：,在下面的例子中有两个选择对象： 在第一个选择对象中，用户只能选择一项； 在第二个选择对象中，用户可以选择多项。,请选择你喜欢的音乐

8、(单选)： R return false; ,如果大于规定的长度，就提示进行修改的信息, 欢迎留言，不过请长话短说. ,程序运行后，当用户在文本区域中输入的文字超过规定的字数后，就会弹出提示对话框“留言内容太长，请修改后再发送.”,文件上传对象File,属性：,方法：blur()、select()、focus()、handleEvent(事件),事件处理程序：,onBlur、onClick、onSelect、onFocus、onKeyDown、onKeyPress、onKeyUp、onMouseDown、onMouseUp、onMouseOver、onMouseOut、onMouseMove,

9、下面的例子显示了一个文件上传对象的相关操作，先用一个文件对象显示用户选择的上传文件，然后用两个按钮得到用户选择文件对象的属性名及文件路径。, 请选择需要上传的文件: 你选择的文件的属性分别是： ,在上面的代码中，当用户选择了需要上传的文件后，点击“得到文件路径和文件名”按钮时，程序就会弹出一个含有文件路径的对话框。程序运行效果如图所示：,体验实践,项目要求 （1）页面设计：设计页面的颜色和字体；设计学生信息管理的页面，页面中包含的对象有：学员编号、姓名、出生日期、年龄、性别、民族、婚姻状况、固定电话、手机、邮箱地址、邮政编码、三个联系人及联系方式、家庭住址、有无重大病史、病史概述、下一步及提交按钮等。其中，民族和出生日期使用选择对象，从1970年到2008年，性别和有无重大病史使用单选按钮，下一步和提交使用按钮，其余全部用文本对象。 （2）年龄验证，如果用户的年龄不是数字或大于三位数，提示输入非法。 （3）对学生的病史状况进行控制。如果没有重大病史，则病史概述不可用，同时改变颜色，否则病史概述可用。 （4）用户的出生日期是通过选择对象进行选择的，由于不同的年和月，对应的每月的天数不同，所以需要