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>

实例五：动态指定表单的动作属性

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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。