JavaScript实现表单元素的操作

一、forms[]; Form 表单对象

document.forms[] 是一个数组，包含了文档中所有的表单（

）。要引用单个表单，可以用 document.forms[x]，但是一般来说，人们都会这样做：在标记中加上“name="..."”属性，那么直接用 “document.<表单名>”就可以引用了。

1、属性

  • name 返回表单的名称，也就是属性。
  • action 返回/设定表单的提交地址，也就是属性。
  • method 返回/设定表单的提交方法，也就是属性。
  • target 返回/设定表单提交后返回的窗口，也就是属性。
  • encoding 返回/设定表单提交内容的编码方式，也就是属性。
  • length 返回该表单所含元素的数目。

enctype属性：编码方式

表单中的enctype参数用于设置表单信息提交的编码方式。具体语法如下:

 
 
 
 
参数说明:value的取值:
 
 
     
  
  • Test/plain:    以纯文本的形式传送
    •  
  
  • application/x-www-form-urlencoded :   默认的编码形式
    •  
  
  • multipart/form-data:    MIME编码，上传文件的表单必须选择该项
    •  
 
 
 
 
 
 
 
2、方法
 
 
     
  
  • reset() 重置表单。这与按下“重置”按钮是一样的。
    •  
  
  • submit() 提交表单。这与按下“提交”按钮是一样的。
    •  
 
 
 
 
 
 
 
3、事件
 
 
onreset; onsubmit。
 
 
 
 
二、表单元素
 
 
 
 
1、输入标记
 
 
输入标记是表单中最常用的标记之一。常用的文本域、按钮等都使用这个标记。语法如下：
 
 
 
  


      


 
 
 
 
     
  
  • field_name:控件名称
    •  
  
  • type_name：控件类型
    •  
 
 
 
 
 
2、输入类控件的type可选值
 
 
     
  
  • text    文字域   
    •  
  
  • password    密码域，用户在页面输入时不显示具体的内容，以*代替  
    •  
  
  • radio    单选按钮   
    •  
  
  • checkbox    复选框  
    •  
  
  • button    普通按钮   
    •  
  
  • submit    提交按钮
    •  
  
  • reset    重置按钮
    •  
  
  • image    图像域，图像提交按钮
    •  
  
  • hidden    隐藏域，不显示在页面上，只将内容传递到服务器上
    •  
  
  • file    文件域
    •  
 
 
 
 
 
3、elements[]; Element 表单元素对象
 
 
<表单对象>.elements 是一个数组，包含了该表单所有的对象。一般我们不用该数组，而直接引用各个具体的对象。
 
 
Hidden 隐藏对象由“”指定。
 
 
属性
 
 
     
  
  • name 返回/设定用指定的元素名称。
    •  
  
  • value 返回/设定用指定的元素的值。
    •  
  
  • form 返回包含本元素的表单对象。
    •  
 
 
 
 
 
4、三个获取表单对象的方法
 
 
JavaScript实现表单元素的操作_第1张图片
 
 
注意：document.form[index]跟form.element[index]的原理一致，通过form表单在html文档的先后顺序来获取表单相应的表单对象。
 
 
下例列举了所有的表单元素，并把表达的相关操作都呈现出来
 
 
 
  



  
  


    

        

              

                    UserName:
[1]		
                    Password:
[2]:  		
                    Input Events[3]
 		
                    
                     [9]

                     [10]

                     [11]

                    		 
                

                

                    File:[4]
                

        

                    My Computer Peripherals:

                            [5]DVD Writer

                            [5]Printer

                            [5]cardReader
    
                        		
                        My Web Browser:

                             [6]Firefox

                             [6]IE

                             [6]Other
                         		
                     

                     

                         My Hobbies:[7]

                                
                            		
                            My Favorite Color:
[8]
                                    
                            		
                     

      

    


    

           

                 

                     Form Elements
                     [1]Text [2]Password  [3]textarea
                     [4]FielU [5]Checkbox
                    

                    

                        [6]Radio[7]select(list)select(menu)
                        [9]BUTTON[10]submit[11]Reste
                    

             

         

              


 
 
 
 
 
 
三、Button 按钮对象
 
 
由“”指定。引用一个 Button 对象，可以使用“<文档对象>.<表单对象>.<按钮名称>”。<按钮名称>指在标记中的“name="..."”属性的值。引用任意表单元素都可以用这种方法。
 
 
 
 
 
 
 
 
属性
 
 
     
  
  • 指定的元素名称。
    •  
  
  • value 返回/设定用指定的元素的值。
    •  
  
  • form 返回包含本元素的表单对象。
    •  
 
 
 
 
 
 
 
 
 
 
 
方法
 
 
     
  
  • blur() 从对象中移走焦点。
    •  
  
  • focus() 让对象获得焦点。
    •  
  
  • click() 模拟鼠标点击该对象。
    •  
 
 
 
 
 
 
 
 
 
 
 
事件
 
 
onclick; onmousedown; onmouseup
 
 
 
 
四、Checkbox 复选框对象
 
 
由“”指定。
 
 
属性
 
 
     
  
  • name 返回/设定用指定的元素名称。
    •  
  
  • value 返回/设定用指定的元素的值。
    •  
  
  • form 返回包含本元素的表单对象。
    •  
  
  • checked 返回/设定该复选框对象是否被选中。这是一个布尔值。
    •  
  
  • defaultChecked 返回/设定该复选框对象默认是否被选中。这是一个布尔值。
    •  
 
 
 
方法
 
 
     
  
  • blur() 从对象中移走焦点。
    •  
  
  • focus() 让对象获得焦点。
    •  
  
  • click() 模拟鼠标点击该对象。
    •  
 
 
 
事件
 
 
onclick
 
 
 
 
五、Password 密码输入区对象
 
 
由“”指定。
 
 
属性
 
 
     
  
  • name 返回/设定用指定的元素名称。
    •  
  
  • value 返回/设定密码输入区当前的值。
    •  
  
  • defaultValue 返回用指定的默认值。
    •  
  
  • form 返回包含本元素的表单对象。
    •  
 
 
 
方法
 
 
     
  
  • blur() 从对象中移走焦点。
    •  
  
  • focus() 让对象获得焦点。
    •  
  
  • select() 选中密码输入区里全部文本。
    •  
 
 
 
事件
 
 
onchange
 
 
 
 
六、Radio 单选域对象
 
 
 标签定义了表单单选框选项， 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
 
 
checked属性 表示是否被默认选择
 
 
 
  
学生：
        男孩
        女孩
 
 
 
 
由“”指定。一组 Radio 对象有共同的名称（name 属性），这样的话，document.formName.radioName 就成了一个数组。
 
 
要访问单个 Radio 对象就要用：document.formName.radioName[x]。
 
 
 
 
单个 Radio 对象的属性
 
 
     
  
  • name 返回/设定用指定的元素名称。
    •  
  
  • value 返回/设定用指定的元素的值。
    •  
  
  • form 返回包含本元素的表单对象。
    •  
  
  • checked 返回/设定该单选域对象是否被选中。这是一个布尔值。
    •  
  
  • defaultChecked 返回/设定该对象默认是否被选中。这是一个布尔值。
    •  
 
 
 
方法
 
 
     
  
  • blur() 从对象中移走焦点。
    •  
  
  • focus() 让对象获得焦点。
    •  
  
  • click() 模拟鼠标点击该对象。
    •  
 
 
 
事件
 
 
onclick
 
 
 
 
七、Reset 重置按钮对象
 
 
由“”指定。因为 Reset 也是按钮，所以也有 Button 对象的属性和方法。至于“onclick”事件，一般用 Form 对象的 onreset 代替。
 
 
 
 
八、Select 选择区（下拉菜单、列表）对象
 
 
菜单列表类的控件
            
             
  
 
 
 
1、属性
 
 
     
  
  • name 返回/设定用指定的元素名称。
    •  
  
  • length 返回 Select 对象下选项的数目。
    •  
  
  • selectedIndex 返回被选中的选项的下标。这个下标就是在 options[] 数组中该选项的位置。如果 Select 对象允许多项选择，则返回第一个被选中的选项的下标。
    •  
  
  • form 返回包含本元素的表单对象。
    •  
 
 
 
2、方法
 
 
     
  
  • blur() 从对象中移走焦点。
    •  
  
  • focus() 让对象获得焦点。
    •  
 
 
 
3、事件
 
 
onchange
 
 
 
 
4、操作select控件
 
 
新增、修改、删除、选中、清空、判断存在等
 
 
1、判断select选项中 是否存在Value=”paraValue”的Item
 
 
 
  
function jsselectisexititem(objselect,objitemvalue)
{
    var isexit = false;
    for(var i=0;i 
 
 
 
2、向select选项中加入一个Item
 
 
 
  
function jsadditemtoselect(objselect,objitemtext,objitemvalue)
{
    //判断是否存在
    if(jsselectisexititem(objselect,objitemvalue))
    {
       alert("该item的value值已经存在");
    }
    else
    {
       var varitem = new option(objitemtext,objitemvalue);
       //      objselect.options[objselect.options.length] = varitem;
       objselect.options.add(varitem);
       alert("成功加入");
    }    
}
 
 
 
 
3、从select选项中删除一个Item
 
 
 
  
function jsremoveitemfromselect(objselect,objitemvalue)
{
    //判断是否存在
    if(jsselectisexititem(objselect,objitemvalue))
    {
      for(var i=0;i 
 
 
 
4、删除select中选中的项
 
 
 
  
function jsRemoveSelectedItemFromSelect(objSelect)
{ 
    var length = objSelect.options.length - 1;   
    for(var i = length; i >= 0; i—){      
      if(objSelect[i].selected == true){  
        objSelect.options[i] = null;  
      }
   }
}
 
 
 
 
5、修改select选项中 value=”paraValue”的text为”paraText”
 
 
 
  
function jsupdateitemtoselect(objselect,objitemtext,objitemvalue)
{
    //判断是否存在
    if(jsselectisexititem(objselect,objitemvalue))
    {
      for(var i=0;i 
 
 
 
6、设置select中text=”paraText”的第一个Item为选中
 
 
 
  
function jsselectitembyvalue(objselect,objitemtext)
{    
    //判断是否存在
    var isexit = false;
    for(var i=0;i 
 
 
 
7、设置select中value=”paraValue”的Item为选中
 
 
 
  
document.all.objSelect.value = objItemValue;
 
 
 
 
8、得到select的当前选中项的value
 
 
 
  
var currSelectValue = document.all.objSelect.value;
 
 
 
 
9、得到select的当前选中项的text
 
 
 
  
var currselecttext = document.all.objselect.options[document.all.objselect.selectedindex].text;
 
 
 
 
10、得到select的当前选中项的Index
 
 
 
  
var currSelectIndex = document.all.objSelect.selectedIndex;
 
 
 
 
11、清空select的项
 
 
 
  
document.all.objSelect.options.length =0;
 
 
 
 
 
 
九、options[]; Option 选择项对象
 
 
options[] 是一个数组，包含了在同一个 Select 对象下的 Option 对象。Option 对象由“指定。因为 Submit 也是按钮，所以也有 Button 对象的属性和方法。至于“onclick”事件，一般用 Form 对象的 onsubmit 代替。
 
 
 
 
十一、Text 文本框对象
 
 
由“”指定。Password 对象也是 Text 对象的一种，所以 Password 对象所有的属性、方法和事件，Text 对象都有。
 
 
 
 
十二、Textarea 多行文本输入区对象
 
 
在HTML中还有一种特殊定义的文本样式，称为文本域 
 
 
 
由“