基于.NET的Web应用开发）资源单元2（6）网页设计与制作基础（html+css+js）

1、WEB 应 用 开 发单元2：网站的规划与设计任务2：网页设计与制作根底html+css+js(5)主 要 内 容事件1访问表单2提交、重置表单3表单常用方法与事件4学习目标知识目标：掌握使用JavaScript进行表单验证的方法能力目标：能够使用JavaScript访问表单与表单域能够使用JavaScript对注册表单的内容进行验证技术应用的背景表单是网页的重要组成局部，通过表单可以使用户向效劳器发送数据。表单由form、input、textarea和select等HTML元素构成，form元素指定发送数据时使用的HTTP请求方法以及用于处理表单的效劳器端程序或动态网页的URL地址等，用户利

2、用表单输入信息并提交给效劳器进行处理，在提交之前可以通过JavaScript脚本对表单信息进行检查和处理。一、事件概述1. 事件事件是指可以被浏览器识别的、发生在页面上的用户动作或状态变化。许多HTML元素可以激发事件，通过响应特定元素的特定事件，可以大大地提升网页的交互性。其中：用户动作：用户对页面的鼠标或键盘操作。例如，click、keypress 等状态变化：页面的状态发生变化。例如，load、resize、change 等一、事件概述2.编写事件响应代码在元素的属性声明中直接写JavaScript代码。例如：响应函数：function Button1_onclick() /. 事件名称

3、响应函数名一、事件概述3.事件驱动编程事件驱动编程：是指为需要处理的事件编写相应的事件处理程序事件驱动编程的一般步骤：第1步，确定响应事件的元素第2步，为指定元素确定需要响应的事件类型第3步，为指定元素的指定事件编写相应的事件处理程序第4步，将事件处理程序绑定到指定元素的指定事件一、事件概述4.事件绑定将一个函数与某个 HTML 元素的事件属性关联起来，使得当相应事件发生时就会触发该函数的执行，事件处理程序为被绑定的函数。事件绑定的两种方法静态绑定：是指将处理事件的程序代码直接指定为 HTML 元素的事件属性值。动态绑定：是指通过语句建立事件绑定。对象.事件属性 = 函数引用;一、事件概述5.

4、事件属性使用事件属性可以为元素的指定事件绑定事件处理程序事件属性名：在事件名的根底上，加上前缀“on，如 onclick在HTML标记中设置事件属性时，还可以把事件处理函数属性值设置为一个返回布尔值的return语句。如果这个return语句返回ture，那么执行该事件的默认行为；如果返回false，那么取消该事件的默认行为。对于HTML元素的不同事件，当相应的事件处理函数返回false值时效果是有所不同的。一、事件概述6.事件分类页面事件：是指因页面状态发生变化而产生的事件，包括 onload、onunload、onresize、onabort、 onerror等鼠标事件：是指用户操作鼠标点

5、击或移动而触发的事件，包括 onclick、ondblclick、onmousedown等键盘事件：是指用户在键盘上敲击、输入时触发的事件，包括 onkeypress、onkeydown、onkeyup等表单事件：是指与表单或表单控件相关的事件，包括 onsubmit、onreset、onchange、onselect、onblur和 onfocus 等一、事件概述7.事件流事件流是指事件的冒泡传递过程源元素父元素根对象即 Document 对象由于存在事件流，因此当一个事件发生时，不仅可以由产生事件的元素响应，也可以由其他元素响应。有些事件如 load、unload、blur、focus 等

6、事件不会传递二、访问表单1. 访问表单方式：假设某表单的ID为form1，那么可以使用DOM方法来获取该表单对象：假设某表单是网页中的第一个表单，且其名称name属性为form1，那么可以通过document的forms集合来获取该表单：oForm = document.getElementById(form1);oForm = document.forms0;oForm = document.formsform1;oForm = document.form1;二、访问表单2. 表单对象的常用属性acceptCharset：设置或获取一个逗号分隔的列表，内容是效劳器可接受的字符集。action

7、：设置或获取表单内容要发送到并进行处理的URL。enctype：设置或检索表单的MIME编码方式。默认设置为application/x-www-form- urlencoded，假设要上传文件，那么应设置为multipart/form-data。id：设置或检索表单的id。二、访问表单2. 表单对象的常用属性续length：检索表单中的表单域的数目。method：设置或检索如何将表单数据发送到效劳器。假设设置为GET，那么把表单数据附加到action属性指定的URL上发送；假设设置为POST，那么通过HTTP发布事务发送数据。name：设置或检索表单的名称。target：设置或检索表单提交结果

8、的框架或窗口名称。二、访问表单3. 表单的集合elements：包含表单中除外的所有表单域。elements集合的length属性与表单的length属性值相等。4. 表单的方法reset()：把表单中的表单域重置为它们的默认值，但不会触发表单的onreset事件。submit()：用于提交表单，但不会触发表单的onsubmit事件。表单对象的常用事件onreset：当重置表单时触发。onsubmit：当提交表单时触发。三、访问表单域在一个表单内可以添加一些表单域，例如按钮、文本框以及列表框等，这些表单域都包含表单的elements集合中。在JavaScript脚本中，既可以用document

9、.getElementById方法和表单域的ID来获取该表单域，也可以通过表单域的name属性或表单域在elements集合中的索引来访问不同的表单域。用elements集合的length属性可获取表单中包含的表单域数目。三、访问表单域通过ID访问表单域通过索引访问表单域通过name访问表单域直接通过name属性来访问表单域：假设表单域的名称中包含空格，那么需要使用方括号标记：var oTextBox = document.getElementById(txtUsername);var oTextBox = document.form1.elements0;var oTextBox = doc

10、ument.form1.elementstxtUsername;var oTextBox = document.form1.txtUsername;var oTextBox = document.form1.elementsUser name;三、访问表单域表单域的属性、方法和事件disabled属性：获取或设置表单域是否被禁用。form属性：获取包含表单域所在的表单。blur()方法：使表单域失去焦点，并将焦点移到别处。focus()方法：使表单域获得焦点。onblur事件：当表单域失去焦点时发生，将执行onblur事件处理程序。onfocus事件：当表单域获得焦点时发生，将执行onfocu

11、s事件处理程序。四、提交表单1. 表单提交方式通过单击提交按钮提交表单：通过单击图像按钮提交表单：通过调用表单的submit()方法提交表单：四、提交表单2. 表单提交目的地提交给效劳器端处理程序：提交给JavaScript函数：通过电子邮件形式提交表单数据：五、重置表单使用重置按钮重置表单：通过调用表单的reset()方法重置表单：六、表单域常用方法与事件1.文本框文本框对象的常用方法blur()：使文本框失去焦点并触发onblur事件。focus()：使文本框得到焦点并执行由onfocus事件指定的代码。select()：选取文本框中的所有文本。文本框的事件onblur和onfocuson

12、change：当用户更改文本框的内容并使其失去焦点时触发。如果通过在脚本中设置value属性来更改文本框的内容，那么不会触发onchange事件。onselect：中选取文本框中的一个或多个字符时触发。六、表单域常用方法与事件2.文本区域与文本框一样，文本区域具有blur()、focus()和select()方法，而且支持onchange和onselect事件。六、表单域常用方法与事件3.单项选择按钮单项选择按钮的常用方法blur()：使单项选择按钮失去焦点并触发onblur事件。click()：模拟鼠标单击操作并触发onclick事件。focus()：使单项选择按钮获得焦点并执行由onfoc

13、us事件指定的代码。单项选择按钮的常用事件onblur：当单项选择按钮失去输入焦点时触发。onclick：当用户用鼠标左键单击单项选择按钮时触发。onfocus：当单项选择按钮获得焦点时触发。六、表单域常用方法与事件4.复选框复选框对象的常用方法blur()：使复选框失去焦点并触发onblur事件。click()：模拟鼠标单击操作并触发onclick事件。focus()：使复选框获得焦点并执行由onfocus事件指定的代码。复选框对象的常用事件onblur：当复选框失去输入焦点时触发。onclick：当用户用鼠标左键单击复选框时触发。onfocus：当复选框获得焦点时触发。六、表单域常用方法与

14、事件5.列表框select对象的常用方法add：向select对象的options集合中添加一个option元素。remove：从select对象的options集合中移除一个option元素。select对象的常用事件是onchange，该事件在用户从列表框中选择不同选项时发生。访问列表项select对象有一个options集合，该集合由列表框中的所有option对象组成。通过options集合可以对列表框中的选项进行访问。如果某个选项在options集合中的索引为i，那么可以通过optionsi形式来获取该选项，并对其以下属性进行访问。六、表单域常用方法与事件5.列表框续optionsi.defaultSelected：返回一个Boolean值，说明该选项初始化时是否被选中。optionsi.length：返回一个整数，表示options集合包含的选项个数。该属性值等于select对象的length属性值。optionsi.selected：返回一个Boolean值，说明该选项是否被选中。optionsi.text：该选项显示在列表框中的文本。optionsi.value：该选项的值。当用户提交表单时，select对象的name属性值和选中项的value属性值将一起被发送到效劳器端。六、