Form 对象的集合

<html>



<body id="myBody" class="myBody">

    <form id="myForm">



        Firstname: <input id="fname" type="text" value="Mickey" />

        Lastname: <input id="lname" type="text" value="Mouse" />



        <input id="sub" type="button" value="Submit" />

    </form>



    <p>Get the value of all the elements in the form:<br />



    <form id="myForm1" action="index.php" method="post" name="myForm1">



        name: <input id="fname" type="text" value="Mickey" />

        <input id="sub" type="button" value="Submit" onclick="changeAction()"/>



    </form>



    <form id="myForm2" action="index.php" method="post" name="myForm2">



        name: <input id="fname" type="text" value="Mickey" />

        <input id="sub" type="button" value="Submit" onclick="Submit1()"/>



        <input id="res" type="button" value="reset" onclick="reset1()"/>

    </form>



</body>

<script>



    //Form 对象的集合

    //elements 集合可返回包含表单中所有元素的数组。



    /*var x = document.getElementById('myForm');

    for(var i=0;i<x.length;i++){



        document.write(x.elements[i].value);   

        document.write("<br />");



        document.write(x.elements[i].type);

        document.write("<br />");



    }

    //Form 对象的属性



    //action 属性可设置或返回表单的 action 属性。

    //action 属性定义了当表单被提交时数据被送往何处。



    function changeAction(){

        var x = document.getElementById("myForm1");



        alert(x.action);        //http://localhost/js/dom/index.php

        x.action = "index1.php";



        alert(x.action);        //http://localhost/js/dom/index1.php

    }

    

    //id 属性可设置或返回表单的 id



    var x = document.getElementsByTagName("form")[0];

    alert(x.id);                //myForm



    //length 属性可返回表单中元素的数目



    var x = document.getElementById('myForm1');

    alert(x.length);            //2



    //method 属性可设置或返回用于表单提交的 HTTP 方法



    var x = document.getElementById('myForm1');

    alert(x.method);            //post

    

    //name 属性可设置或返回表单的名称



    var x = document.getElementById('myForm1');

    alert(x.name);                //myForm1

    



    //Form 对象的方法



    //reset() 方法可把表单中的元素重置为它们的默认值。

    function reset1(){



        document.getElementById("myForm2").reset();

    }



*/

    //submit() 方法把表单数据提交到 Web 服务器。



    function Submit1(){

        document.getElementById("myForm2").submit();



    }



</script>

</html>



你可能感兴趣的:(form)