第15课表单要点.ppt

spry验证控件 在制作表单时，为了保证采集信息的有效性（比如要求访问者在表单中输入一个有效的电子邮件地址），往往会在网页中实现表单数据验证的功能。 Spry框架提供了4个表单验证控件：spry验证文本、spry验证文本区域、spry验证复选框、spry验证选择。 spry验证控件 Spry验证文本域：该域用于在站点访问者输入文本时显示文本的状态（有效或者无效） spry验证控件 属性面板中的验证类型可以指定验证类型和格式。 预览状态：有效、无效和必需值 验证于：可以设置验证发生的时间。 onBlur:当用户在文本域外部单击时 onCharge：当用户更改文本域的文本验证 onSubmit:当用户尝试提交表单时的验证 spry验证控件 ”最小字符“或“最大字符数” 主要针对“无”，“整数” ，“电子邮件地址”和“URL”验证类型。 “最大值”和“最小值”主要针对“整数”，“时间”，“货币”，“实数/科学计数法”。 “强制模式” 可以禁止用户在验证文本域控件中输入无效字符。 spry验证控件 Spry验证文本区域：该区域用户输入几个文本句子时显示文本的状态（有效或者无效）。如果文本域是必填域，而用户没有输入任何文本时，则返回一条消息，声明必须输入值。 spry验证控件 spry验证控件 Spry验证复选框：该复选框在用户选择（或没有选择）复选框会显示控件的状态（有效或者无效）例如：必须选择三项，如果没有选择，则返回消息声明不符合要求。 spry验证控件 Spry验证选择：是一个下拉菜单，该菜单用户进行选择时会显示构件的状态。 插入列表/菜单 列表和菜单的设置 通过设置【类型】与【高度】控制列表的形成 select name=select option selected信息学院/option option统计学院/option option管理学院/option /select 插入按钮 表单按钮在表单中用于控制表单的操作。按钮本身没有任何功能，只是在其外观上采用与系统相同的按钮样式 插入图像域 图像域用来将图像作为按钮，弥补了按钮样式的单调性。 通过设置【标签】控制按钮的显示内容 要想对按钮实现功能必须用脚本语言来控制执行 input type=reset name=Submit value=重置 input type=reset name=Submit2 value=重置 input type=submit name=Submit3 value=确定 插入文件域 文件域与单行文本字段外型相似，只是在文本框右侧增加了一个“浏览”按钮，用于引用本地电脑上的文件作为表单内容。 input type=file name=file 添加跳转菜单 在菜单的基础上添加跳转功能就是跳转菜单 在【弹出跳转菜单】对话框中，设置需要跳转的URL 窗口在当前窗口打开 select name=menu1 onChange=MM_jumpMenu(parent,this,0) eval(targ+.location=+selObj.options[selObj.selectedIndex].value+); 如果需要在新窗口中打开，应该使用window.open()方法 javascript:window.open(this.options[this.selectedIndex].value) 美化表单 在Internet上的表单都很美观，所以在制作好表单之后，还需要对表单进行美化操作。 设置日期 在【代码】中【表单元素】选择年，月，设置其初始选定值 日期没有菜单域，可自己制作菜单 验证表单 1.对单个对象进行检查 在合适的行为下触发该事件 2.提交表单时检查特定效果 if(password1.value!=password2.value){alert(两次输入的密码不同);password1.focus();return false;} 传递值 原理：在合适的事件下给与表单赋值 课堂讲解 上机实验 第15课 表单 课堂讲解 创建表单 添加表单对象 美化表单 Spry验证表单 表单的功能 表单的主要功能：收集客户端的信息，客户端发送信息到服务器以后，服务器端的程序可以处理客户端输入的信息。 左图是网易通行证的注册网页，需要填写一些个人信息，如姓名、性别、出生日期、证件号码等。填写信息的页面上包括很多表单对象，如文本框、单选按钮、下拉列表框、按钮等。 所有这些表单对象合在一起，称