JS document form表單元素操作完整示例

阿新 • • 發佈：2020-01-14

本文例項講述了JS document form表單元素操作。分享給大家供大家參考，具體如下：

<html>
    <head>
        <title>form表單操作</title>
        <meta charset="UTF-8"/>
        <script type="text/javascript">
            function testForm(){
//                獲取form物件  方法一,通過id,比較普遍的方法
                var fm=document.getElementById("fm");
                alert(fm);    //輸出fm的型別[object HTMLFormElement]
                alert(fm.length);  //輸出所用的表單項(表單型別參考Lgin.html)輸出值為8
//                獲取form物件   方法二，通過name,算是一個特殊的的方法
           var frm=document.frm;
           alert(frm);
                alert(frm.length);
                alert(fm===frm);   //返回值為true,其無論是型別還是內容都是一樣的，其本來就是同一個物件
            }
            function testOper(){
                var fm=document.getElementById("fm");
//                輸出表單的元素
//                alert(fm.elements);   //顯示錶單元素的型別[object HTMLFormControlsCollection]
//                alert(fm.elements.length);  //顯示錶單元素的個數
//                利用表單的action屬性進行訪問地址的動態改變
                fm.action="http://www.baidu.com";
                alert(fm.action);       //返回了action的值
//                利用表單的submit屬性使普通的按鈕也具有提交功能
//                fm.submit();    //可以直接訪問修改後的網址
//                alert(fm.submit());   //執行了submit操作並且返回了undefined
            }
            function testCheck(){
//                獲取checkbox的物件
                var fav=document.getElementsByName("fav");//通過Id無法獲取，但是通過Name
//                實現選中遍歷列印操作
                for(var i=0;i<fav.length;i++){
                    if(fav[i].checked){     //
                        alert(fav[i].value);   //其中fav沒有值，但是fav.value有值，無法列印fav,但是可以列印fav.value
                    }
                }
            }
//            實現全選操作
            function checkBoxselect(){
                var fav=document.getElementsByName("fav");
                for(var i=0;i<fav.length;i++){
                        fav[i].checked=true;
                }
            }
//            實現清空選擇操作
            function checkBoxclear(){
                var fav=document.getElementsByName("fav");
                for(var i=0;i<fav.length;i++){
                    fav[i].checked=false;
                }
            }
//            實現反選操作
            function checkBoxchange(){
                var fav=document.getElementsByName("fav");
                for(var i=0;i<fav.length;i++){   //=是賦值符==和===才是判斷符
                    if(fav[i].checked){
                        fav[i].checked=false;
                    }else{
                        fav[i].checked=true;
                    }
                }
            }
            function selectoper(){
//                獲取單選框物件
                var sel=document.getElementById("Animation");
//                獲取單選框內的選項
                var os=sel.options;
                for(var i=0;i<os.length;i++){
                    if(os[i].selected){
                        alert(os[i].value+":"+os[i].text);
                    }
                }
            }
        </script>
    </head>
    <body>
        <h3>form表單操作</h3>
        <!--新增readonly表示標籤只能讀，新增disabled標籤表示該標籤不能進行任何操作-->
        <input type="button" name="" id="" value="測試form表單" onclick="testForm()" />
        <input type="button" name="" id="" value="測試form表單基本操作" onclick="testOper()" />
        <input type="button" name="" id="" value="測試form表單checkbox" onclick="testCheck()" />
        <input type="button" name="" id="" value="測試form表單checkbox全擇" onclick="checkBoxselect()" />
        <input type="button" name="" id="" value="測試form表單checkbox清空選擇" onclick="checkBoxclear()" />
        <input type="button" name="" id="" value="測試form表單checkbox反選" onclick="checkBoxchange()" />
        <input type="button" name="" id="" value="測試form表單select操作" onclick="selectoper()" />
        <hr />
        <form action="#" method="get" id="fm" name="frm" target="_blank">
            使用者名稱<input type="text" name="wd" id="" value="" disabled="disabled" /><br /><br />
            密碼<input type="password" name="pwd" id="" value="" readonly="readonly"/><br />
            <br />
            愛好 <br />
            動漫<input type="checkbox" name="fav" id="fav" value="動漫" checked="false"/><br />
            遊戲<input type="checkbox" name="fav" id="fav" value="遊戲" checked="false"/><br />
            電影<input type="checkbox" name="fav" id="fav" value="電影" checked=""true/><br />
            敲程式碼<input type="checkbox" name="fav" id="fav" value="敲程式碼" checked="false"/><br />
            <br /><br />
            <select name="" id="Animation">
                <option value="">clannad</option>
                <option value="">花開物語</option>
                <option value="">未聞花名</option>
                <option value="">四月是你的謊言</option>
            </select>
            <br /><br />
            <input type="submit" name="" id="" value="登入" />
        </form>
    </body>
</html>

執行效果：

感興趣的朋友可以使用線上HTML/CSS/JavaScript程式碼執行工具：http://tools.jb51.net/code/HtmlJsRun測試上述程式碼執行效果。

更多關於JavaScript相關內容可檢視本站專題：《JavaScript操作DOM技巧總結》、《JavaScript頁面元素操作技巧總結》、《JavaScript事件相關操作與技巧大全》、《JavaScript查詢演算法技巧總結》、《JavaScript資料結構與演算法技巧總結》、《JavaScript遍歷演算法與技巧總結》及《JavaScript錯誤與除錯技巧總結》

希望本文所述對大家JavaScript程式設計有所幫助。