javascript表单控件实例讲解

本文实例为大家分享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>