Form表单对象详解.ppt

《Form表单对象详解.ppt》由会员分享，可在线阅读，更多相关《Form表单对象详解.ppt（82页珍藏版）》请在三一办公上搜索。

1、Form表单对象详解,作者：裘森伟,前言,Form对象是Document对象的子对象，这在第十四章已经提到过。Form对象是用户和程序之间进行交互的重要工具，同时通过From对象为用户提供大量的信息。在本节中就来对From对象及其元素对象进行详解。,第一章 表单对象,在javascript程序中，使用Form标记来创建表单对象。通常在Form标记对中定义了表单控件标记，这些表单控件标记就创建了form元素对象。创建表单对象非常容易，这里就不再多讲解了。在本节中主要来学习如如何访问表单对象和如何对表单对象进行操作。,1.1 访问表单对象及元素对象,已经知道表单对象是document对象的子对象，

2、所以可是使用document对象的forms属性来对表单对象进行访问。一个复杂的HTML文档可以具有多个form标记对，也就是具有多个表单对象。当通过document对象的forms属性来对多个表单对像进行访问时，既可以使用数组下标来指定表单对象，也可以使用表单名称作索引来指定表单对像。,1.1 访问表单对象及元素对象,代码：访问表单及元素对象访问表单及元素对象,1.1 访问表单对象及元素对象,通过表单名称来访问表单不但可以通过document对象的forms属性作数组索引的方式，还可以直接使用。在实际开发中，通过直接使用表单名称来访问表单，因为这样是最简单的方法。,1.1 访问表单对象及元素

3、对象,代码：访问表单及元素对象访问表单及元素对象,1.1 访问表单对象及元素对象,除了这种方法外，还可以使用表单对象的elements属性来访问表单元素。Elements属性的使用和document对象的forms属性的使用相同。通过表单对象的elements属性得到的是该表单中的元素的数组。同样既可以使用数组下表来访问表单元素，也可是使用元素名称作索引来访问表单元素。,1.1 访问表单对象及元素对象,代码：访问表单及元素对象访问表单及元素对象);document.write(document.myform2.elements0.value+);document.write(document.

4、myform2.elements1.value+);document.write(document.myform2.elements2.value+);/-,1.2 设置表单对象,在javascript中，定义了一系列的属性和方法来设置表单对象。其中name属性和elements属性已经讲解过，name属性表示表单的名称，使用它可以对相应的表单进行访问。Elements属性表示表单中的元素，使用elements属性可以得到表单元素数组。表单对象还有一个和elements属性有关的属性，那就是length属性。通过使用length属性可以得到表单中表单元素的数量。,1.2 设置表单对象,代码：设

5、置表单对象设置表单对象表单中的表单元素数量为：+nnumber1);document.write(表单中的表单元素数量为:+nnumber2);/-,1.2 设置表单对象,表单对象还有一个action属性。Action属性表示当表单提交时做执行的内容。在通常情况下，action属性值为表单数据要发送到的服务器的URL地址。在实际应用中几乎都是这样的，但是在测试或者写单机程序时，action属性的值还可以为其他的内容。,1.2 设置表单对象,代码：设置表单对象设置表单对象在本程序中，使用action属性将表单中的数据提交给一个javascript程序，弹出一个javascript信息对话框，显示

6、一条“提交的表单数据为”的信息。这种形式的action属性在实际开发和测试中经常被使用到，这种使用消耗的资源很少，单机就可以完成。,1.2 设置表单对象,表单对象还有一些属性，他们都和网络操作有关，这里已经操作了本ppt的范围i，就不再讲解了。需要提一下的是method属性，method属性有两个值分别为get和post。他们表示传输信息的格式，默认情况下为get。当发现程序正确时，但是传输不正常时，就可以通过method属性的值对程序进行改动。表单对象还有两个方法，分别是reset方法和submit方法。还有两个事件，分别是onreset事件和onsubmit事件。这些内容会在讲解重置按钮和

7、提交按钮时进行讲解。,第二章 按钮对象,从本节开始就来学习表单中的表单元素对象。在本节中就来讲解表单元素中最简单的按钮对象。按钮对象具有许多表单元素对象共用的内容，同时按钮对行啊还分为普通按钮、提交按钮和重置按钮。按钮存在很多特效效果，这里也将对图片按钮进行简单介绍。,2.1 公用内容,表单元素对象具有很多公用的内容，包括表单元素对象的属性、方法和事件。首先每个表单元素对象具有name属性，也就是每个表单元素都应该具有名称。当然在定义表单元素时可以不给出name属性，但这是一种不好的习惯。每个由input标记定义的表单元素对象还都具有form属性。使用form属性可以得到该表单元素对象所在表单

8、的引用。配合使用form属性和this语句能够很好的对表单和表单中的其他表单元素对象进行访问。,2.1 公用内容,代码：表单对象共用内容表单对象共用内容在本程序中，使用this语句来指代所在的表单表单元素对象，也就是程序中的按钮对象。然后使用该按钮对象调用form属性得到该按钮对象所在的表单对象。最后将该表单对象传给函数，就可以得到该表单中具体的信息，在本程序中得到的是表单的名称。,2.1 公用内容,每个由input标记定义的表单元素对象都有type属性。使用type属性来设置该表单元素对象是那一种元素。每个表单元素对象还都具有获得焦点方法和失去焦点方法，同时也具有获得焦点事件和失去焦点事件。

9、,2.2 普通按钮,按钮的value属性值为按钮上的内容，在使用input标记定义按钮时，直接通过value属性来设置按钮上的内容。而在使用button标记定义的按钮时，直接将要在按钮上显示的内容放在button标记对间。,2.2 普通按钮,代码：普通按钮普通按钮b按钮,2.2 普通按钮,按钮对象具有click方法，也就是单机方法。但是click方法并不可靠，所以尽量不要使用它。和click方法相似的是onclick事件。Onclick事件是日常开发和实际应用中最常见的事件之一。,2.2 普通按钮,代码：普通按钮onclick事件普通按钮onclick事件,2.3 提交按钮,提交按钮时一种特殊

10、的按钮，他具有按钮对象的所有属性、方法和事件。提交按钮是表单的重要组成部分，在实际应用中，如果表单不进行提交，就没有意义。提交表单也是通过input标记定义的，虽然提交按钮是一种特殊的按钮，但他的type属性值并不是button，而是提交按钮特有的submit。提交按钮不需要设置value属性值，他具有默认的value属性，当然为了更明确的表达自己的意思，也可以设置自己想要的value值。,2.3 提交按钮,代码：提交按钮value属性提交按钮value属性在本程序中，第一个提交按钮采用的是默认的value值，提交按钮的默认value属性值为“提交查询内容”；第二个是自定义的”提交”。,2.3

11、 提交按钮,在默认情况下，单击提交按钮就会触发onsubmit提交事件，将表单中的数据提交到表单对象action属性指定的位置。当然也可以通过onsubmit事件来设置，只要将onsubmit事件的返回值设置为false就可以改变默认值。,2.3 提交按钮,代码：提交按钮onsubmit事件提交按钮onsubmit事件 单击“自定义提交”按钮则不会发生任何事件，这是因为将onsubmit事件的结果设置为false。,2.3 提交按钮,在实际开发中，既不采用默认的提交事件，也不采用自定义提交按钮的禁止onsubmit事件。而是采用在开打时自定义onsubmit事件，不真正的进行提交；当应用部署时

12、，将自定义的onsubmit事件去掉，让其真正的进行提交。,2.3 提交按钮,代码：提交按钮onsubmit事件提交按钮onsubmit事件 这是一个在开发阶段中的程序。如果程序一切正常，单击提交按钮就会发生自定义的onsubmit事件，弹出一个信息对话框，然后就返回false，而不是真正的提交。在进行程序部署时，由于程序一切正常，将自定义的onsubmit事件去掉，就可以向action属性指定的位置进行提交。,2.4 重置按钮,重置按钮和提交按钮一样，也是一种特殊的按钮。使用重置按钮能使表单中的内容恢复到默认的状态。像文本框等表单元素对象一样都有默认值，如果发生改变后，可以使用重置按钮将其恢

13、复到默认值。重置按钮也是通过input标记来定义，设置type属性值为reset。同样重置按钮也具有默认的value属性，在默认的情况下，单击重置按钮会触发onreset重置事件。同样也可以自定义value属性值和自定义onreset事件，这些都和提交按钮相同。,2.4 重置按钮,代码：重置按钮重置按钮,2.5 图片按钮,在平常的上网中，很少看到像例子这样的按钮，网页中都是一些非常漂亮的按钮，甚至还有一些感觉不是按钮的按钮。这些都是通过程序的编写，制作出按钮的特效。在本节中就来制作图片按钮。图片按钮时最常见的一种特效按钮，可以先制作漂亮的图片，在使用该图片来制作按钮。,2.5 图片按钮,代码：

14、图片按钮图片按钮,第三章 文本框对象,文本框对象是一种基本的表单元素对象。使用文本框可以让用户通过键盘来输入信息。文本框对象分为很多种，最基本的文本框对象就是单行文本框对象，对文本框对象进行改进又有密码文本框、隐藏输入对象和多行文本框对象。,3.1 单行文本框,单行文本框对象是最简单的，也是最基础的文本框对象。单行文本框通过input标记设置type属性值为text来定义。单行文本框具有size属性，用来限制文本框显示的长度。需要注意的是，设置的size值并不是很精确。Size属性也具有默认值，在没有要求显示多少字符的情况下，就可以使用默认值。单行文本框还具有一个value属性。在定义单行文本

15、框时，就可以设置value属性，此时设置的value属性值为单行文本框的默认显示内容。,3.1 单行文本框,代码：单行文本框value属性单行文本框value属性,3.1 单行文本框,需要注意的是，单行文本框的value值是字符型数据类型，在获取和设置时，都是对字符进行操作。当想要设置或者获取数值型数据类型的值时，javascript会尽可能的进行自动转换，当然也可以通过使用前面所学的办法进行转换。这是很容易的，但当是对象数据类型时，如数组对象，就很难办了。当设置单行文本框的value值为一个数组对象，就可以使用数组中的join方法转换为字符串。当想再获取这个数组时，就可以使用数组中的spli

16、t方法将字符串在转换成数组。在对其他对象进行操作时，也是使用这种转换方法。,3.1 单行文本框,文本框具有一个其他表单元素对象所没有的select方法。使用select方法能使文本框内的内容高亮显示。这样的效果非常有用，当文本框的内容输入有误时，就会在提交时给出提示，然后让该文本框中的内容高亮显示。这样既可以起到提示用户的作用，又可以让用户使用删除键一键删除。,3.1 单行文本框,代码：单行文本框select方法单行文本框select方法床前明月光,3.1 单行文本框,在所有表单元素对象的事件中，onchange事件是只有按钮对象没有的。当对象的值发生改变时，触发onchange事件。在本文框

17、对象中，对象值的改变就是指文本框中的内容改变。,3.1 单行文本框,代码：单行文本框onchange事件单行文本框onchange事件,3.2 密码框,密码框是通过input标记设置typt属性值为password来定义的。除此之外，密码框的所有属性、方法和事件都和单行文本框相同。密码框和单行文本框的区别只是当用户输入时，内容显示的不同。密码框的这种黑点设置很好的为密码等重要内容提供了安全机制。当向密码框中输入时，在客户端是不能看到输入的内容的。而当表单提交到服务器端时，服务器将得到密码框中的实际内容。在服务器对单行文本框和密码框的操作时完全一样的。,3.2 密码框,代码：密码框密码框 用户名

18、:密码：,3.3 隐藏输入对象,隐藏输入对象也是一种文本框，通过input标记设置type属性值为hidden来定义。所谓隐藏输入是指虽然该对象存在于网页中，但对于用户而言是不可见的。隐藏输入对象虽然也具有很多属性、方法和事件，但大多是不能使用的，也没有必要使用。隐藏输入对象唯一能被使用到的两个属性为value属性和name属性。,3.3 隐藏输入对象,代码：隐藏输入对象隐藏输入对象从运行结果可以看出，在页面中是没有显示任何表单元素对象的，但当改变窗口大小时，能感觉到窗口中具有表单元素对象。隐藏输入对象不可能被显示出来，那他到底有什么用呢?当有些表单中的数据不想被用户看到，但是这些数据又需要交

19、给服务器时，这时候可以使用隐藏输入对象来放置这些数据。,3.4 多行文本框,多行文本框也叫做文本区，当需要输入大量内容时，或者需要进行多行操作时，就可以使用多行文本框。多行文本框并不是通过input标记来定义的，而是通过textarea标记来定义。多行文本框具有文本框除了type属性之外的所有属性、方法和事件，除此之外，多行文本框还具有独有的属性。在这些独有的属性中，有两个非常重要的属性，那就是cols属性和rows属性。Cols属性表示多行文本框一行能显示的多少字符数，也就是多行文本框的宽度。Rows属性表示多行文本框在不需要滚动条的情况下，能完全显示的行数，也就是多行文本框的高度。,3.4

20、 多行文本框,代码：多行文本框多行文本框静夜思-李白床前明月光，疑似地上霜。举头望明月，低头思故乡。,第四章 复选框和单选框,复选框和单选框是两个不同的表单元素对象，但是它们具有很多相同的地方。复选框和单选框都是让用户在多个选项中进行选择，所不同的是，在复选框中允许用户选择多个，但在单选框按钮中只能选择一个。,4.1 复选框,复选框是允许用户进行多项选择的表单元素对象。复选框中的选项具有两种状态，选中状态和为选中状态。复选框通过input标记设置type属性值为checkbox来定义。复选框也具有表单元素公用的内容。,4.1 复选框,代码：复选框请选择你的爱好看书上网游戏,4.1 复选框,复选

21、框具有一个非常有用的checked属性。在定义复选框时，在input标记中加入该属性，则默认该复选框选项就是选中状态。复选框请选择你的爱好看书上网游戏,4.1 复选框,其实checked属性值为布尔型，true表示选中，false表示未选中。当直接给出checked属性，就是起到设置true值的作用。复选框的checked属性不但可以用来设置，还可以用来获取。由于checked属性值为布尔型，所以也可以将其用在if条件结构语句等使用布尔值的语句中。,4.1 复选框,代码：复选框checked请选择你的爱好看书上网游戏全选,4.2 单选按钮,单选按钮和复选框很相似，它具有复选框中几乎所有的属性、

22、方法和事件。单选按钮和复选按钮的最大不同就是，单选按钮只允许用户在一组单选按钮中选择一个。单选按钮也分为选中和未选中两种状态。当选中其中一个后，其他的选项就变为未选中的状态。单选按钮通过input标记设置type属性值为radio来定义。通过将单选按钮选项的name属性定义为相同的值的方法来定义一组单选按钮，在一组单选按钮中只能选择一个选项。同样单选按钮也具有checked属性，表示默认选中的选项，但一组中只能有一项使用checked属性。,4.2 单选按钮,代码：单选按钮请选择你最喜欢的爱好看书上网游戏,4.2 单选按钮,由于单选按钮中的每一个选项都具有相同的名称，所以对单选按钮中的每个选项

23、进行访问时，只能使用数组的方法，而不能使用名称进行访问。,4.2 单选按钮,代码：单选按钮请选择你最喜欢的爱好看书上网游戏,4.2 单选按钮,由于单选按钮中的选项组成了一个名称相同的数组，从而使单选按钮具有一个复选框没有的属性，那就是length属性。使用length属性能够得到单选按钮组中所具有的单选按钮选项按钮的数量。需要注意的是，当单选按钮中只有一个单选按钮选项时，得到的length属性的值并不是1，而是一个空值。,4.2 单选按钮,代码：单选按钮length属性请选择你最喜欢的爱好看书上网游戏,4.2 单选按钮,在使用单选按钮时，并不是在所有的单选按钮只能选择一个，而是在一个单选按钮组

24、中只能选择一个。,4.2 单选按钮,代码：单选按钮注意点你选择你想去的地方北京月亮太阳银河,第五章 列表对象,列表对象分为下拉列表对象和选择列表对象。列表对象也是让用户在多个选项中选择，用户可以选择一个或者多个。在网页中使用列表对象，可以利用相对较小的空间来提供大量的信息。定义列表对象和其他表单元素有很大的区别。定义列表对象需要select标记和option标记一起使用，使用select标记来创建一个框对象，而使用option标记来创建框中的选项对象。,5.1 select框对象,定义列表对象需要select标记和option标记同时使用，这样列表对象中又分为框对象和选项对象。而对列表对象的访

25、问和操作既有对框对象的访问和操作，又有对选项对象的访问和操作。所以将本节分为两个部分来分别对框对象和选项对象进行详解。,5.1 select框对象,代码：列表对象列表对象看书 上网游戏,5.1 select框对象,前面说到的列表对象分外下拉列表对象和选择列表对象，而在该程序中只有下拉列表对象。下拉列表对象和选择列表对象在定义时，只有由于select框对象中size属性值的不同而有所不同。在默认的情况下，size属性值为1，也就是在框中只显示1个选项，所以就是下拉列表对象的样式。将size属性值改为大于1的数值，得到的就会是一个选择列表对象。,5.1 select框对象,代码：列表对象列表对象看

26、书 上网游戏看书上网游戏,5.1 select框对象,已经知道列表对象是可以进行多项选择的。在列表对象中进行多项选择和操作系统中进行多项选择一样，也是要配合键盘上的ctrl键和shift键来进行操作。但对上个程序中的列表时不能进行多选操作的，因为在默认的情况下是不能进行多项选择的。通过使用select框对象的multiple属性可以设置列表对象是否能够多选。,5.1 select框对象,代码：select框对象multiple属性select框对象multiple属性看书上网游戏 multiple属性的值为布尔型。这里也可以直接给出multiple属性，他也表示设置值为true。,5.1 se

27、lect框对象,5.1 select框对象,由于select框对象也具有多个选项，所以select框对象和单选按钮一样也具有length属性，也是得到选项的具体数量。和单选按钮的length属性不同的是，可以调整select框对象的length属性。通过调整select框对象的length属性可以减少列表对象中的选项。,5.1 select框对象,代码：select框对象length属性select框对象length属性看书上网游戏,5.1 select框对象,Select框对象还具有options属性，使用options属性可以得到列表对象中的选项数组，然后使用数组小标可以得到每个选项，这样

28、就可以对每一个选项进行操作。同时select框对象还有一个selectedIndex属性。selectedIndex属性表示列表中被选中选项所在选项数组中的下标。在使用selectedIndex属性时需要注意的是，当没有选中选项时，使用selectedIndex属性得到的结果为-1.已经知道列表对象是可以进行多项选择，当选择多项后，使用selectedIndex属性得到的结果并不是想象中的选项位置所组成的数组，而是这些选中选项中的第一个选项的数组下标。,5.1 select框对象,代码：select框对象selectedIndex属性select框对象selectIndex属性看书上网游戏,5

29、.1 select框对象,Select框对象具有一个非常重要的事件，那就是onchange事件。当用户选择一个新选项时，就会触发onchange事件。select框对象onchange事件select框对象onchange事件看书上网游戏,5.2 option选项对象,首先来看option选项对象具有的最重要的属性，那就是selected属性。Selected属性表示选项是否被选中，通过selected属性可以设置和获取选项选中的情况。Selected属性值为布尔型，true表示选中，false表示未选中。,5.2 option选项对象,代码：option选项对象selected属性optio

30、n选项对象selected属性看书上网游戏,5.2 option选项对象,Option选项对象还有value属性。Option选项对象的value属性值并不是选项显示的内容，它是一种用户看不到的，有程序获取的信息。只有在特定的情况下，value属性值才和option选项对象的选项内容一样。,5.2 option选项对象,代码：select框对象onchange事件select框对象onchange事件看书上网游戏,5.2 option选项对象,前面学的这些option选项对象是在初始化的时候定义的，也可以通过在程序中自定义新选项。基本形式为：Var newoption=new Option(“

31、text”,”value”);其中text表示选项在网页中显示的内容，value表示option选项对象的value属性值。定义新选项后就可以使用select框对象的add方法将新选项添加到列表对象中。Add方法虽然是select框对象的方法，但它是对选项进行操作的，所以将它放在这里讲解。Select框对象的add方法通常具有两个参数，第一个参数是代表新建的option选项对象，第二个参数是可选的，它表示将该选项放在的位置。如果没有第二个参数，则表示将该选项放在列表对象的最后。,5.2 option选项对象,代码：创建新选项和add方法创建新选项和add方法看书上网游戏,5.2 option选

32、项对象,和add方法相对的是remove删除方法。Remove方法只有一个参数，该参数表示要删除的选项对象所在的数组下标。该删除方法是彻底删除，连该选项所在的位置也一起删除。使用remove方法删除一个选项对象后，后面的选项将向前移动一个位置。,5.2 option选项对象,代码：remove删除方法remove删除方法看书上网游戏,第六章 文件上传对象,文件上传对象是表单对象中最特殊的一个表单对象。该对象通过input标记设置type属性值为file来定义的。文件上传对象由两部分组成，一个文本框和一个按钮。文件上传对象虽然特殊，但是仍然具有最基本的一些属性、方法和事件。在使用文件上传对象时，需要注意的是必须设置表单对象的enctype属性和method属性，将enctype属性值设置为multipart/form-data，method属性设置为post。,第六章 文件上传对象,代码：文件上传对象文件上传对象,