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中使用css需要注意的地方小结
Sep 01 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
Sep 23 Javascript
window.onload追加函数使用示例
Mar 03 Javascript
JavaScript中getUTCMinutes()方法的使用详解
Jun 10 Javascript
JS实现设置ff与ie元素绝对位置的方法
Mar 08 Javascript
使用jQuery UI库开发Web界面的简单入门指引
Apr 22 Javascript
jQuery验证插件validate使用详解
May 11 Javascript
整理关于Bootstrap排版的慕课笔记
Mar 29 Javascript
通过js修改input、select默认字体颜色
Apr 19 Javascript
使用重写url机制实现验证码换一张功能
Aug 01 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
Aug 23 Javascript
基于Axios 常用的请求方法别名(详解)
Mar 13 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读取XML值的代码(推荐)
2011/01/01 PHP
php学习笔记之 函数声明
2011/06/09 PHP
有关php运算符的知识大全
2011/11/03 PHP
解析php入库和出库
2013/06/25 PHP
php分页代码学习示例分享
2014/02/20 PHP
PHP中字符与字节的区别及字符串与字节转换示例
2016/10/15 PHP
在php7中MongoDB实现模糊查询的方法详解
2017/05/03 PHP
php把字符串指定字符分割成数组的方法
2018/03/12 PHP
JavaScript基本对象
2007/01/11 Javascript
jQuery的强大选择器小结
2009/12/27 Javascript
innerText 使用示例
2014/01/23 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
2014/12/12 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
2014/12/15 Javascript
jQuery中 prop() attr()使用详解
2015/05/19 Javascript
node中Express 动态设置端口的方法
2017/08/04 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
2018/04/01 Javascript
使用webpack3.0配置webpack-dev-server教程
2018/05/29 Javascript
微信小程序canvas开发水果老虎机的思路详解
2020/02/07 Javascript
Vue $attrs &amp; inheritAttr实现button禁用效果案例
2020/12/07 Vue.js
简单的Apache+FastCGI+Django配置指南
2015/07/22 Python
Python之Scrapy爬虫框架安装及使用详解
2017/11/16 Python
Python实现简单文本字符串处理的方法
2018/01/22 Python
Python代理IP爬虫的新手使用教程
2019/09/05 Python
Scrapy项目实战之爬取某社区用户详情
2020/09/17 Python
CSS3实现同时执行倾斜和旋转的动画效果
2016/10/27 HTML / CSS
浅谈cookie和localStorage那些事
2019/08/27 HTML / CSS
移动端html5 meta标签的神奇功效
2016/01/06 HTML / CSS
人力资源部门的主要职能
2014/02/22 职场文书
青年文明号服务承诺
2014/03/31 职场文书
咖啡店创业计划书
2014/08/15 职场文书
活动总结格式
2014/08/30 职场文书
假释思想汇报范文
2014/10/11 职场文书
领导班子对照检查剖析材料
2014/10/13 职场文书
2015大学自主招生自荐信范文
2015/03/04 职场文书
QT连接MYSQL数据库的详细步骤
2021/07/07 MySQL
详解在SQLPlus中实现上下键翻查历史命令的功能
2022/03/18 SQL Server