JavaScript表单对象Form

要实现动态交互，必须掌握有关表单对象(Form)和框架对象(Frames)更为复杂的知识。
1、 表单基础知识
表单是最常见的与JavaScript一起使用的HTML元素之一。在网页中用表单来收集从用户那里得到的信息，并且

将这些信息传输给服务器来处理。表单主要有两类应用：一是如订单、个人资料、调查信息等；二是搜索引擎

功能，即从用户那里得到查询标准，由Web浏览器送给服务器的数据库，在数据库中生成查询，再将查询结果返

回Web浏览器。通常可以使用JavaScript代码来保证表单中输入的数据是符合标准的，也可以再数据被提交给服

务器前，使用JavaScript代码来执行其他一些预处理。如果不使用JavaScript，HTML只能将表单中的数据传送

给服务器。
  
CGI:通用网关接口,一种简单的协议，允许网页与基于Web服务器的程序交互，处理从Web浏览器提交给服务器的

数据。
１、什么是表单对象
表单（Form）:它构成了Web页面的基本元素。通常一个Web页面有一个表单或几个表单，使用Forms[]数组来实

现不同表单的访问。
<form Name=Form1>
<INPUT type=text...>
<Input type=text...>
<Inpup byne=text...>
</form>
<form Name=Form2>
<INPUT type=text...>
<Input type=text...>
</form>
在Forms[0]中共有三个基本元素，而Forms[1]中只有两个元素。
　　表单对象可以使设计人员能用表单中不同的元素与客户机用户相交互，而用不着在之前首先进行数据输入

，就可以实现动态改变Web文档的行为。表单对象最主要的功能就是能够直接访问HTML文档中的表单，它封装

了相关的HTML代码：
<Form
Name ="表单的名称"
Target ="指定从服务器返回的数据在那里显示"
action ="指定一个URL，表单数据将被提交给该URL"
Method =“信息数据传送方式(get/post)”
enctype ="被提交数据的格式"
[onsubmit ="JavaScript代码"]>
</Form>
　 书179图6－7。
例：”form1.html”
２、表单对象的方法
　　表单对象的方法只有一个--submit()方法，该方法主要功用就是实现表单信息的提交。如提交Mytest表单,

则使用下列格式：
document.mytest.submit()
　
３、表单对象的属性
　　表单对象中的属性主要包括以下：elements name action target encoding method.
　　除Elements外，其它几个均反映了表单中标识中相应属性的状态，这通常是单个表单标识；而elements常

常是多个表单元素值的数组，例：
document.forms[0].elements[1]
document.myform.textField
　
４、访问表单对象
在JavaScript中访问表单对象可由两种方法实现：
（１）通过访问表单
　　在表单对象的属性中首先必须指定其表单名，而后就可以通过下列标识访问表单如：document.myform。
（２）通过数组来访问表单
　　除了使用表单名来访问表单外，还可以使用表单对象数组来访问表单对象。但需要注意一点，因表单对象

是由浏览器环境的提供的，而浏览器环境所提供的数组下标是由0到n。所以可通过下列格式实现表单对象的访

问：
document.forms[0]
document.forms[1]
document.forms[2]...
　
５、引用表单的先决条件
　　在JavaScript中要对表单引用的条件是：必须先在页面中用标识创建表单，并将定义表单部分放在引用之

前。
　
二、表单中的基本元素
    表单中有三类基本元素：输入域,选择列表，多行文本域。分别用<input>/<select> /<textarea>标记来创

建。
    <input>/<select>/<textarea>标记都可以包括name和value属性。Name属性为一个表单定义名称，value属

性给表单定义一个默认值。当表单被提交给CGI脚本时，表单数据被提交的格式就是name=value标记对。如：

<input type=”text” name=”地址” value=”铜陵市长江西路274号”>,则name=value标记对“地址=铜陵市

长江西路274号”将传送给CGI脚本。要想将表单数据提交给CGI脚本，在标记中必须包含name属性，但并不要求

必须包含value属性，也不要求在表单数据被提交前域中必须输入数据，因为空值市合法的。但是，在数据被提

交前，最好能使用JavaScript代码验证数据的合法性。
在JavaScript中要访问这些基本元素，必须通过对应特定的表单元素的数组下标或表单元素名来实现。每一个

元素主要是通过该元素的属性或方法来引用。其引用的基本格式见下:
formName.elements[].methadName (表单名.元素名或数组.方法)
formName.elements[].propertyName(表单名.元素名或数组.属性)
　
（一）输入域<input>
<input>标记用来创建各种不同类型的界面元素来收集信息的输入域。包括以下属性：
type:指定创建何种类型的元素。其有效值包括text/password/radio/checkbox/
reset/button/submit/image/hidden。
Name:表单元素名称。
Value:设置初始值。
Src:指定一个图像的URL。
Size:设置文本域的字符宽度。
Maxlength:设置可以输入域中的最大字符数。
Checked:决定一个单选按钮或一个复选框是否被选择
Align：指定Type属性创建的图像的对齐属性。

１、text文本框
　功能：创建一个简单的文本框，接受输入单行文本
　基本属性：
Name：设定提交信息时的信息名称。对应于HTML文档中的Name。
Value：用以设定出现在窗口中对应HTML文档中Value的信息。
　基本方法：
blur()：将当前焦点移到后台。
select()：加亮文字。
focus():获得text输入焦点。
主要事件：
onFocus：当Text获得焦点时，产生该事件。
OnBlur：元素失去焦点时，产生该事件。
Onselect：当文字被加亮显示后，产生该文件。
onchange：当Text元素值改变时，产生该文件。
例:”text.htm”
<Form name="test">
<input type="text" name="test" value="this is a javascript" >
</form>
...
<script language ="Javascirpt">
document.mytest.value="that is a Javascript";
document.mytest.select();
document.mytest.blur();
</script>