JS document form表单元素操作完整示例


Posted in Javascript onJanuary 13, 2020

本文实例讲述了JS document form表单元素操作。分享给大家供大家参考,具体如下:

<html>
    <head>
        <title>form表单操作</title>
        <meta charset="UTF-8"/>
        <script type="text/javascript">
            function testForm(){
//                获取form对象  方法一,通过id,比较普遍的方法
                var fm=document.getElementById("fm");
                alert(fm);    //输出fm的类型[object HTMLFormElement]
                alert(fm.length);  //输出所用的表单项(表单类型参考Lgin.html)输出值为8
//                获取form对象   方法二,通过name,算是一个特殊的的方法
           var frm=document.frm;
           alert(frm);
                alert(frm.length);
                alert(fm===frm);   //返回值为true,其无论是类型还是内容都是一样的,其本来就是同一个对象
            }
            function testOper(){
                var fm=document.getElementById("fm");
//                输出表单的元素
//                alert(fm.elements);   //显示表单元素的类型[object HTMLFormControlsCollection]
//                alert(fm.elements.length);  //显示表单元素的个数
//                利用表单的action属性进行访问地址的动态改变
                fm.action="http://www.baidu.com";
                alert(fm.action);       //返回了action的值
//                利用表单的submit属性使普通的按钮也具有提交功能
//                fm.submit();    //可以直接访问修改后的网址
//                alert(fm.submit());   //执行了submit操作并且返回了undefined
            }
            function testCheck(){
//                获取checkbox的对象
                var fav=document.getElementsByName("fav");//通过Id无法获取,但是通过Name
//                实现选中遍历打印操作
                for(var i=0;i<fav.length;i++){
                    if(fav[i].checked){     //
                        alert(fav[i].value);   //其中fav没有值,但是fav.value有值,无法打印fav,但是可以打印fav.value
                    }
                }
            }
//            实现全选操作
            function checkBoxselect(){
                var fav=document.getElementsByName("fav");
                for(var i=0;i<fav.length;i++){
                        fav[i].checked=true;
                }
            }
//            实现清空选择操作
            function checkBoxclear(){
                var fav=document.getElementsByName("fav");
                for(var i=0;i<fav.length;i++){
                    fav[i].checked=false;
                }
            }
//            实现反选操作
            function checkBoxchange(){
                var fav=document.getElementsByName("fav");
                for(var i=0;i<fav.length;i++){   //=是赋值符==和===才是判断符
                    if(fav[i].checked){
                        fav[i].checked=false;
                    }else{
                        fav[i].checked=true;
                    }
                }
            }
            function selectoper(){
//                获取单选框对象
                var sel=document.getElementById("Animation");
//                获取单选框内的选项
                var os=sel.options;
                for(var i=0;i<os.length;i++){
                    if(os[i].selected){
                        alert(os[i].value+":"+os[i].text);
                    }
                }
            }
        </script>
    </head>
    <body>
        <h3>form表单操作</h3>
        <!--添加readonly表示标签只能读,添加disabled标签表示该标签不能进行任何操作-->
        <input type="button" name="" id="" value="测试form表单" onclick="testForm()" />
        <input type="button" name="" id="" value="测试form表单基本操作" onclick="testOper()" />
        <input type="button" name="" id="" value="测试form表单checkbox" onclick="testCheck()" />
        <input type="button" name="" id="" value="测试form表单checkbox全择" onclick="checkBoxselect()" />
        <input type="button" name="" id="" value="测试form表单checkbox清空选择" onclick="checkBoxclear()" />
        <input type="button" name="" id="" value="测试form表单checkbox反选" onclick="checkBoxchange()" />
        <input type="button" name="" id="" value="测试form表单select操作" onclick="selectoper()" />
        <hr />
        <form action="#" method="get" id="fm" name="frm" target="_blank">
            <b>用户名</b><input type="text" name="wd" id="" value="" disabled="disabled" /><br /><br />
               <b>密码</b><input type="password" name="pwd" id="" value="" readonly="readonly"/><br />
            <br />
            爱好 <br />
            动漫<input type="checkbox" name="fav" id="fav" value="动漫" checked="false"/><br />
            游戏<input type="checkbox" name="fav" id="fav" value="游戏" checked="false"/><br />
            电影<input type="checkbox" name="fav" id="fav" value="电影" checked=""true/><br />
            敲代码<input type="checkbox" name="fav" id="fav" value="敲代码" checked="false"/><br />
            <br /><br />
            <select name="" id="Animation">
                <option value="">clannad</option>
                <option value="">花开物语</option>
                <option value="">未闻花名</option>
                <option value="">四月是你的谎言</option>
            </select>
            <br /><br />
            <input type="submit" name="" id="" value="登录" />
        </form>
    </body>
</html>

运行效果:

JS document form表单元素操作完整示例

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
拖动Html元素集合 Drag and Drop any item
Dec 22 Javascript
扩展easyui.datagrid,添加数据loading遮罩效果代码
Nov 02 Javascript
jquery判断至少有一个checkbox被选中的方法
Jun 05 Javascript
jQuery仿京东商城楼梯式导航定位菜单
Jul 25 Javascript
JS实现的系统调色板完整实例
Dec 21 Javascript
jQuery实现文字自动横移
Jan 08 Javascript
原生javascript实现读写CSS样式的方法详解
Feb 20 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
Apr 12 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
Sep 18 Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
Oct 16 Javascript
pm2 部署 node的三种方法示例
Oct 20 Javascript
layui form表单提交之后重新加载数据表格的方法
Sep 11 Javascript
JS校验与最终登陆界面功能完整示例
Jan 13 #Javascript
vue+vant实现商品列表批量倒计时功能
Jan 13 #Javascript
JS表格的动态操作完整示例
Jan 13 #Javascript
JavaScript实现模态对话框实例
Jan 13 #Javascript
JS动态图片的实现方法完整示例
Jan 13 #Javascript
js实现拖动缓动效果
Jan 13 #Javascript
Vue.js中的高级面试题及答案
Jan 13 #Javascript
You might like
谷歌音乐搜索栏的提示功能php修正代码
2011/05/09 PHP
php异常处理技术,顶级异常处理器
2012/06/13 PHP
php实现的DateDiff和DateAdd时间函数代码分享
2014/08/16 PHP
php计算函数执行时间的方法
2015/03/20 PHP
PHP查询附近的人及其距离的实现方法
2016/05/11 PHP
PHP中抽象类,接口功能、定义方法示例
2019/02/26 PHP
php7 错误处理机制修改实例分析
2020/05/25 PHP
datePicker——日期选择控件(with jquery)
2007/02/20 Javascript
网页开发中的容易忽略的问题 javascript HTML中的table
2009/04/15 Javascript
基于jquery的给文章加入关键字链接
2010/10/26 Javascript
面向对象的Javascript之三(封装和信息隐藏)
2012/01/27 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
2014/04/14 Javascript
js判断上传文件类型判断FileUpload文件类型代码
2014/05/20 Javascript
JS控制弹出新页面窗口位置和大小的方法
2015/03/02 Javascript
javascript淘宝主图放大镜功能
2016/10/20 Javascript
Node.js的特点详解
2017/02/03 Javascript
浅谈键盘上回车按钮的js触发事件
2017/02/13 Javascript
JavaScript中利用构造器函数模拟类的方法
2017/02/16 Javascript
在Vue中使用echarts的实例代码(3种图)
2017/07/10 Javascript
基于ES6 Array.of的用法(实例讲解)
2017/09/05 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
2017/12/08 Javascript
原生JS实现简单的无缝自动轮播效果
2018/09/26 Javascript
webpack 从指定入口文件中提取公共文件的方法
2018/11/13 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
2019/10/29 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
2019/11/26 Javascript
你不知道的SpringBoot与Vue部署解决方案
2020/11/09 Javascript
python中set()函数简介及实例解析
2018/01/09 Python
利用pandas读取中文数据集的方法
2018/07/25 Python
Django model 中设置联合约束和联合索引的方法
2019/08/06 Python
解决pyshp UnicodeDecodeError的问题
2019/12/06 Python
Python操作Excel把数据分给sheet
2020/05/20 Python
IE9下html5初试小刀
2010/09/21 HTML / CSS
Baby Tulai澳大利亚:美国婴儿背带品牌
2018/10/15 全球购物
银行员工职业规划范文
2014/01/21 职场文书
大学迎新晚会主持词
2014/03/24 职场文书
React四级菜单的实现
2022/04/08 Javascript