极乐门资源网

JS document form表单元素操作完整示例
网络编程 2024/11/20 佚名
2 0
极乐门资源网 Design By www.ioogu.com

本文实例讲述了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 />
            &nbsp;&nbsp;&nbsp;<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.jb51.net/code/HtmlJsRun测试上述代码运行效果。

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

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

标签：
JS,document,form,表单元素
极乐门资源网 Design By www.ioogu.com
极乐门资源网 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
极乐门资源网 Design By www.ioogu.com

评论“JS document form表单元素操作完整示例”

暂无JS document form表单元素操作完整示例的评论...
www.ioogu.com 极乐门资源网
139,976影音资源
144,792福利资源
21,817软件资源
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
极乐门资源网 Design By www.ioogu.com