javascript表单控件实例讲解


Posted in Javascript onSeptember 13, 2016

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

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

Javascript 相关文章推荐
JavaScript.Encode手动解码技巧
Jul 14 Javascript
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
Oct 29 Javascript
JQuery 控制内容长度超出规定长度显示省略号
May 23 Javascript
js闭包实例汇总
Nov 09 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
Feb 24 Javascript
window.onload绑定多个事件的两种解决方案
May 15 Javascript
angular ngClick阻止冒泡使用默认行为的方法
Nov 03 Javascript
vue指令以及dom操作详解
Mar 04 Javascript
4个顶级JavaScript高级文本编辑器
Oct 10 Javascript
微信小程序request请求封装,验签代码实例
Dec 04 Javascript
JS的深浅复制详细
Oct 16 Javascript
JavaScript执行机制详细介绍
Dec 06 Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
Sep 13 #Javascript
实例讲解JavaScript中call、apply、bind方法的异同
Sep 13 #Javascript
JS判断浏览器是否安装flash插件的简单方法
Sep 13 #Javascript
js实现表单及时验证功能 用户信息立即验证
Sep 13 #Javascript
浅谈JQ中mouseover和mouseenter的区别
Sep 13 #Javascript
浅谈JS的基础类型与引用类型
Sep 13 #Javascript
JavaScript简单下拉菜单特效
Sep 13 #Javascript
You might like
一个颜色轮换的简单例子
2006/10/09 PHP
php中使用ExcelFileParser处理excel获得数据(可作批量导入到数据库使用)
2010/08/21 PHP
PHP数组遍历知识汇总(包含遍历方法、数组指针操作函数、数组遍历测速)
2014/07/05 PHP
使用YUI+Ant 实现JS CSS压缩
2014/09/02 PHP
php字符串的替换,分割和连接方法
2016/05/23 PHP
php使用strip_tags()去除html标签仍有空白的解决方法
2016/07/28 PHP
PHP全功能无变形图片裁剪操作类与用法示例
2017/01/10 PHP
PHP写API输出的时用echo的原因详解
2019/04/28 PHP
php实现统计IP数及在线人数的示例代码
2020/07/22 PHP
用jquery模仿的a的title属性(兼容ie6/7)
2013/01/21 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
2014/04/10 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
2015/02/13 Javascript
JavaScript判断按钮被点击的方法
2015/12/13 Javascript
原生js三级联动的简单实现代码
2016/06/07 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
2017/01/19 Javascript
Angular-UI Bootstrap组件实现警报功能
2018/07/16 Javascript
Angular异步变同步处理方法
2018/08/13 Javascript
vue单页缓存存在的问题及解决方案(小结)
2018/09/25 Javascript
基于JavaScript实现贪吃蛇游戏
2020/03/16 Javascript
如何运行Python程序的方法
2013/04/21 Python
Python实现在线程里运行scrapy的方法
2015/04/07 Python
Python上传package到Pypi(代码简单)
2016/02/06 Python
Tensorflow分类器项目自定义数据读入的实现
2019/02/05 Python
python3 assert 断言的使用详解 (区别于python2)
2019/11/27 Python
Python动态导入模块和反射机制详解
2020/02/18 Python
Application Cache未缓存文件无法访问无法加载问题
2014/05/31 HTML / CSS
台湾生鲜宅配:大口市集
2017/10/14 全球购物
初中生自我评价
2014/02/01 职场文书
党的群众路线教育实践方案
2014/05/11 职场文书
党员作风建设整改方案
2014/10/27 职场文书
水电工岗位职责
2015/02/14 职场文书
2016计算机专业毕业生自荐信
2016/01/28 职场文书
Java各种比较对象的方式的对比总结
2021/06/20 Java/Android
解析在浏览器地址栏输入一个URL后发生了什么
2021/06/21 Servers
Docker下安装Oracle19c
2022/04/13 Servers
ssh服务器拒绝了密码 请再试一次已解决(亲测有效)
2022/08/14 Servers