本文实例为大家分享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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。