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 相关文章推荐
JavaScript 特殊字符
Apr 05 Javascript
通过javascript获取iframe里的值示例代码
Jun 24 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
Feb 28 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
Mar 26 Javascript
JS与jQuery实现隔行变色的方法
Sep 09 Javascript
适用于手机端的jQuery图片滑块动画
Dec 09 Javascript
jQuery Position方法使用和兼容性
Aug 23 jQuery
React中上传图片到七牛的示例代码
Oct 10 Javascript
微信小程序商品详情页的底部弹出框效果
Nov 16 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
Apr 10 Javascript
原生js+css调节音量滑块
Jan 15 Javascript
JavaScript实现简易计算器小功能
Oct 22 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
《逃离塔科夫》——“萌新劝退,老手自嗨”的硬核FPS游戏
2020/04/03 其他游戏
PHP中strtotime函数使用方法分享
2012/01/10 PHP
PHP实现通过URL提取根域名
2016/03/31 PHP
php利用fsockopen GET/POST提交表单及上传文件
2017/05/22 PHP
详解PHP5.6.30与Apache2.4.x配置
2017/06/02 PHP
Joomla框架实现字符串截取的方法示例
2017/07/18 PHP
PHP实现用户异地登录提醒功能的方法【基于thinkPHP框架】
2018/03/15 PHP
javascript设计模式之中介者模式Mediator
2014/12/30 Javascript
javascript中闭包概念与用法深入理解
2016/12/15 Javascript
Vue from-validate 表单验证的示例代码
2017/09/26 Javascript
vue 中filter的多种用法
2018/04/26 Javascript
vue项目从node8.x升级到12.x后的问题解决
2019/10/25 Javascript
vue内置组件component--通过is属性动态渲染组件操作
2020/07/28 Javascript
[01:28]一分钟告诉你DOTA2 TI9不朽宝藏Ⅱ中有什么!
2019/07/09 DOTA
使用python装饰器验证配置文件示例
2014/02/24 Python
Python中的exec、eval使用实例
2014/09/23 Python
Python2中的raw_input() 与 input()
2015/06/12 Python
python线程池threadpool使用篇
2018/04/27 Python
python 字典修改键(key)的几种方法
2018/08/10 Python
Face++ API实现手势识别系统设计
2018/11/21 Python
pandas.cut具体使用总结
2019/06/24 Python
python中列表的切片与修改知识点总结
2019/07/23 Python
python为什么要安装到c盘
2020/07/20 Python
IE9对HTML5中部分属性不支持的原因分析
2014/10/15 HTML / CSS
html5生成柱状图(条形图)效果的实例代码
2016/03/25 HTML / CSS
米兰网婚纱礼服法国网上商店:Milanoo法国
2016/08/20 全球购物
Clarisonic美国官网:科莱丽声波洁面仪
2017/10/12 全球购物
New Balance天猫官方旗舰店:始于1906年,百年慢跑品牌
2017/11/15 全球购物
毕业实习个人鉴定范文
2013/12/10 职场文书
工程采购员岗位职责
2014/03/09 职场文书
大学生个人先进事迹材料范文
2014/05/03 职场文书
井冈山红色之旅心得体会
2014/10/07 职场文书
入党积极分子十八届四中全会思想汇报
2014/10/23 职场文书
助学感谢信范文
2015/01/21 职场文书
2015年后备干部工作总结
2015/05/15 职场文书
民警忠诚教育心得体会
2016/01/23 职场文书