快速掌握css9.ppt

第九章 处理表单和表单元素事件 内容回顾 · 事件是网页上发生的操作 · 每个事件都有与之相关的Event对象 · 事件有一个生命周期，始于触发事件的操作或条件，终于事件处理程序的最终响应 · 用户可以指定在生成事件时要执行的，响应该事件的JavaScript代码。这段代码称为事件处理程序 · 浏览器是用于显示HTML文档内容的应用程序 · 浏览器还公开了一些可在脚本中访问和使用的对象 · Window对象表示浏览器的窗口 · 模型中的所有其他对象都继承自Window对象，而且是通过Window对象访问的 本章目标 · 处理表单对象及表单元素事件 · 使用表单对象及表单元素校验用户输入 表单对象 · 表单对象的作用 与用户进行交互 接收并处理用户的输入 · 表单对象的属性 accept action method elements · 表单对象的方法 submit 表单对象示例 表单元素事件 · 文本域事件 · 命令按钮事件 · 复选框事件 · 单选按钮事件 · 组合框和列表框事件 文本域事件 · 事件 onFocus onBlur onChange · 用法 文本域事件示例 命令按钮事件 · 事件 onClick · 用法 命令按钮事件示例 复选框事件 · 事件 onClick · 用法 复选框事件示例 单选按钮事件 · 事件 onClick · 用法 单选按钮事件示例 组合框与列表框事件 · 事件 onFocus onBlur onChange · 用法 组合框与列表框事件示例 表单有效性验证 · 什么是表单有效性验证 在用户在表单中输入的内容提交到服务器之前，在客户端利用表单元素产生的事件，运用脚本(JavaScript)，校验用户输入的数据的有效性 · 表单有效性验证的优点 在客户端验证，速度快 减轻服务器端压力 · 应用举例 表单验证应用实例 总结 · 表单用于与用户进行交互 · 在表单中可以捕获表单元素事件 文本域事件 命令按钮事件 复选框事件 单选框事件 组合/列表框事件 · 利用表单元素事件进行用户输入有效性校验 练习 个人信息页面，包括姓名，年龄，身高，体重，性别，兴趣爱好，自己设定某些是必添项，哪些是选添项，两个按钮分别为提交，重置。提交时进行相应的验证即可。 * Hands-On实训教程系列 Hands-On实训教程系列 HTML HEAD TITLE使用表单对象标记/TITLE /HEAD BODY BGCOLOR=#FFFFFF Form ACTION=Simple.html method=post name=form1 pinput type=text size=20 name=name pinput type=button value=提交查询 onClick=form1.submit(); input type=reset value=重置 /FORM /BODY /HTML 表单对象示例 input type=text name=名称 size=宽度 onFocus=接受焦点处理例程; onBlur=失去焦点处理例程; onChange=改变内容处理例程; HTML HEAD TITLE文本域对象的事件/TITLE SCRIPT LANGUAGE=JavaScript function writeIt(value) { alert(value); } /SCRIPT /HEAD BODY BGCOLOR=#FFFFFF Form name=myfm input type=text name=first_text onFocus=writeIt(焦点);  onBlur=writeIt(模糊); onChange=writeIt(修改); TEXTAREA NAME=txt_area