表单对象JavaScript基础初学者用

1、13. 1. 1表单对象介绍在HTML文档中有可能会出现多个表单,也就是说, 一个HTMI.文档中有可能出现多个for 标签。 JavaScript为每个form标签创建一个Fot对 象.并将这些For对象存放在fonsQ数组中。因 此，可以使用以下代码來获得文档屮的FomX.jo docuiient forms f iJavaScript13. 1.2表单对象的属性 FomXj象的屈性人形与for尤索的属件相关。 （具体内容请参ratio ）13.2表单对線的应用 Fot对象的方法并不多.只有reset ()和siib.it () 两个方法,这两个方法类似丁单击了重置按钮和 提交按钮。(人体

2、内容请参照|5o )JavaScript13. 1.4表单对象的事件 For对象的下件与Fot対象的方法相似,也是和 表单的提交与亚置相关的。(其体内容请参照 书。)利用Fot对象的属性、方法和事件可以现实很多 动态效果。本节里介绍儿个F"!対象的应用方法, 希望可以起到抛砖引E的作用。JavaScript13. 2. 1表单验证在Forn対象屮使用得比较多的就足衣单验证。在 填写表单时,常常有些必选项是需耍填写的，I大I 此.任提交表单时，町以先验证足不是所仃的必 选项都已经填写完毕，如果是的话则提交表单, 否则取消提交农单"让用八继续填写。（具体内 容请参照悅）Java

3、Script13.2.2循环验ilE表单在匕面的例子中,通过元素名称判断每一个文本 框是否输入了文乙 这种方法使用起來比较方便, 源代码看卜去也比较K观。然而 For-对象的 eluents属性可以返回所有农单中的元素,因此 可以使用个循环來判断elen?nts数组屮対象 的vnhe属件值的长度是否为0來验证农单。（具 体内容请参照巧。）JavaScript13.2.3设置表单的提交方式在表单填写完毕Z/Ti,可以将衣单捉交到一个接 收表单内容的地方。通常的做法是.将表单提交 到一个动态网页.动态网页接收到表单的内容Z 后 将斤写入数据库或以文木形式记录在服务器 以便日后使用。而另种做法是,将

4、表单内容作 为E.a订的内容发送到一个指定的邮箱中。F面的 例沪可以让用户自己选择将表单以哪种方法提血 （具体内容请参照书。）,JavaScript13.2.4重置表单的提示在默认情况下,如果用户单击了重置表单按钮, 浏览器窗口就会马卜将表单中的所有元素的值设 胃为初始状态。如果用八一不小心单击了该按钮 则会清除所何已经填耳完毕的数据。为了防止这 种总外请况的出现，可以J Ci HIM.弹 出一个确认框，让用户确认是否匝置表单。（具 体内容请参照巧。13.2.5不使用提交按钮提交表单通衣在表单中,都是使用单击提交按钮的方法来 提交表单。然而在For对彖中有一个sub.it （） 方法，使用该方

5、法可以在不使用提交按钮的情况 卜提交衣氓。（具体内容请参照I几）13.3表单元素 For表单中可以存在很多表单元素,通常在浏览 器窗口中,看不到Foni元素,但是可以看到这些 表单元索。JavaScript13. 3. 1表单元素 ffiHTMlJp定义的表单元索有很多,这些表单元索 可以让用户输入文字.如文本框密码框等：或 肴让用户选择可选项,如下拉列表禺复选框等; 也可以让用户提交信息或更置农单,如提交按钮 慮置按钮等：还可以为程序员提供开发上的便利，如隐藏框等。在HTML 4.01中所规定的农单 元素如表134所示。（具体内容请参照书。）13. 3.2表单元素的命名JavaScript在

6、上一节中可以看出,for»标签与/fom标签 Z间可以在很多我单元素。F”对象屮可以使 用ele«ents数组來获得代表这些表单元素的子 対彖。elenentsf数组中存放的是各种类型的 Fotii对象的子对象,eleaents数组中的元素足 lhform标签与/forn标签Z间我单元素所组成, 因此可以使用以下代码来获得代表HTMI.文档中的 第1个Fom对彖中的第2个元素的对象。 容请参照尬13.4文本框任HTMI屮，文本框包括单行文本框和多行文本框 两种。密码框可以看成是一种特殊的单行文本框 在密码框中输入的文字将会以掩码形式出现。13.4. 1文本框的创建方式在HT

7、ML代码中,创建单行文本框与创建密码框所 使用的元索祁是i nput元素.其讥法代码如下所示: <input type=l）oxType nanie-boxNaiie value-boxVaiue size二boxSizeaxlengthlengths> （具体内容请参照甘。）13.4.2文本框属性代衣文本框的对彖称为Text对象、代衣多行文本 框的对象称为Text area对象、代表密码框的对象 称为Password对象。无论定Text对像、Text area 对叙 还是Password对彖,所拥有的属性人多都 是相同的。（具体内容请参照I人）13.4.3 文本框方法无论是 Te

8、xt 对象、Text area 对象,还 /Password 对象，所拥有的方法都是相同的。这些方法大多 都与文本框中的文本相关,（具体内容请参照 书。）JavaScript13.4.4文本框的事件无论足Text 刈彖、TextareaXj 象，还足Password 对彖,可以响应的事件都是相同的。这些苇件大 多都9文本框小的文本相关.（11体内容请参照 书。）13.4. 5限制文本框中输入的字数13.4.5.1在输入文字时判断输入字数13. 4. 5. 2在提交数据时判断输入？数13.4.5.3在失去然点时判断输入字数JavaScript13.4. 6动选择文木框中的文字13M.6. 1鼠标

9、经过文本框时选择文本13.4.6.2鼠标经过文木框时请除文本 13. 4. 6. 3进一步完善13.5按钮在HBfl.中,按钮分为三种,分别为：普通按钮 （Button对象）、提交按钮（Sublit对象和重 胃按钮（Reset对象）。从功能卜看起來泮通按 钮左要作用是用来激活函数;提交按钮的主要作 用足捉交衣单：匝置按钮的匸耍作用是匝置农单。 虽然1种按钮的功能有所不同.但是这1种按钮 的属也 方法和事件几乎都是完全相同的。JavaScript13. 5. 1按钮的创建方式在HTML屮仃两种元索郁可以创建按钮，这两种元 素分别为i nput.元素和button元素。13. 5. L 1使用bu

10、tt on/G索创建按钮 13. 5. 2. 2使用input元素创建按钮13. 5.2按钮的属性无论是Submit对彖、Reset对象还是Button对象, 所拥仃的属性都是相同的。（具体内容请参照 书。）JavaScript13. 5.3按钮的方法无论 Ji Submit 对象、Reset 对象还 Button X*J 象. 所拥有的方法都是相同的。（具体内容请参照 书。）JavaScript13. 5.6改变多彳f文木框人小13. 5.4按钮的事件无论是Submit对象、Reset对象还足Blit ton对象, 可以响应的事件都是相同的。（具体内容请参照 书。）JavaScript13.

11、 5.5网页调色板在设计网页时，常常需耍设计网页的肋景色和背 杲色。只仃询杲色与背景色搭配协调网页才会好 看。然而在网页匕调试询景色和背景色并不是很 方便,因此町以制作个简帕的网页调色板程序, 用來测试询景色与背景色的搭配是否协调。（具 体内容请参照I人）JavaScript多行文本框中通常可以输入很多文字,如果文字 内容比较多的话.篡行文本框会门动产工滚动条. 此时可以加大多行文本框的宽度或高度來浏览其 屮文字,就会更加方便些。（具体内容请参照ST JavaScript13.6单选框和复选框单选框（Radio对象）与复选（CheckboxXJ象）， 看卜去好像是两个完全不同的对彖。但书实匕

12、这两个对象除了一个能单选 一个可以篡选Z外， 其属性方法和事件儿乎足完全相同的。13. 6. 1创建单选框和复选框在HTMI冲使用input元索同样可以创建单选框与复 选框。其语法代码如下所示： < input type=Type vaue=value nane=iuuie>Text （具体内容请参书。>JavaScript13. 6.2单选框和复选框的属性无论足RadioX'J %还足（heckboxX'J象，所拥仃的属 性都是相同的常用的Radio对象和Checkbox对象 的属性（具体内容请参照书。）13. 6.5设置单选框组与复选框纽无论JiRadio

13、对彖还是Checkbox对彖，所拥仃的方 法都是相同的常用的Radio对象和Checkbox对象 的方法如表（具体内容请参照书。）JavaScript13. 6.4单选框和复选框的事件无论足RadioX'J象还足Checkbox对象,可以响应的 事件都是相同的。常用的Rad i o对彖和（:heckbox对 彖（具体内容请参照书。只有在少数情况下单选框和复选框会单独使用, 人女数单选框与复选框都会以组的方式出现。创 建单选框组9父选框组，只需要将na.eHntt设 置成为相同的即可。以下代码为个单选框组, 在该代码屮,两个单选框选项屮,只能有个选 项处丁被选中状态。 <input

14、 type=/rra(lio?/ value二"男" name二"町Sex"男 <input type=/rra(lio/z value=/4：/， nae二"ySex">女(具体内容请参照巧。13. 6.6设置单选框与复选框的默认选项在单选框与复选框为小，郴可以使用checked屈性 來设置默认的选项。chPckedHn没仃属件值。JavaScript13. 6. 7 Form对象与Rad i oM象、 Checkbox 对彖虽然单选框与复选框经常以组的形式出现，但是 在一个组中每个选项祁是一个独立的单选框与复 选框。在

15、Fot对彖中,会将每个单选框与复选椎 看成足个独立的对象,而不足将每个单选框组 与复选框组看成足-个独工的対嫁。每个单选框 与复选框都有属丁自己的屈件和方法。（具体内 容请参照书。）JavaScript13. 6.8组与选项既然单选框与父选框可以以组的形式出现，那么 就应该町以以组为单位获取单选框组与复选框组 中的选项。在JavaScript中将naae属性值相同 的单选框和复选框都放在了 个数组中,这样， 就可以针对某个单选框组或父选框组进行操作了。JavaScript13. 6.9获取单选框与复选框的值无论是单选框组还是复选框，其目的是让用户选 择,并且可以获得用户选择的选项。使用chec

16、ked 属性町以判断用八是否选择了单选框组9父选框 组中的选项。13. 6.10限制复选框的选择项数虽然住父选框组屮可以允许用户选择多个选项， 但是在某些时候可能要求用户只能选取其中的几 项。例如在学校里，学生可以自匸选课.但是有 町能在某个学期里，学生最多只能选择6门课程。 这就耍求在用八选择的复选框超过某个数砒的时 候，给出提示。（具体内容请参照）13.7下拉列表框下拉列我框（Select对彖）也可以显示单项或多 项选择。但是与单选框组和多选框组不同。单选 框组号多选框组中毎一个选项祁是Fot对象的一 个了对象.而卜拉列衣框榕体是FornX的个 子对象。下拉列农框中的选项（Option対彖

17、）只 是下拉列表框的子对象。JavaScript13. 7. 1创建下拉列表框创建F拉列衣框需耍用到两个元索，汁先要用到 的是select元素用丁标记下拉列表框开始.然 后耍用到的是option元索.用于创建下拉列表框 电的项比如果个F拉列表框里有多个可选项 则重复使用option元素。JavaScript13. 7.4卜拉列表框的事件与其他Foe对象的子对象相同,Select对象也拥 冇一些属丁自己的属性。（其体内容请参照出。）JavaScript13. 7.3卜拉列表框的方法（具体内容请参照巧。）（具体内容请参!«I5O ）13. 7.5选项对象创建下拉列表框必须要使用两个HTM

18、L元索,其中 select元素用于声明下拉列表框,option元素用 F创建F拉歹iJ表框中的选项。在JavaScript中, 将下拉列表框中的每个选项看成是 个Option 对象。13. 7.6选项对彖属性 Option对彖虽然是Select对象的f対彖，但该対 彖也拥仃属丁口己的属件。13. 7. 7同时显示多行的卜拉列表框询面例子中的下拉列衣框在网贝上祁只显示一行, 在HTML 4. 01中，可以创建同时显示多行的下拉列 表框。创建同时显示多行的下拉列表框,只需1? 设置size属性即町。（具体内容请参照|几）13. 7.8可以同时选择多个选项的下拉列 表框在默认惜况下，一个下拉列我框只

19、能冇一个选项 被选屮此时与单选框组类似©但是在为select 元素设置了miltiple属性之后,就可以同时选择 多个选项，此时与复选框类似。nultiple®性没 仃屈忤值。（具体内容请参!® I5o）13. 7.9利用下拉列表框翻页在下拉列表框小，可以将选项值设置为要跳转的 URL,通过Select对象的value属性值可以得到该 跳转的URL。再通过Location对彖的href属竹冋以 跳转页而。13.8文件上传框利用下拉列表框的多选、多行显示,以及慶意添 加.删除H中选项的特点可以制作一个简单的 选课程序。13. 7.11二级联动菜单_1级联动菜单就足为

20、第1个菜单的选项改变时，第 2个菜单中的选项会随之改变。当然,除了有二级 联动菜单Z外，还町以仃三级、四级联动菜单 创建这些联动菜氓的原理祁是相同的。（具体内 容请参照|5o ）文件上传框(FilelploadXj)从某个角度匕看 与文本框很相似，但是文件匕传框是山一个文本 框9一个按钮共同组成。单击按钮后会出现一个 町以选择文件的对话框。选择文件后,文件的路 彳仝会显示在文本框屮。Wil 学/JavaScript I =二=二匸I H 二13. 8.1创建文件上传框在HTML代码屮，可以使用inputA；來创建文本上 传框，其语法代码如下所示： <input type二"fi

21、le" iiane=nane size二size(具 体内容请参照书。)学/JavaScriptf I 二工二13. 8.2文件上传框的属性（具体内容请参Jiftlio）13. 8.3文件上传框的方法（具体内容请参煮巧。）13. 8.6图片预览（具体内容请参JKtlio）13. 8.5使用文件上传框的注总事项文件上传框比较简单,但使用该对象时有以下儿 点是需要注意的：由于文件上传框通常用于上传文件，而文件上传 所用到的表单数据编码方式和传输方式与泮通的 文本不同，I人I此必须耍在fori尤索中设置enctype 属性与method属性，其中euctype属性值必须为JavaScrip

22、tMiulitipart/fom data"* ethod属性"post% （人体内容请参照书。）在论坛中发贴的时候、在网匕卖东西的时候,常 常需耍匕传图片。通常的做法是使用文件匕传框 选择要匕传的图片.然后单击提交按钮上传图片. 常常何粗心的用户在选择文件的时候选错文件, 如果能让用户在选择完图片之后,在上传图片之 繭 可以先预览一下图片,这样将会大大减少出 错率。（具体内容请参照|几）JavaScript 13.9隐藏域隐藏域（Hidden对象）是不会在浏览器窗口中显 示的对象，因此该对象多用丁向服务器提交一些 不希望用户看到的数据。JavaScript 13. 9.3输入提示在HTMI冲可以使Hjinput元素创建隐诫域，具讥法 代码如下所示： <input type二"hidden" naiie=nane value=value>其中属性解释如下:nano：隐藏域的名称。value：隐藏域的值13. 9.2隐藏域的属性因为H idden对象在浏览器窗