• 表单对象：

文件对象的子对象，Javascript的runtime engine自动为每一个表单建立一个表单对象。

格式：

document.forms[索引].属性

document.forms[索引].方法（参数）

document.表单名称.属性

document.表单名称.方法（参数）

  • 表单对象的属性：
action 表单动作
elements 以索引表示的所有表单元素
encoding MIME的类型
length 表单元素的个数
method 方法
name 表单名称
target 目标
  • 表单对象的方法：
handleEvent(事件) 使事件处理程序生效
reset() 重置
submit() 提交
　
  1. 文本对象：
    • 格式：

    document.forms[索引].elements[索引].属性

    document.forms[索引].elements[索引].方法（参数）

    document.表单名称.文本对象名称.属性

    document.表单名称.文本对象名称.方法（参数）

    • 属性：
    defaultValue 该对象的value属性
    form 该对象所在的表单
    name 该对象的name属性
    type 该对象的type属性
    value 该对象的value属性
    • 方法：
    blur()
    focus()
    handleEvent(事件)
    select() 该对象设置为选取状态
    • 事件处理程序：

    onBlur onChange onClick onDbClick onFocus onKeyDown onKeyPress onKeyUp
    onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove onSelect

    • 例1：

    <FORM>
    姓名：
    <INPUT TYPE="text" NAME="name">
    <INPUT TYPE="button" VALUE="请单击" onClick=alert("谢谢你，"+this.form.name.value)>
    </FORM>

    • 例2：

    <Script>

    function getFocus(obj) {
         obj.style.color='red';
         obj.style.background='#DBDBDB';
    }
    function getBlur(obj) {
         obj.style.color='black';
         obj.style.background='white';
    }

    </Script>

    <BODY onLoad=document.form1.name.focus()>
    <FORM NAME="form1">
    姓　　名：<INPUT TYPE="text" NAME="name"
    onFocus=getFocus(this) onBlur=getBlur(this)><BR>
    电　　话：<INPUT TYPE="text" NAME="tel"
    onFocus=getFocus(this) onBlur=getBlur(this)><BR>
    </FORM>
    </BODY>

    • 例3：

    <Script>

    var i = 0;

    function movenext(obj,i) {
    if(obj.value.length==4){
         document.forms[0].elements[i+1].focus();
    }
    }

    function result() {
    fm = document.forms[0];
    num = fm.elements[0].value +
    fm.elements[1].value +
    fm.elements[2].value +
    fm.elements[3].value ;
    alert("你输入的信用卡号码是"+ num);
    }

    </Script>

    <BODY onLoad=document.forms[0].elements[i].focus()>
    请输入你的信用卡号码：
    <form>
    <input type=text size=3 maxlength=4 onKeyup=movenext(this,0)> -
    <input type=text size=3 maxlength=4 onKeyup=movenext(this,1)> -
    <input type=text size=3 maxlength=4 onKeyup=movenext(this,2)> -
    <input type=text size=3 maxlength=4 onKeyup=movenext(this,3)>
    <input type=button value=显示 onClick=result()>
    </form>
    </BODY>

  2. 密码对象：
    • 格式：

    document.forms[索引].elements[索引].属性

    document.forms[索引].elements[索引].方法（参数）

    document.表单名称.密码对象名称.属性

    document.表单名称.密码对象名称.方法（参数）

    • 属性：
    defaultValue 该对象的value属性
    form 该对象所在的表单
    name 该对象的name属性
    type 该对象的type属性
    value 该对象的value属性
    • 方法：
    blur()
    focus()
    handleEvent(事件)
    select() 该对象设置为选取状态
    • 事件处理程序：

    onBlur onChange onClick onDbClick onFocus onKeyDown onKeyPress onKeyUp
    onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove onSelect

    • 例1：

    <Script>

    function checkPw() {
    fm = document.form1;
    if (fm.pw2.value != fm.pw1.value) {
         alert("密码不符，请重新输入");
         document.form1.pw2.select();
    }
    else
         alert("谢谢你，"+fm.name.value);
    }

    </Script>

    <BODY onLoad=document.form1.name.focus()>
    <FORM NAME="form1">
    姓　　名：<INPUT TYPE="text" NAME="name"><BR>
    输入密码：<INPUT TYPE="password" NAME="pw1"><BR>
    重新输入：<INPUT TYPE="password" NAME="pw2"><BR>
    <INPUT TYPE="button" VALUE="填好了" onClick=checkPw()>　
    <INPUT TYPE="reset" VALUE="重　填">
    </FORM>
    </BODY>

    • 例2：

    <Script>

    function isInt(elm) {
    if (isNaN(elm)) {
         alert("你输入的是" + elm + "\n不是数字！");
         document.forms[0].pw.value = "";
         return false;
    }
    if (elm.length != 4) {
         alert("请输入四位数数字！");
         document.forms[0].pw.value = "";
         return false;
    }
    }
    </Script>

    <form action="test.asp" onSubmit="return isInt(this.pw.value)">
    请输入四位数数字密码：<BR>
    <input type="password" name="pw">
    <input type="submit" value="检查">
    </form>

  3. 按钮对象、提交按钮对象、重置按钮对象：
    • 格式：

    document.forms[索引].elements[索引].属性

    document.forms[索引].elements[索引].方法（参数）

    document.表单名称.按钮对象名称.属性

    document.表单名称.按钮对象名称.方法（参数）

    • 属性：
    form 该对象所在的表单
    name 该对象的name属性
    type 该对象的type属性
    value 该对象的value属性
    • 方法：
    blur()
    click()
    focus()
    handleEvent(事件)
    • 事件处理程序：

    onBlur onClick onDbClick onFocus onKeyDown onKeyPress onKeyUp
    onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove

  4. 隐藏对象：
    • 格式：

    document.forms[索引].elements[索引].属性

    document.forms[索引].elements[索引].方法（参数）

    document.表单名称.隐藏对象名称.属性

    document.表单名称.隐藏对象名称.方法（参数）

    • 属性：
    form 该对象所在的表单
    name 该对象的name属性
    type 该对象的type属性
    value 该对象的value属性
  5. 单选按钮对象：
    • 格式：

    document.forms[索引].elements[索引](索引).属性

    document.forms[索引].elements[索引](索引).方法（参数）

    document.表单名称.单选对象名称[索引].属性

    document.表单名称.单选对象名称[索引].方法（参数）

    • 属性：
    checked 设置该对象为选定状态
    defaultChecked 对应该对象的默认选定状态
    form 该对象所在的表单
    name 该对象的name属性
    type 该对象的type属性
    value 该对象的value属性
    • 方法：
    blur()
    click()
    focus()
    handleEvent(事件)
    • 事件处理程序：

    onBlur onClick onDbClick onFocus onKeyDown onKeyPress onKeyUp
    onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove

    • 例：

    <Script>

    function show() {
    var x = "先生";
    if (document.form1.sex[1].checked)
       x = "小姐";
    alert(document.form1.name.value + x);
    }

    </Script>
    <FORM NAME=form1>
    姓名：<INPUT TYPE="text" NAME="name"><BR>
    你是：<INPUT TYPE="radio" NAME="sex" CHECKED>帅哥
    <INPUT TYPE="radio" NAME="sex">美女<BR>
    <INPUT TYPE="button" VALUE="请单击" onClick=show()>
    </FORM>


ExtJS教程- Hibernate教程-Struts2 教程-Lucene教程