javascript表单控件实例讲解

<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>

<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>

<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>