Chapter07_表单与表单元素PPT课件

1、Javascript第七章 表单与表单元素2021/3/92回回 顾顾JavaScript的常用事件有哪些？请列举六个以上。事件对象（event）的属性有哪些？DOM（文档对象模型）中查找节点的方法常用有哪几个？HTML DOM与CORE DOM的区别主要体现在哪里？2021/3/93目目 标标使用与以下各项关联的事件处理程序,掌握各项的相关属性和方法 ： 文本框 文本区域 命令按钮 复选框 单选按钮 下拉菜单 编写用于验证表单的 JavaScript 代码2021/3/94Html Html 表单元素表单元素对象Html标记type属性描述和事件Button“button”按钮;onclic

2、kReset“reset”重置按钮;onclickSubmit“submit”提交按钮;onclickCheckbox “checkbox”复选按钮；onclickRadio“radio”单选按钮;onclickText“text”文本框;onchangeTextarea“textarea”多行文本框;onchangePassword “password”密码框;onchangeSelect“select-one”“select-one”下拉菜单;onchange2021/3/95表单和表单元素表单和表单元素Html表单的使用是JavaScript程序的基本要素Web程序对于表单要做两方面的处

3、理 服务器端处理表单重点在于处理整批输入的数据，然后动态的作出响应 客户端处理表单重点在于处理各种表单事件，并验证各数据的合法有效2021/3/96表单的属性表单的属性 方法和事件方法和事件事 件onsubmit表单发生提交时激活onreset表单发生重置时激活属性elements 元素数组，可以通过下标逐一访问表单中的元素action设置和读取表单的提交位置method设置和读取表单的提交方式方法submit()调用此方法，表单将被提交reset()调用此方法，表单将备重置表单的访问可以通过以下两种方式 document . . 表单名称/ document . . forms / 对网页中

4、的表单根据出现的先后顺序按数组下标访问表单的相关属性、方法和事件2021/3/97命名表单和表单元素命名表单和表单元素表单元素都有一个name属性,如果要将表单提交给服务器，则必须设置相应表单元素的这一属性.标记自身也有一个name属性，该属性与表单提交没有任何关系。它的存在是为了方便javaScript程序的设计者。表单元素可以通过两种方式访问 document . . 表单名称 . . 表单元素名称 document . . 表单名称 . . elements elements 表单中有多个元素具有相同的name属性值时，JavaScript就将这些元素存放在一个数组中。2021/3/98

5、文本框文本框事 件onfocus/onblur获得/失去焦点事件onchange当内容发生改变时激活onclick点击事件属性type只读属性,表单元素的类型value文本框里的文字name文本框元素的名称readonly设置为只读状态disabled设置为失效状态方法focus()/blur()获得焦点/失去焦点select()文本框内容全选Text 元素/Textarea元素/Password元素2021/3/99文本框文本框Text/password maxLength:设置最大输入数字 size:设置文本框长度 defaultValue 初始值Textarea rows设置文本域的高

6、cols设置文本域的框 value文本框当前显示的文本 defaultValue 文本框的初始内容。（文本框重置时将恢复这个值）document.getElementById(“txtName”).size=“10”2021/3/910按钮按钮Button 元素 没有自己的默认行为，除非它具有onclick(或其它)事件，否则它在表单中没有作用。 因为超链接提供了与按钮一样的onclick事件处理程序，任何按钮对象都可以用一个超链接代替。Submit 元素 和 Reset 元素 具有默认动作 (分别为提交和重置表单)。因为它们有默认动作，及时没有onclick事件处理程序，它们也能完成一定的功

7、能。 如果onclick处理程序返回false，这两种按钮的默认动作就不会被执行 可以通过submit元素的onclick事件处理表单验证，但form对象自身的onsubmit处理程序进行表单验证更常用一些.事 件onclick按钮点击事件属性type只读属性,按钮的类型value按钮上的文字name按钮元素的名称2021/3/911多选多选 单选按钮单选按钮Radio 元素 / Checkbox元素 同一组Radio元素具有相同的name。 同一组Checkbox元素通常也拥有相同的name，但不是必须的 在引用这些元素时，通过名字引用的对象是与元素同名的数组。 可以通过数组下标单独访问每一

8、个Radio( Checkbox )元素 Radio( Checkbox )元素的checked属性用来判断是否被选择，该属性为布尔值2021/3/912下拉列表下拉列表3 31 1Select 元素 Select 元素不同于单选和多选按钮，每一个Select元素表示所有选项的集合。这些选项由标记设置. Select元素的options 的数组属性用来表示标记。可以通过options数组来获取标记的相关信息。 当用户选择不同的选项时将触发onchange事件 select对象存放的每个option对象都定义了value属性 Select元素的value属性为选中的option的value值，用

9、于向服务器端传值 Select元素的selectedIndex属性表名当前被选中的选项下标 可以通过遍历所有option元素，检查其selected属性的值是否为真Option 元素 Option元素具有text属性，用来表示显示的纯文本字符串 Option元素的value属性，用来表示option被送往服务器的值2021/3/913下拉列表下拉列表3 32 2Option对象的创建 var opt = document.createElement(“option”);opt.value = “111”;opt.innerHTML = “My Text”;或者：var opt = new Op

10、tion(“My Text”);/ var opt = new Option(“My Text”,”111”); /new Option(text,value)/ var opt = new Option(“My Text”,”111”,true); / true代表选中状态2021/3/914下拉列表下拉列表3 33 3事 件onchange当选中的下拉选项发生改变时激活属性type只读属性，返回下拉列表的表单类型length返回下拉列表中的选项数目name设置或返回下拉列表的名称value返回选中项目的value值（即表单提交时传递给server端的下拉列表的值）selectedIndex设置或返回下拉列表中被选项目的索引号options返回包含下拉列表中的所有选项的一个数组方法add(oElement,index)向下拉列表添加一个option选项例: oSel.options.add(oElement)remove (i)从下拉列表中删除一个option选项blur()从下拉列表移开焦点focus()在下拉列表设置焦点2021/3/915总结总结表单提交前的校验事件采用onsubmit，对于有错误的内容，return false，表单将不再提交；文本框失去焦点的事件为onblur,文本全选的方法是