javascript表單控件實(shí)例講解

更新時(shí)間：2016年09月13日 15:39:59 作者：gemingzhu

這篇文章主要為大家詳細(xì)介紹了javascript表單控件實(shí)例,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享js表單控件多個(gè)實(shí)例講解，供大家參考，具體內(nèi)容如下

實(shí)例一：遍歷表單的所有控件

<script type="text/javascript">
  //遍歷表單的所有控件
  function getValues(){
    var f = document.forms[0];     //獲取表單DOM
    var elements = f.elements;   //獲取所有的控件數(shù)組
    var str = '';            //拼接字符串
    //循環(huán)遍歷
    for(var i=0; i<elements.length; i++){
      var e = elements[i];      //當(dāng)前的控件
      str += e.value;       //拼接控件的值
      str += '\n';          //拼接分隔符
    }
    alert(str);           //用提示框展示結(jié)果
  }
</script>


<form>     
      文本框：
      <input type="text" name="myText"/>
      <br/>
      單選框：
      <input type="radio" name="myRadio"value="1"/>1
      <input type="radio" name="myRadio" value="2"/>2
      <br/>
      下拉列表：
      <select name="mySelect">
        <option value="">==請選擇==</option>
        <option value="1">1</option>
        <option value="2">2</option>
      </select>
      <br/>
      <input type="button" value="得到所有控件的值" onclick="getValues()"/>
</form>

實(shí)例二：通過控件名訪問特定的控件

<script type="text/javascript">
  //通過控件名訪問特定的控件
  function getFormDom(){
    var f = document.forms[0];     //獲取表單DOM
    var myText = f.myText;     //通過名字獲取控件DOM
    //提示控件的name和value
    alert(myText.name + " : " + myText.value);
  }
</script>


<form>     
      文本框：
      <input type="text" name="myText"/>
      <br/>
      <input type="button" value="獲取控件" onclick="getFormDom()"/>
</form>

實(shí)例三：獲取表單內(nèi)文本框的個(gè)數(shù)

<script type="text/javascript">
  //獲取表單內(nèi)文本框的個(gè)數(shù)
  function getInputCount(){
    var f = document.forms[0];     //獲取表單DOM
    var elements = f.elements;   //獲取所有的控件數(shù)組
    var count = 0;         //統(tǒng)計(jì)總數(shù)
    //循環(huán)遍歷
    for(var i=0; i<elements.length; i++){
      //當(dāng)前的控件
      var e = elements[i];      
      //是否為文本框
      if(e.tagName == 'INPUT' && e.type == 'text'){  
        count++;        //總數(shù)自加
      }
    }
    //用提示框展示結(jié)果
    alert("文本框一共有：" + count + "個(gè)"); 
  }
</script>

實(shí)例四：修改表單的提交方法

method 屬性規(guī)定在提交表單時(shí)所用的 HTTP 方法（GET 或 POST），使用 GET 時(shí)，表單數(shù)據(jù)在頁面地址欄中是可見的，POST 的安全性更加，因?yàn)樵陧撁娴刂窓谥斜惶峤坏臄?shù)據(jù)是不可見的。

<script type="text/javascript">
      //修改表單的提交方法
      function modifyMethod(){
        var f = document.forms[0];     //獲取表單DOM
        var method = f.myMethod.value; //選擇的方法
        f.method = method;       //修改選擇的提交方法
        //用提示框展示結(jié)果
        alert("表單當(dāng)前的提交方法：" + method);
      }
    </script>


<form method="post">
      請選擇提交方法：
      <select name="myMethod">
        <option value="">==請選擇==</option>
        <option value="get">get</option>
        <option value="post">post</option>
      </select>
      <br/>
      <input type="button" value="修改提交方法" onclick="modifyMethod()"/>
    </form>

實(shí)例五：動態(tài)指定表單的動作屬性

action 屬性定義在提交表單時(shí)執(zhí)行的動作。
向服務(wù)器提交表單的通常做法是使用提交按鈕。
通常，表單會被提交到 web 服務(wù)器上的網(wǎng)頁。
如果省略 action 屬性，則 action 會被設(shè)置為當(dāng)前頁面。

<script type="text/javascript">
      //動態(tài)指定表單的動作屬性
      function modifyAction(){
        var f = document.forms[0];   //獲取表單DOM
        var newURL = f.newURL.value;  //選擇的方法
        f.action = newURL;     //修改提交表單的action地址
        //用提示框展示結(jié)果
        alert("表單當(dāng)前的動作：" + f.action);
      }
    </script>


<form method="post">      
      請選擇提交方法：
      <input type="text" name="newURL"/>
      <br/>
      <input type="button" value="修改提交Action" onclick="modifyAction()"/>
    </form>

實(shí)例六：動態(tài)選擇聚焦的控件

<script type="text/javascript">
      //第一個(gè)單選框?yàn)榻裹c(diǎn)
      function focusIt(){
        var f = document.forms[0];   //獲取表單DOM
        var myRadio = f.myRadio;    //獲取單選框
        myRadio[0].focus();     //第一個(gè)單選框獲得焦點(diǎn)
      }
</script>


<form>     
      文本框：
      <input type="text" name="myText"/>
      <br/>
      單選框：
      <input type="radio" name="myRadio" value="1"/>
      <input type="radio" name="myRadio" value="2"/>
      <br/>
      下拉列表：
      <select name="mySelect">
        <option value="">==請選擇==</option>
        <option value="1">1</option>
        <option value="2">2</option>
      </select>
      <br/>
      <input type="button" value="第一個(gè)單選框?yàn)榻裹c(diǎn)" onclick="focusIt()"/>
    </form>

實(shí)例七：初始化表單里的所有控件的值到最初狀態(tài)

<script type="text/javascript">
      //初始化表單里的所有控件的值到最初狀態(tài)
      function init(){
        var f = document.forms[0];   //獲取表單DOM
        f.reset();         //使用reset()函數(shù)
      }
</script>

實(shí)例八：批量為所有的表單控件加一個(gè)說明

<script type="text/javascript">
  //批量為所有的表單控件加一個(gè)說明
  function batchComment(){
    var f = document.forms[0];     //獲取表單DOM
    var children = f.childNodes;    //獲取表單的所有子元素
    var newArr = [];          //定義新的元素?cái)?shù)組
    var j = 0;           //為新元素?cái)?shù)組定義下標(biāo)
    //循環(huán)遍歷子元素
    for(var i=0; i<children.length; i++){
      var e = children[i];      //當(dāng)前子元素
      newArr[j++] = e;      //添加到新數(shù)組里
      //判斷是否為控件
      if(e.tagName == 'INPUT' || e.tagName == 'SELECT'){
        //添加一個(gè)文字說明的節(jié)點(diǎn)
        var text = document.createTextNode(" 此項(xiàng)必填");
        newArr[j++] = text;   //為新數(shù)組加入節(jié)點(diǎn)
      }
    }
    //清空現(xiàn)有的表單內(nèi)容
    f.innerHTML = '';        
    //批量加上說明
    for(var i=0; i<newArr.length; i++){
      //把老的元素和說明節(jié)點(diǎn)加入form
      f.appendChild(newArr[i]);    
    }
  }
</script>

實(shí)例九：使用隱藏控件為表單添加參數(shù)

<script type="text/javascript">   
      //展示表單參數(shù)的函數(shù)
      function showParams(){
        //設(shè)置隱藏變量的值，這個(gè)值也可以通過標(biāo)簽的value指定
        document.forms[0].myhidden.value = '我是隱藏的';
        //定義字符拼接變量
        var str = '表單將提交的參數(shù)包括：';
        //拼接年份參數(shù)
        str += '\n年份:' + document.forms[0].myyear.value;
        //拼接姓名參數(shù)
        str += '\n姓名:' + document.forms[0].myname.value;
        //拼接隱藏參數(shù)
        str += '\n隱藏變量:' + document.forms[0].myhidden.value;
        alert(str);     //展示字符的值
      }
    </script>  


<form>     
      <input type="hidden" name="myhidden"/>
      年份：
      <select name="myyear">
        <option value="2012">2012</option>
        <option value="2013">2013</option>
        <option value="2014">2014</option>
      </select>
      <br/><br/>
      姓名：<input type="text" name="myname"/>
      <br/><br/>
      <input type="button" value="提交" onclick="showParams();"/>
    </form>

實(shí)例十：全部勾選所有復(fù)選框

<script type="text/javascript">   
      //勾選所有的函數(shù)
      function checkAll(c){
        //獲取所有的復(fù)選框
        var arr = document.getElementsByName('myname');
        if(c){   //是否全選
          //遍歷所有的復(fù)選框
          for(var i=0;i<arr.length;i++){
            arr[i].checked = true;//選中
          }
        }else{   //否則，全不選
          //遍歷所有的復(fù)選框
          for(var i=0;i<arr.length;i++){
            arr[i].checked = false;//不選中
          }
        }
      }
</script>  


<form>     
      你的興趣：<br>
      <input type="checkbox" name="myall" onclick="checkAll(this.checked)"/>全選<br>
      <input type="checkbox" name="myname" />全選
      <input type="checkbox" name="myname" />全選
      <input type="checkbox" name="myname" />全選
</form>

實(shí)例十一：為表單的聚焦控件設(shè)置醒目的樣式

<script type="text/javascript">   
      function init(){
        var f = document.forms[0];   //獲取表單DOM
        var elements = f.elements;   //獲取所有的控件數(shù)組
        var str = '';          //拼接字符串
        //循環(huán)遍歷
        for(var i=0; i<elements.length; i++){
          var e = elements[i];    //當(dāng)前的控件
          e.onfocus = function(){   //定義聚焦的樣式回調(diào)
            //修改邊框?yàn)榧t色
            this.style.border = '1px solid red'; 
          }
          e.onblur = function(){   //失去焦點(diǎn)的回調(diào)
            this.style.border = ''; //恢復(fù)原有邊框樣式
          }
        }
      }
</script>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: