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 相关文章推荐
jquery form表单提交插件asp.net后台中文解码
Jun 12 Javascript
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
Nov 21 Javascript
使用Jquery打造最佳用户体验的登录页面的实现代码
Jul 08 Javascript
页面右下角弹出提示框示例代码js版
Aug 02 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
Aug 22 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
Oct 17 Javascript
JS简单实现点击复制链接的方法
Aug 03 Javascript
JS中对数组元素进行增删改移的方法总结
Dec 15 Javascript
bootstrap栅格系统示例代码分享
May 22 Javascript
javascript实现QQ空间相册展示源码
Dec 12 Javascript
详解使用angular框架离线你的应用(pwa指南)
Jan 31 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
Sep 09 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
PHP连接SQLServer2005 的问题解决方法
2010/07/19 PHP
php中关于普通表单多文件上传的处理方法
2011/03/25 PHP
php笔记之:php函数range() round()和list()的使用说明
2013/04/26 PHP
destoon网站转移服务器后搜索汉字出现乱码的解决方法
2014/06/21 PHP
PHP中exec与system用法区别分析
2014/09/22 PHP
PHP内核探索之解释器的执行过程
2015/12/22 PHP
动手学习无线电
2021/03/10 无线电
通过修改referer下载文件的方法
2008/05/11 Javascript
基于jQuery的一个扩展form序列化到json对象
2010/12/09 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
2011/04/27 Javascript
jQuery.extend 函数详解
2012/02/03 Javascript
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
2015/07/01 Javascript
js实现可折叠展开的手风琴菜单效果
2015/09/07 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
2015/11/30 Javascript
简单谈谈Vue 模板各类数据绑定
2016/09/25 Javascript
深入理解选择框脚本[推荐]
2016/12/13 Javascript
jQuery简单绑定单个事件的方法示例
2017/06/10 jQuery
详解React+Koa实现服务端渲染(SSR)
2018/05/23 Javascript
详解JavaScript中的函数、对象
2019/04/01 Javascript
vue 组件间的通信之子组件向父组件传值的方式
2020/07/29 Javascript
vue element ui validate 主动触发错误提示操作
2020/09/21 Javascript
python字符串替换的2种方法
2014/11/30 Python
Python内置模块hashlib、hmac与uuid用法分析
2018/02/12 Python
python调用百度REST API实现语音识别
2018/08/30 Python
Python函数中的可变长参数详解
2019/09/12 Python
Django中日期时间型字段进行年月日时分秒分组统计
2020/11/27 Python
HTML5 LocalStorage 本地存储详细概括(多图)
2017/08/18 HTML / CSS
应聘美工求职信
2013/11/07 职场文书
舞蹈毕业生的自我评价
2014/03/05 职场文书
保险公司早会主持词
2014/03/22 职场文书
2015年毕业生实习评语
2015/03/25 职场文书
2015年公共机构节能宣传周活动总结
2015/03/26 职场文书
幼儿园园务工作总结2015
2015/05/18 职场文书
国庆节主题班会
2015/08/15 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS
Java Redisson多策略注解限流
2022/09/23 Java/Android