本文實例為大家分享js表單控件多個實例講解，供大家參考，具體內容如下
實例一：遍歷表單的所有控件
<script type="text/javascript"> //遍歷表單的所有控件function getValues(){ var f = document.forms[0]; //獲取表單DOM var elements = f.elements; //獲取所有的控件數組var str = ''; //拼接字符串//循環遍歷for(var i=0; i<elements.length; i++){ var e = elements[i]; //當前的控件str += e.value; //拼接控件的值str += '/n'; //拼接分隔符} alert(str); //用提示框展示結果}</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>實例二：通過控件名訪問特定的控件
<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>實例三：獲取表單內文本框的個數
<script type="text/javascript"> //獲取表單內文本框的個數function getInputCount(){ var f = document.forms[0]; //獲取表單DOM var elements = f.elements; //獲取所有的控件數組var count = 0; //統計總數//循環遍歷for(var i=0; i<elements.length; i++){ //當前的控件var e = elements[i]; //是否為文本框if(e.tagName == 'INPUT' && e.type == 'text'){ count++; //總數自加} } //用提示框展示結果alert("文本框一共有：" + count + "個"); }</script>實例四：修改表單的提交方法
method 屬性規定在提交表單時所用的HTTP 方法（GET 或POST），使用GET 時，表單數據在頁面地址欄中是可見的，POST 的安全性更加，因為在頁面地址欄中被提交的數據是不可見的。
<script type="text/javascript"> //修改表單的提交方法function modifyMethod(){ var f = document.forms[0]; //獲取表單DOM var method = f.myMethod.value; //選擇的方法f.method = method; //修改選擇的提交方法//用提示框展示結果alert("表單當前的提交方法：" + 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>實例五：動態指定表單的動作屬性
action 屬性定義在提交表單時執行的動作。
向服務器提交表單的通常做法是使用提交按鈕。
通常，表單會被提交到web 服務器上的網頁。
如果省略action 屬性，則action 會被設置為當前頁面。
<script type="text/javascript"> //動態指定表單的動作屬性function modifyAction(){ var f = document.forms[0]; //獲取表單DOM var newURL = f.newURL.value; //選擇的方法f.action = newURL; //修改提交表單的action地址//用提示框展示結果alert("表單當前的動作：" + f.action); } </script><form method="post"> 請選擇提交方法： <input type="text" name="newURL"/> <br/> <input type="button" value="修改提交Action" onclick="modifyAction()"/> </form>實例六：動態選擇聚焦的控件
<script type="text/javascript"> //第一個單選框為焦點function focusIt(){ var f = document.forms[0]; //獲取表單DOM var myRadio = f.myRadio; //獲取單選框myRadio[0].focus(); //第一個單選框獲得焦點}</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="第一個單選框為焦點" onclick="focusIt()"/> </form>實例七：初始化表單裡的所有控件的值到最初狀態
<script type="text/javascript"> //初始化表單裡的所有控件的值到最初狀態function init(){ var f = document.forms[0]; //獲取表單DOM f.reset(); //使用reset()函數}</script>實例八：批量為所有的表單控件加一個說明
<script type="text/javascript"> //批量為所有的表單控件加一個說明function batchComment(){ var f = document.forms[0]; //獲取表單DOM var children = f.childNodes; //獲取表單的所有子元素var newArr = []; //定義新的元素數組var j = 0; //為新元素數組定義下標//循環遍歷子元素for(var i=0; i<children.length; i++){ var e = children[i]; //當前子元素newArr[j++] = e; //添加到新數組裡//判斷是否為控件if(e.tagName == 'INPUT' || e.tagName == 'SELECT'){ //添加一個文字說明的節點var text = document.createTextNode(" 此項必填"); newArr[j++] = text; //為新數組加入節點} } //清空現有的表單內容f.innerHTML = ''; //批量加上說明for(var i=0; i<newArr.length; i++){ //把老的元素和說明節點加入form f.appendChild(newArr[i]); } }</script>實例九：使用隱藏控件為表單添加參數
<script type="text/javascript"> //展示表單參數的函數function showParams(){ //設置隱藏變量的值，這個值也可以通過標籤的value指定document.forms[0].myhidden.value = '我是隱藏的'; //定義字符拼接變量var str = '表單將提交的參數包括：'; //拼接年份參數str += '/n年份:' + document.forms[0].myyear.value; //拼接姓名參數str += '/n姓名:' + document.forms[0].myname.value; //拼接隱藏參數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>實例十：全部勾選所有復選框
<script type="text/javascript"> //勾選所有的函數function checkAll(c){ //獲取所有的複選框var arr = document.getElementsByName('myname'); if(c){ //是否全選//遍歷所有的複選框for(var i=0;i<arr.length;i++){ arr[i].checked = true;//選中} }else{ //否則，全不選//遍歷所有的複選框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>實例十一：為表單的聚焦控件設置醒目的樣式
<script type="text/javascript"> function init(){ var f = document.forms[0]; //獲取表單DOM var elements = f.elements; //獲取所有的控件數組var str = ''; //拼接字符串//循環遍歷for(var i=0; i<elements.length; i++){ var e = elements[i]; //當前的控件e.onfocus = function(){ //定義聚焦的樣式回調//修改邊框為紅色this.style.border = '1px solid red'; } e.onblur = function(){ //失去焦點的回調this.style.border = ''; //恢復原有邊框樣式} } }</script>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。