• 表单对象：

文件对象的子对象，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>

     

  6. 复选框对象：

    • 格式：

    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 count() {
    var checkCount=0;
    var num = document.form1.elements.length;

    for (var i=0; i<num; i++) {
    if (document.form1.elements[i].checked)
      checkCount++;
    }
    alert ("你喜欢 "+ checkCount + "种颜色。")
    }

    </Script>
    <FORM NAME=form1>
    请选择你喜欢的颜色：<BR>
    <INPUT TYPE="checkbox" NAME="red">红色
    <INPUT TYPE="checkbox" NAME="green">绿色
    <INPUT TYPE="checkbox" NAME="blue">蓝色<BR>
    <INPUT TYPE="button" VALUE="请单击" onClick=count()>
    </FORM>

     

  7. 选择对象：
    • 属性：
    form 该对象所在的表单
    name 该对象的name属性
    length 选项的数目
    options <option>标记
    selectedIndex 所选项目的索引值
    type 该对象的type属性
    • 方法：
    blur()  
    focus()  
    handleEvent(事件)  
    • 事件处理程序：

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

     

  8. 选项对象：选择对象的子对象
    • 格式：

    <option value="值" selected>文字</option>

    new Option([文字[,值[,defaultSelected[,selected]]]])

    • 属性：
    selected 判断该选项是否被选取
    defaultSelected 指定该选项为默认选定状态
    index 所有选项所构成的数组索引值
    length 选项的数目
    text 该选项显示的文字
    value 所选项传到服务器的值
    • 例1：

    <Script>

    var url = new Array(3);
    url[0] = "http://www.yam.org.tw/";
    url[1] = "http://www.kimo.com/";
    url[2] = "http://chinese.yahoo.com/";

    function goto(form) {
    var i = form.menu.selectedIndex;
    if (i>0) {
    location = url[i-1];
    }
    }

    </Script>
    <FORM>
    <SELECT NAME="menu" onChange="goto(this.form)">
    <OPTION>你喜欢哪一个搜索引擎?
    <OPTION STYLE="color:red">◆蕃薯藤
    <OPTION STYLE="color:red">◇奇摩
    <OPTION STYLE="color:red">◆中文雅虎
    </SELECT>
    </FORM>

    • 例2：

    <Script>

    function getText() {
    sel = document.forms[0].weekday
    ans = sel.options[sel.selectedIndex].text
    return ans;
    }

    </Script>
    <FORM>请选择...
    <SELECT name=weekday>
    <OPTION VALUE="Monday">星期一
    <OPTION VALUE="Tuesday">星期二
    <OPTION VALUE="Wednesday">星期三
    <OPTION VALUE="Thursday">星期四
    <OPTION VALUE="Friday">星期五
    <OPTION VALUE="Saturday">星期六
    <OPTION VALUE="Sunday">星期日
    </SELECT><P>
    <INPUT TYPE="button" VALUE="取出选项的文字"
    onClick="alert(getText())">
    <INPUT TYPE="button" VALUE="取出选项的值"
    onClick="alert(this.form.weekday.value)"><BR>
    </FORM>

    • 例3：

    <FORM NAME="form1">
    你最喜欢哪一种水果?
    <INPUT TYPE="text" NAME="fruit">
    <A HREF="#" onClick="javascript:open('1.htm','','width=100')">
    查询</A>
    </FORM>

     

    <Script> /* -------- 1.htm -------- */

    function choice() {
    sel = document.forms[0].elements[0];
    document.form1.fruit.value =
    sel.options[sel.selectedIndex].text;
    self.close();
    }

    </Script>

    <FORM>
    <SELECT onChange="choice()">
    <OPTION>请选择
    <OPTION>西瓜
    <OPTION>香蕉
    </SELECT>
    </FORM>

    • 例4：

    <Script>

    function createOptions(){
    var option = new Option(document.form1.select1.value)
    document.form1.select2.options[2] = option;
    }

    </script>

    <form name="form1">
    <select name="select1" size="10">
    <option>可选择项目 <option>---------------
    <option value="香蕉">香蕉 <option value="葡萄">葡萄
    <option value="苹果">苹果 <option value="梨子">梨子
    </select>

    <input type="button" value="-->" onClick="createOptions()">
    <select name="select2" size="10">
    <option>选择项目 <option>---------------
    </select>
    </form>

    • 例5：

    <Script>

    function createOptions(){
    sel1 = document.form1.select1;
    sel2 = document.form1.select2;
    var num = sel1.selectedIndex;
    var option = new Option(sel1.options[num].text);
    sel2.options[2] = option;
    }

    </script>

    <form name="form1">
    <select name="select1" size="10">
    <option>可选择项目 <option>---------------
    <option value="香蕉">香蕉 <option value="葡萄">葡萄
    <option value="苹果">苹果 <option value="梨子">梨子
    </select>

    <input type="button" value="-->" onClick="createOptions()">
    <select name="select2" size="10">
    <option>选择项目 <option>---------------
    </select>
    </form>

    • 例6：

    <Script>

    function createOptions(){
    sel1 = document.form1.select1;
    sel2 = document.form1.select2;
    var num = sel1.selectedIndex;
    var option = new Option(sel1.options[num].text);
    var item = sel2.options.length;
    sel2.options[item] = option;
    }

    </script>

    <form name="form1">

    <select name="select1" size="10">
    <option>可选择项目 <option>---------------
    <option value="香蕉">香蕉 <option value="葡萄">葡萄
    <option value="苹果">苹果 <option value="梨子">梨子
    </select>

    <input type="button" value="-->" onClick="createOptions()">
    <select name="select2" size="10">
    <option>选择项目 <option>---------------
    </select>
    </form>

    • 例7：

    <Script>

    function createOptions(){

    sel1 = document.form1.select1;
    sel2 = document.form1.select2;
    var num = sel1.selectedIndex;
    if (num > 1) {
    var option = new Option(sel1.options[num].text);
    var item = sel2.options.length;
    sel2.options[item] = option;
    }
    sel1.selectedIndex = 10000;
    }

    function delOptions() {
    var num = document.form1.select2.selectedIndex;
    if (num>1)
    document.form1.select2.options[num] = null;
    else
    document.form1.select2.selectedIndex = 10000;
    }

    </script>
    <form name="form1">
    <select name="select1" size="10"
    onDblClick="createOptions()">
    <option>可选择项目 <option>---------------
    <option value="香蕉">香蕉 <option value="葡萄">葡萄
    <option value="苹果">苹果 <option value="梨子">梨子
    </select>
    <input type="button" value="选择" onClick="createOptions()">
    <select name="select2" size="10">
    <option>选择项目 <option>---------------
    </select>
    <input type="button" value="删除" onClick="delOptions()">
    </form>

     

  9. 文本区域对象：
    • 属性：
    defaultValue 对应该对象的默认值
    form 该对象所在的表单
    name 该对象的name属性
    type 该对象的type属性
    value 该对象的value属性
    • 方法：
    blur()  
    select()  
    focus()  
    handleEvent(事件)  
    • 事件处理程序：

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

    • 例1：

    <Script>

    function isTooLong(elm){
    if (elm.length > 50) {
      alert("留言内容太长，请修改后再发送....");
      return false;
    }
    }

    </script>

    <FORM onSubmit="return isTooLong(this.msg.value)">
    <TEXTAREA NAME="msg" COLS="30" ROWS="5" onFocus="this.value=''">
    欢迎留言，不过请长话短说....
    </textarea><BR>
    <INPUT TYPE="submit" VALUE="留言完毕">
    </FORM>

    • 例2：

    <STYLE>
    INPUT {background-color:'99FFFF';color:"red"}
    TEXTAREA {background-color:'99FFFF';color:"red"}
    </STYLE>
    <BODY BGCOLOR="99FFFF">
    <FORM METHOD="post" ENCTYPE="text/plain" ACTION="mailto:hwyang@iii.org.tw?subject=不错">
    <TABLE>
    <CAPTION>读者回函</CAPTION>
    <TR><TD>姓　　名：
    <TD><INPUT TYPE="text" NAME="userName">
    <TR><TD>电子邮件：
    <TD><INPUT TYPE="text" NAME="email">
    <TR><TD VALIGN="top">内　　容：
    <TD><TEXTAREA NAME="msg" ROWS="2" COLS="30">
    我非常喜欢你的书，加油!!!
    </TEXTAREA>
    <TR><TD COLSPAN="2" ALIGN="center">
    <INPUT TYPE="submit" VALUE="填好了">
    </TABLE>
    </FORM>
    </BODY>

     

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

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

 

 

 

 

 
本电子书由 http://www.cnfan.net 收集整理制作，版权归原作者所有