首页 > 代码库 > JS的表单1

JS的表单1

2024-09-10 09:17:23   220人阅读

一、获得表单引用

  1. 通过直接定位的方式来获取

　　　　document.getElementById();
　　　　document.getElementsByName();
　　　　document.getElementsByTagName();

　　2.通过集合的方式来获取引用

　　　　document.forms[下标]
　　　　document.forms["name"]
　　　　document.forms.name

　　3.通过name直接获取“（只适用于表单）

　　　　document.name

二、获得表单元素的引用

　　1.直接获取
　　　　document.getElementById();
　　　　document.getElementsByName();
　　　　document.getElementsByTagName();

　　2.通过集合来获取
　　　　表单对象.elements 获得表单里面所有元素的集合
　　　　表单对象.elements[下标]
　　　　表单对象.elements["name"]
　　　　表单对象.elements.name
　　3.直接通过name的形式

　　　　表单对象.name

三、表单元素共同的属性和方法

　　1.获取表单元素的值
　　　　表单元素对象.value 获取或是设置值

　　2.属性
　　　　disabled 获取或设置表单控件是否禁用 true false

　　　　form 指向包含本元素的表单的引用

　　3.方法
　　　　blur()失去焦点
　　　　focus() 获得焦点

四、对表单对象进行操作
　　1、input radio

　　　　新建option：var opt = new Option("text", "value") 
　　2、select
　　　　删除option：form.select.remove(i)

 

 

下面是我的一些代码例子和代码的注释




<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <form  name="form"   id="form">
            <input  type="text"   id="text" value=""/>
            <input  type="text"   id="text" value=""/>
            <input  type="text"   id="text" value=""/>
            <input type="submit"  value="http://www.mamicode.com/提交"/>
            <select>
                <option>hfdhsif</option>
                <option>hfdhsif</option>
                <option>hfdhsif</option>
                <option>hfdhsif</option>
                <option>hfdhsif</option>                                
            </select>
                                
        </form>
        
        <script>
            
            //alert(document.getElementById("text").value);//在浏览器中才可以看到输出的效果
          //var  input=document.getElementById("text");
          //var fm=document.getElementById("form");
    
          //alert(fm.elements.length);//这里输出的是3
          //通过这个属性fm.elements可以遍历所有的表单
          //alert(fm.elements.value);//输出的内容不能被识别，因为有三个
                var  fm=document.getElementById("form");
//这里输出表单的所有的value
                 fm.onsubmit=function f(){//表单自带了一个onsubmit的作用
              for(var i=0;i<=this.elements.length;i++)
              {
                  //利用form的属性，elements,通过一个for的循环输出的表单中的所有的值
                  //注意的是匿名函数的格式的在最后的一个大括号是有；分号的
                  alert(this.elements[i].value);
              }
                  

   //这是可以验证表单是否被赋予一个值，

   for(var i=0;i<=this.elements.length;i++)
              {
                  //利用form的属性，elements,通过一个for的循环输出的表单中的所有的值
                  //注意的是匿名函数的格式的在最后的一个大括号是有；分号的
                  //alert(this.elements[i].value);
                  if(!this.elements.value){
                      alert("请填写完整！！！");
                      return 0;
                  
                  }
              }


 






              };//这是一个匿名的函数方法
             </script>                                               
    </body>
</html>




 
JS的表单1






























        

            
                
                  
                
                

                    联系

                    我们