<html>
<head>
<title>form表單操作</title>
<meta charse" />

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

 更新時間:2020-01-16 15:59:43   作者:佚名   我要評論(0)

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


<html>
<head>
<title>form表單操作</title>
<meta charse

本文實例講述了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">
            <b>用戶名</b><input type="text" name="wd" id="" value="" disabled="disabled" /><br /><br />
               <b>密碼</b><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程序設計有所幫助。

您可能感興趣的文章:

  • js獲取元素到文檔區域document的(橫向、縱向)坐標的兩種方法
  • JavaScript性能優化 創建文檔碎片(document.createDocumentFragment)
  • JavaScript入門教程(9) Document文檔對象
  • JavaScript中的Document文檔對象
  • JavaScript 節點操作 以及DOMDocument屬性和方法
  • 原生js操作checkbox用document.getElementById實現
  • JavaScript——DOM操作——Window.document對象詳解
  • JavaScript基礎語法、dom操作樹及document對象
  • JS document文檔的簡單操作完整示例

相關文章

最新評論

老快3投注技巧