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

本文实例讲述了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>

运行效果:

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

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

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

(0)

相关推荐

  • JavaScript性能优化 创建文档碎片(document.createDocumentFragment)

    在浏览器中,我们一旦把节点添加到document.body(或者其他节点)中,页面就会更新并反映出这个变化,对于少量的更新,一条条循环插入也会运行很好,也是我们常用的方法.代码如下: 复制代码 代码如下: for(var i=0;i<5;i++){ var op = document.createElement("span"); var oText = document.createTextNode(i); op.appendChild(oText); document.body

  • JS document文档的简单操作完整示例

    本文实例讲述了JS document文档的简单操作.分享给大家供大家参考,具体如下: <html> <head> <title>js-documnent文档结构操作</title> <meta charset="UTF-8"/> <script type="text/javascript"> function testFile(){ // 获取元素 var showdiv=document.ge

  • 原生js操作checkbox用document.getElementById实现

    jquery与checkbox的checked属性的问题,讲的是控件<input type="checkbox"></input> 1.页面加载成功后,点击选中或取消选中该checkbox,checkbox属性里的checked属性不会根据该checkbox是否选中而变化 2.checkbox里的onchange或onclick方法里用jquery的attr方法获取checked是看得到的checked属性的值与它是否给钩上没有关系 3.使用document.g

  • JavaScript中的Document文档对象

    Document文档对象是JavaScript中window和frames对象的一个属性,是显示于窗口或框架内的一个文档.描述当前窗口或指定窗口对象的文档.它包含了文档从<head>到</body>的内容. 用法:document (当前窗口) 或 <窗口对象>.document (指定窗口) 属性: document.title //设置文档标题等价于HTML的<title>标签 document.bgColor //设置页面背景色 document.fg

  • JavaScript入门教程(9) Document文档对象

    描述当前窗口或指定窗口对象的文档.它包含了文档从<head>到</body>的内容. 用法:document (当前窗口) 或 <窗口对象>.document (指定窗口) 属性: document.title //设置文档标题等价于HTML的<title>标签 document.bgColor //设置页面背景色 document.fgColor //设置前景色(文本颜色) document.linkColor //未点击过的链接颜色 document.a

  • js获取元素到文档区域document的(横向、纵向)坐标的两种方法

    获取页面中元素到文档区域document的横向.纵向坐标的两种方法及其比较 在js控制元素运动的过程中,对于页面元素坐标位置的获取是经常用到的,这里主要总结下两种方法: 一:通过叠加元素对象和它的offsetParent(如果存在)的offsetLeft/offsetTop属性来实现 在阅读javascript高级程序设计第三版DOM部分时,了解到要获取某个元素在页面上的偏移量,需要将这个元素的offsetLeft和offsetTop与其offsetParent的相同属性相加,一直循环直至根元素

  • JavaScript——DOM操作——Window.document对象详解

    一.找到元素: docunment.getElementById("id"):根据id找,最多找一个:     var a =docunment.getElementById("id");将找到的元素放在变量中:     docunment.getElementsByName("name"):根据name找,找出来的是数组:     docunment.getElementsByTagName("name"):根据标签名找,找

  • JavaScript基础语法、dom操作树及document对象

    第一部分 基本语法: 1.数据类型(字符串.小数.整数.布尔.时间日期) 复制代码 代码如下: var s="3.14" var n=parsefloat(s) s+=5; var s="abc3.14" var n=parsefloat(s) //NaN s+=5;//解析转换成小数型 var d=parseInt(s)//解析转换成整数型 isNaN(字符串),判断是不是数字模样的字符串,是-false:否-true 2.变量 3.运算符:四大类 4.表达式(为

  • JavaScript 节点操作 以及DOMDocument属性和方法

    属性: 1Attributes 存储节点的属性列表(只读) 2childNodes 存储节点的子节点列表(只读) 3dataType 返回此节点的数据类型 4Definition 以DTD或XML模式给出的节点的定义(只读) 5Doctype 指定文档类型节点(只读) 6documentElement 返回文档的根元素(可读写) 7firstChild 返回当前节点的第一个子节点(只读) 8Implementation 返回XMLDOMImplementation对象 9lastChild 返回

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

    本文实例讲述了JS document form表单元素操作.分享给大家供大家参考,具体如下: <html> <head> <title>form表单操作</title> <meta charset="UTF-8"/> <script type="text/javascript"> function testForm(){ // 获取form对象 方法一,通过id,比较普遍的方法 var fm=d

  • JavaScript实现动态添加Form表单元素的方法示例

    本文实例讲述了JavaScript实现动态添加Form表单元素的方法.分享给大家供大家参考,具体如下: 之前写过类似的文章(如:javascript实现的动态添加表单元素input,button等),现在看来比较初级,弄一个高级的简单的 情景: 后台要上传游戏截图,截图数量不确定,因此使用动态添加input节点的方法去实现这个效果 主要用到的函数有: document.getElementById(); objNode.parentNode; objNode.cloneNode(); objNo

  • JS提交form表单实例分析

    本文实例讲述了JS提交form表单.分享给大家供大家参考,具体如下: 一.javascript 页面加裁时自动提交表单: Form表单: <form method="post" id="myform" action="a.php"> <input type="submit" value="提交表单"> </form> javascript 代码: <script t

  • jQuery实现form表单元素序列化为json对象的方法

    本文实例讲述了jQuery实现form表单元素序列化为json对象的方法.分享给大家供大家参考,具体如下: 这段代码序列化form表单元素为json对象: <!Doctype html> <html xmlns=http://www.w3.org/1999/xhtml> <head> <title>jQuery扩展--form序列化到json对象</title> <meta http-equiv=Content-Type content=&

  • JS组件Form表单验证神器BootstrapValidator

    本文为大家分享了JS组件Form表单验证神器BootstrapValidator,供大家参考,具体内容如下 1.初级用法 来看bootstrapvalidator的描述:A jQuery form validator for Bootstrap 3.从描述中我们就可以知道它至少需要jQuery.bootstrap的支持.我们首先引入需要的js组件: <script src="~/Scripts/jquery-1.10.2.js"></script> <sc

  • js的form表单提交url传参数(包含+等特殊字符)的两种解决方法

    方法一:(伪装form表单提交) linkredwin = function(A,B,C,D,E,F,G){ var formredwin = document.createElement("form"); formredwin.method = 'POST'; document.body.appendChild(formredwin); formredwin.action = "http://www.A.com/A.wiki?A=" +encodeURI(A) +

  • js提交form表单,并传递参数的实现方法

    //增加的函数 begin function queryFun(){ var type = $("#artType").val(); var hasInputed = "1";//表示输入了要搜索 的信息 if($("#query").val()=="选手姓名/编号"){ //表示没有输入要搜索的值 hasInputed="0"; } document.getElementById("queryF

  • js获取form表单所有数据的简单方法

    在HTML中用js获取通过GET.POST方法(就是在网址后加?a=b&c=d之类)传过来的表单值. 针对大家常用的获取表单方式,很多时候都是在重复的写一些代码,今天给大家贴出来的代码可以作为公用方法直接调用.可以提高大家的开发效率. Js代码 <script type="text/javascript"> //获取指定form中的所有的<input>对象 function getElements(formId) { var form = documen

  • js 提交form表单和设置form表单请求路径的实现方法

    如下所示: form表单ID:postform 设置表单请求url document.postform.action = "SaveReturnInfo"; 提交form表单 document.getElementById("postform").submit(); 以上就是小编为大家带来的js 提交form表单和设置form表单请求路径的实现方法全部内容了,希望大家多多支持我们~

随机推荐