Form 表单对象详解
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
1.1 访问表单对象及元素对象
• • • • • • • • • • • • • • • • • • • • • 代码： <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>访问表单及元素对象</title> </head> <body> <h1>访问表单及元素对象</h1> <form> <input type="text" name="mytext" /> </form> <form name="myform"> <input type="text" name="mytext" /> </form> <script language="javascript" type="text/javascript"> <!-document.forms[0].mytext.value="通过数组小标访问表单对象"; document.forms["myform"].mytext.value="通过表单名称访问表单对象"; //--> </script> </body> </html>
1.2 设置表单对象
• 在javascript中，定义了一系列的属性和方法来设 置表单对象。其中name属性和elements属性已经 讲解过，name属性表示表单的名称，使用它可以 对相应的表单进行访问。Elements属性表示表单 中的元素，使用elements属性可以得到表单元素 数组。 • 表单对象还有一个和elements属性有关的属性， 那就是length属性。通过使用length属性可以得到 表单中表单元素的数量。
• • • • • • • • • • • • • 代码： <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>设置表单对象</title> </head> <body> <h1>设置表单对象</h1> <form name="myform" action="javascript:alert('提交的表单数据位')"> <input type="submit" name="mybutton" value="提交"> </form> </body> </html> 在本程序中，使用action属性将表单中的数据提交给一个javascript程序，弹 出一个javascript信息对话框，显示一条“提交的表单数据为”的信息。这种 形式的action属性在实际开发和测试中经常被使用到，这种使用消耗的资源很 少，单机就可以完成。
2.1 公用内容
• 每个由inpuБайду номын сангаас标记定义的表单元素对象都有 type属性。使用type属性来设置该表单元素 对象是那一种元素。 • 每个表单元素对象还都具有获得焦点方法 和失去焦点方法，同时也具有获得焦点事 件和失去焦点事件。
1.2 设置表单对象
• • • • • • • • • • • • • • • • • • • • • 代码： <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>设置表单对象</title> </head> <body> <h1>设置表单对象</h1> <form name="myform"> <input type="text" name="mytext" value="这是一个文本框"> <input type="button" name="button" value="a按钮"> </form> <script language="javascript" type="text/javascript"> <!-var nnumber1 = document.myform.length; var nnumber2 = document.myform.elements.length; document.write("<h3>表单中的表单元素数量为：" + nnumber1); document.write("<h3>表单中的表单元素数量为:" + nnumber2); //--> </script> </body> </html>
1.1 访问表单对象及元素对象
• 除了这种方法外，还可以使用表单对象的 elements属性来访问表单元素 。Elements 属性的使用和document对象的forms属性的 使用相同。通过表单对象的elements属性 得到的是该表单中的元素的数组。同样既 可以使用数组下表来访问表单元素，也可 是使用元素名称作索引来访问表单元素。
1.1 访问表单对象及元素对象
• • • • • • • • • • • • • • • • • • • • • • • • • • • 代码： <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>访问表单及元素对象</title> </head> <body> <h1>访问表单及元素对象</h1> <form name="myform1"> <input type="text" name="mytext1" value="这是第一个文本框"> <input type="text" name="mytext2" value="这是第二个文本框"> </form> <form name="myform2"> <input type="button" name="button1" value="a按钮"> <input type="button" name="button2" value="b按钮"> <input type="button" name="button3" value="c按钮"> </form> <script language="javascript" type="text/javascript"> <!-document.write(document.myform1.mytext1.value+ " "); document.write(document.myform1.elements["mytext2"].value+"<br>"); document.write(document.myform2.elements[0].value+" "); document.write(document.myform2.elements[1].value+" "); document.write(document.myform2.elements[2].value+" "); //--> </script> </body> </html>
Form表单对象详解
作者：裘森伟
前言
• Form对象是Document对象的子对象，这在 第十四章已经提到过。Form对象是用户和 程序之间进行交互的重要工具，同时通过 From对象为用户提供大量的信息。在本节 中就来对From对象及其元素对象进行详解。
第一章 表单对象
• 在javascript程序中，使用Form标记来创建 表单对象。通常在Form标记对中定义了表 单控件标记，这些表单控件标记就创建了 form元素对象。创建表单对象非常容易， 这里就不再多讲解了。在本节中主要来学 习如如何访问表单对象和如何对表单对象 进行操作。
1.1 访问表单对象及元素对象
• 通过表单名称来访问表单不但可以通过 document对象的forms属性作数组索引的方 式，还可以直接使用。在实际开发中，通 过直接使用表单名称来访问表单，因为这 样是最简单的方法。
1.1 访问表单对象及元素对象
• • • • • • • • • • • • • • • • • 代码： <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>访问表单及元素对象</title> </head> <body> <h1>访问表单及元素对象</h1> <form name="myform"> <input type="text" name="mytext" /> </form> <script language="javascript" type="text/javascript"> <!-document.myform.mytext.value = "直接使用表单名称访问表单对象f"; //--> </script> </body> </html>
第二章 按钮对象
• 从本节开始就来学习表单中的表单元素对 象。在本节中就来讲解表单元素中最简单 的按钮对象。按钮对象具有许多表单元素 对象共用的内容，同时按钮对行啊还分为 普通按钮、提交按钮和重置按钮。按钮存 在很多特效效果，这里也将对图片按钮进 行简单介绍。
2.1 公用内容
• 表单元素对象具有很多公用的内容，包括表单元 素对象的属性、方法和事件。 • 首先每个表单元素对象具有name属性，也就是每 个表单元素都应该具有名称。当然在定义表单元 素时可以不给出name属性，但这是一种不好的习 惯。 • 每个由input标记定义的表单元素对象还都具有 form属性。使用form属性可以得到该表单元素对 象所在表单的引用。配合使用form属性和this语句 能够很好的对表单和表单中的其他表单元素对象 进行访问。
1.2 设置表单对象
• 表单对象还有一个action属性。Action属性 表示当表单提交时做执行的内容。在通常 情况下，action属性值为表单数据要发送到 的服务器的URL地址。在实际应用中几乎 都是这样的，但是在测试或者写单机程序 时，action属性的值还可以为其他的内容。
1.2 设置表单对象
1.1 访问表单对象及元素对象
• 已经知道表单对象是document对象的子对 象，所以可是使用document对象的forms属 性来对表单对象进行访问。一个复杂的 HTML文档可以具有多个form标记对，也就 是具有多个表单对象。当通过document对 象的forms属性来对多个表单对像进行访问 时，既可以使用数组下标来指定表单对象， 也可以使用表单名称作索引来指定表单对 像。
2.1 公用内容
• • • • • • • • • • • • • • • • • • • • • 代码： <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>表单对象共用内容</title> <script language="javascript" type="text/javascript"> <!-function myfunction(bt) { alert("表单名称为："+bt.name); } //--> </script> </head> <body> <h1>表单对象共用内容</h1> <form name = "myform"> <input type="button" name="mybutton" value="按钮" onClick="myfunction(this.form)"> </form> </body> </html> 在本程序中，使用this语句来指代所在的表单表单元素对象，也就是程序中的按钮对象。然后使用该按钮对象调用 form属性得到该按钮对象所在的表单对象。最后将该表单对象传给函数，就可以得到该表单中具体的信息，在本程 序中得到的是表单的名称。
1.2 设置表单对象
• 表单对象还有一些属性，他们都和网络操作有关， 这里已经操作了本ppt的范围i，就不再讲解了。需 要提一下的是method属性，method属性有两个 值分别为get和post。他们表示传输信息的格式， 默认情况下为get。当发现程序正确时，但是传输 不正常时，就可以通过method属性的值对程序进 行改动。 • 表单对象还有两个方法，分别是reset方法和 submit方法。还有两个事件，分别是onreset事件 和onsubmit事件。这些内容会在讲解重置按钮和 提交按钮时进行讲解。