javascript网页特效——控制表单控件

最新推荐文章于 2022-07-04 21:02:41 发布

find面码

最新推荐文章于 2022-07-04 21:02:41 发布

阅读量472

点赞数

CC 4.0 BY-SA版权

分类专栏：学习记录文章标签： javascript 表单

本文链接：https://blog.youkuaiyun.com/gemingzhu/article/details/52497134

学习记录专栏收录该内容

37 篇文章

订阅专栏

本文介绍了如何使用JavaScript来操作网页表单控件，包括遍历所有控件、访问特定控件、获取文本框数量、修改表单提交方法、动态设定表单动作属性、选择聚焦控件、初始化控件值、批量添加说明、使用隐藏控件添加参数、全选复选框以及设置焦点控件样式等实用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

遍历表单的所有控件

<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>