JS第13章-表单对象和表单元素.ppt

第十三讲：表单对象和表单元素,讲师：杨兴 e-mail:,课程内容安排,表单对象概述 表单对象的应用 表单元素 文本框 按钮,表单对象概述,表单对象介绍 表单就是之间部分。一个表单一般由三个基本组成部分组成：表单标签、表单域和表单按钮。它是域、按钮、文本、图像和其他元素的容器。 一个表单对象代表了HTML文档中的表单，由于HTML中的表单会由很多表单元素组成，因此form对象也会包含很多子对象。JavaScript会为每个标签创建一个form对象，并将这些form对象存放在forms数组中。因此，可以使用以下代码来获得文档中的form对象。,document.formsi,表单对象概述,大小写的转换 大小写转换也是一个比较常见的技术，通常在网页中需要处理大小写的问题，比如在输入验证码的时候，假若不要求大小写，就可以统一转化成大写或小写。 将小写转换成大写的方法是toUpperCase，将大写转换成小写，则用toLowerCase方法。,01 function setCase (caseSpec) /自定义处理大小写转换的函数 02 03 if (caseSpec = “upper“) /判断是否是转换成大写 04 05 document.myForm.firstName.value=document.myForm.firstName.value.toUpperCase(); 06 document.myForm.lastName.value=document.myForm.lastName.value.toUpperCase(); 07 08 else /转换成小写 09 document.myForm.firstName.value=document.myForm.firstName.value.toLowerCase(); 10 document.myForm.lastName.value=document.myForm.lastName.value.toLowerCase() 11 12 ,表单对象概述,提交表单和重置表单 reset和submit。这两个方法类似于单击了“重置”和“提交”按钮。其中reset相当于重置按钮，sumit相当于提交按钮 。,04 05 function Submit() /自定义函数 06 07 form1.submit(); /提交表单的方法 08 alert(“提交成功“); /提示用户信息 09 10 function Reset() /自定义函数实现重置 11 12 form1.reset(); /重置表单的方法 13 14 ,表单对象概述,响应表单的提交和重置 前面讲了表单的提交和重置。现在来考虑，当一个表单按下提交或重置后，它是怎样来响应提交和重置的。其实也是很简单，只要运用form对象的两个事件onreset（重置时触发事件）和onsubmit（提交时触发事件）就可以了 。 示例如下:,01 02 function allowReset() /自定义函数用于设置数据 03 04 return window.confirm(“确定重置吗？“); /响应 onReset事件 05 06 function allowSend() /自定义函数用于发送数据 07 08 return window.confirm(“确认发送吗？“); /响应 onSubmit事件 09 10 ,表单对象概述,11 12 name: 13 address: 14 city: 15 男 16 女 17 同意 18 19 20 ,表单对象的应用,表单验证 JavaScript常用的功能之一就是表单验证，表单验证是指验证表单中输入的内容是否合法。它一般用在提交表单前进行表单验证，这样可以节约服务器处理的时间，同时也为用户节省了等待时间。所做的工作很比较简单，而执行的效率又最高，这是JavaScript最优越的性能之一 。 下面来看一个例子。,表单对象的应用,循环验证表单 通过元素名称判断每一个文本框是否输入了文字，这种方法使用起来比较方便，源代码看上去也比较直观。然而，Form对象的elements属性可以返回所有表单中的元素，因此可以使用一个循环来判断elements数组中对象的value属性值的长度是否为0来验证表单。 设置表单的提交方式 一般来说当用户填写完表单之后，就可以将表单提交到一个指定的地方然后进行处理。这个指定的地方通常有两处，一处就是直接提交到动态网页，另一种是提交给邮件。这两种方式的目的都是一样的，就是要将当前提交的信息存储起来，以供日后使用。而前者可能是保存在数据库中，后者则保存在邮箱中，但都能达到目的。,表单对象的应用,重置表单的提示 在默认情况下，如果用户单击了重置表单按钮，浏览器窗口就会马上将表单中的所有元素的值设置为初始状态。如果用户一不小心单击了该按钮，则会清除所有已经填写完毕的数据。为了防止这种意外情况的出现，在单击重置按钮时，弹出一个确认框，让用户确认是否重置表单 。,03 04 function Reset() /自定义函数 05 06 var result=confirm(“你确定重置吗？“); /询问用户是否确定重置表单 07 return result; /返回结果 08 09 ,表单对象的应用,不使用提交按钮提交表单 通常在表单中，都是使用单击提交按钮的方法来提交表单。然而，在form对象中有一个submit()方法，使用该方法可以在不使用提交按钮的情况下提交表单 。,03 04 function send() 05 06 var result=confirm(“你确定提交吗？“); 07 if(result) 08 09 form1.submit(); 10 11 else 12 13 return false; 14 15 16 ,表单元素,表单元素概述 在HTML中定义的表单元素有很多，这些表单元素可以让用户输入文字，如文本框、密码框等；或者让用户选择可选项，如下拉列表框、复选框等；也可以让用户提交信息或重置表单，如提交按钮、重置按钮等；甚至还可以为程序员提供开发上的便利，如隐藏框等。所以一个表单元素看起来下面代码所示这样子的：,01 02 03 04 05 06 ,表单元素,表单元素的命名 标签与标签之间可以存在很多表单元素。form对象中可以使用elements数组来获得代表这些表单元素的子对象。elements数组中存放的是各种类型的form对象的子对象，elements数组中的元素是由标签与标签之间表单元素所组成的，因此可以使用以下代码来获得代表HTML文档中的第1个Form对象中的第2个元素的对象。 在下一页有一个相关的实例。,form1.elements1,表单元素, function show() var str1=form1.elements0.value; /元素命名访问方法一 var str2=form1.text3.value; /元素命名访问方法二 var str3=document.forms1.elements0.value; /元素命名访问方法三 alert(“name=“+str1+“nr“+“age=“+str2+“nr“+“PassWord=“+str3); /显示信息 姓名： 年龄： 密码： 查看信息 /,文本框,文本框的创建方式 要使用文本框，首先得学会如何创建一个文本框。创建一个文本框的方式有多种，在HTML代码中，创建单行文本框与创建密码框所使用的元素都是input元素，虽然是同一元素，但根据不同的文本框种类其创建的方式也不同。文本框的创建语法格式如下： 要创建一个单行文本其格式如下所示。 创建一个密码框类型的文本，则用如下所示的语句。 综上可以看出，创建一个文本框都主要是用input元素。,文本框,查看一个文本框的属性值 代表文本框的对象称为text对象、代表多行文本框的对象称为textarea对象、代表密码框的对象称为password对象。无论是text对象、textarea对象，还是Password对象，所拥有的属性大多都是相同的。因此可以用统一的方法来访问它们的属性。 在下一页有一个相关的实例。,01 02 03 范例13-10 04 /自定义函数 06 07 var str1=form1.elements0.value; /文本的值 08 var str2=; /文本的名称 09 var str3=form1.elements0.type; /文本类型 10 var str4=form1.elements0.size; /字符的宽度 11 var str5=form1.elements0.maxlength; /最多字符数,文本框,自动选择文本框中的文字 自动选择文本框中的文字是指，在浏览某些网页时， 一打开网页，文本就被选中，鼠标经过文本框时选择文本。 在下一页有一个相关的实例。,文本框,01 02 自动选择文本框中的文字 03 /javascrpt代码开始 04 function Select() /自定义一个函数 05 06 form1.text.focus(); /文本框获得焦点 07 form1.text.select(); /文本框的文字被选中 08 09 10 11 12 13 14 15 16 17 ,按钮,按钮的介绍 按钮常用的属性主要有form、name、type、value等。name是指定了按钮名称的字符串。type是对于所有的Button对象，type属性都是“button”。该属性指定了表单元素的类型。value是指对应于按钮的value属性的字符串。同时还支持很多方法和事件。 按钮的创建方式 在HTML中有两种元素都可以创建按钮，这两种元素分别为input元素和button元素。创建方式有两种，分别是使用button元素创建按钮和使用input元素创建按钮。使用input元素创建如下所示：,按钮,网页调色板 在设计网页时，常常需要设计网页的前景色和背景色。只有前景色与背景色搭配协调，网页才会好看。然而在网页上调试前景色和背景色并不是很方便，因此可以制作一个简单的网页调色板程序，用来测试前景色与背景色的搭配是否协调。 在下一页有一个相关的实例。,按钮,01 02 范例13-14 03 /javas