第八讲 WEB页面信息的交互

    要实现动态交互，必须掌握有关窗体对象(Form)和框架对象(Frames)更为复杂的知识。

一、窗体基础知识

    窗体对象可以使设计人员能用窗体中不同的元素与客户机用户相交互，而用不着在之前首先进行数据输入，就可以实现动态改变Web文档的行为。

1.什么是窗体对象

    窗体（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]中只有两个元素。
    窗体对象最主要的功能就是能够直接访问HTML文档中的窗体，它封装了相关的HTML代码：
    <Form
    Name ="表的名称"
    Target ="指定信息的提交窗口"
    action ="接收窗体程序对应的URL"
    Method =信息数据传送方式(get/post)
    enctype ="窗体编码方式"
    [onsubmit ="JavaScript代码"]>
    </Form>

2.窗体对象的方法

    窗体对象的方法只有一个--submit()方法，该方法主要功用就是实现窗体信息的提交。如提交Mytest窗体,则使用下列格式：
    document.mytest.submit()

3.窗体对象的属性

    窗体对象中的属性主要包括以下：elements name action target encoding method.
    除Elements外，其它几个均反映了窗体中标识中相应属性的状态，这通常是单个窗体标识；而elements常常是多个窗体元素值的数组，例：
    elements[0].Mytable.elements[1]

4.访问窗体对象

    在JavaScript中访问窗体对象可由两种方法实现：

    (1)通过访问窗体
    在窗体对象的属性中首先必须指定其窗体名，而后就可以通过下列标识访问窗体如：document.Mytable()。

(2)通过数组来访问窗体
    除了使用窗体名来访问窗体外，还可以使用窗体对象数组来访问窗体对象。但需要注意一点，因窗体对象是由浏览器环境的提供的，而浏览器环境所提供的数组下标是由0到n。所以可通过下列格式实现窗体对象的访问：
    document.forms[0]
    document.forms[1]
    document.forms[2]...

5.引用窗体的先决条件

    在JavaScript中要对窗体引用的条件是：必须先在页面中用标识创建窗体，并将定义窗体部分放在引用之前。

二、窗体中的基本元素

    窗体中的基本元素由按钮、单选按钮、复选按钮、提交按钮、重置按钮、文本框等组成。
    在JavaScript中要访问这些基本元素，必须通过对应特定的窗体元素的数组下标或窗体元素名来实现。每一个元素主要是通过该元素的属性或方法来引用。其引用的基本格式见下:
    formName.elements[].methadName (窗体名.元素名或数组.方法)
    formName.elemaent[].propertyName(窗体名.元素名或数组.属性)
    下面分别介绍：

1.Text单行单列输入元素

    功能：对Text标识中的元素实施有效的控制。
    基本属性：
    Name：设定提交信息时的信息名称。对应于HTML文档中的Name。
    Value：用以设定出现在窗口中对应HTML文档中Value的信息。
    defaultvalue：包括Text元素的默认值
    基本方法：
    blur()：将当前焦点移到后台。
    select()：加亮文字。
    主要事件：
    onFocus：当Text获得焦点时，产生该事件。
    onBlur：从元素失去焦点时，产生该事件。
    onselect：当文字被加亮显示后，产生该文件。
    onchange：当Text元素值改变时，产生该文件。
    例：...
    <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>

[1] [2] [3] [4] [5] 下一页