• 表單對象：

文件對象的子對象，Javascript的runtime engine自動為每一個表單建立一個表單對象。

格式：

document.forms[索引].屬性

document.forms[索引].方法（參數(shù)）

document.表單名稱.屬性

document.表單名稱.方法（參數(shù)）

  • 表單對象的屬性：
action 表單動作
elements 以索引表示的所有表單元素
encoding MIME的類型
length 表單元素的個數(shù)
method 方法
name 表單名稱
target 目標
  • 表單對象的方法：
handleEvent(事件) 使事件處理程序生效
reset() 重置
submit() 提交
　
  1. 文本對象：
    • 格式：

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

    document.forms[索引].elements[索引].方法（參數(shù)）

    document.表單名稱.文本對象名稱.屬性

    document.表單名稱.文本對象名稱.方法（參數(shù)）

    • 屬性：
    defaultValue 該對象的value屬性
    form 該對象所在的表單
    name 該對象的name屬性
    type 該對象的type屬性
    value 該對象的value屬性
    • 方法：
    blur()
    focus()
    handleEvent(事件)
    select() 該對象設(shè)置為選取狀態(tài)
    • 事件處理程序：

    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[索引].方法（參數(shù)）

    document.表單名稱.密碼對象名稱.屬性

    document.表單名稱.密碼對象名稱.方法（參數(shù)）

    • 屬性：
    defaultValue 該對象的value屬性
    form 該對象所在的表單
    name 該對象的name屬性
    type 該對象的type屬性
    value 該對象的value屬性
    • 方法：
    blur()
    focus()
    handleEvent(事件)
    select() 該對象設(shè)置為選取狀態(tài)
    • 事件處理程序：

    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不是數(shù)字！");
         document.forms[0].pw.value = "";
         return false;
    }
    if (elm.length != 4) {
         alert("請輸入四位數(shù)數(shù)字！");
         document.forms[0].pw.value = "";
         return false;
    }
    }
    </Script>

    <form action="test.asp" onSubmit="return isInt(this.pw.value)">
    請輸入四位數(shù)數(shù)字密碼：<BR>
    <input type="password" name="pw">
    <input type="submit" value="檢查">
    </form>

  3. 按鈕對象、提交按鈕對象、重置按鈕對象：
    • 格式：

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

    document.forms[索引].elements[索引].方法（參數(shù)）

    document.表單名稱.按鈕對象名稱.屬性

    document.表單名稱.按鈕對象名稱.方法（參數(shù)）

    • 屬性：
    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[索引].方法（參數(shù)）

    document.表單名稱.隱藏對象名稱.屬性

    document.表單名稱.隱藏對象名稱.方法（參數(shù)）

    • 屬性：
    form 該對象所在的表單
    name 該對象的name屬性
    type 該對象的type屬性
    value 該對象的value屬性
  5. 單選按鈕對象：
    • 格式：

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

    document.forms[索引].elements[索引](索引).方法（參數(shù)）

    document.表單名稱.單選對象名稱[索引].屬性

    document.表單名稱.單選對象名稱[索引].方法（參數(shù)）

    • 屬性：
    checked 設(shè)置該對象為選定狀態(tài)
    defaultChecked 對應(yīng)該對象的默認選定狀態(tài)
    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教程