javascript-表单操作

HTML表单是通过元素来定义的,它有以下特性

◦ method –表示浏览器发挞GET请求或是发送POST请求

◦ action – 表示表单所要提交到的地址URL

◦ enctype – 当向服务器端发送数据时，数据应该使用的编码方法，默认的是application/x-www-url-encoded,不过，如果上传文件，可以设置成multipart/form-data.

◦ accept – 当上传文件时，列出服务器能正确处理的mime类型

◦ accept-charset – 当提交数据时，列出服务器所能接受的字符编码

表单可以包含任意数目的输入元素

u –主要的HTML输入元素。通过type特性来判断是哪种输入控件

• text

• radio

• checkbox

• file

• password 密码框

• button 按钮

• submit 提交按钮

• Reset 重置

• Hidden 隐藏域

• image

• – 组合框与下拉列表框,里面的值由元素定义.

• –多行文本框，尺寸由rows和cols来定义

• 二、对form元素进行脚本编程

• 1、如何获取form表单

• var oForm = document.getElementById(“form1”)

• var oForm = document.forms[0]

• var oForm = document.forms[“form1”]

• 2、访问表单字段(利用name属性)

• var oField = oForm.elements[0];

• var oField = oForm.elements[“txtUser”]//通过id访问

• var oField = oForm.txtUser

• var oField = oForm[“txtUser”]

• 注：也可直接用document.getElementById(“txtUserID”);

表单字段的共性

所有表单字段（除hidden字段）,都包含同样的属性方法和事件

u disabled特性:用于获取或设置表单控件是否被禁用

u blur()方法，可以使表单字段失去焦点（将焦点移到他处）

u focus()方法，可以使表单获得焦点

例:

Var oFiled1 = oForm.elements[0];

Var oFiled2 = oForm.elements[1];

oField1.disabled = true; //禁用

oField2.focus();//获取焦点

alert(oField1.form == oForm); //output “true”

应用1:聚焦于第一个字段

注意：让form的第一个元素获取焦点的代码：

document.forms[0].elements[0].focus()

但此时，如果第一个字段是隐藏字段，则会出错

故代码应如下所示：

if (document.forms.length>0)

{

      for(var i=0;i<document.forms[0].elements.length;i++)   {

var oField = document.forms[0].elements[i];

if (oField.type!=”hidden”)

{

oField.focus();

return;}

}

}

应用2:提交表单

当用户点击一个按钮，无需其他编码，就可以提交表单，如果按回车，默认也认为是提交表单

可以在action中加入警告来检测表单是否提交

利用submit()方法来提交表单,如：

var oForm = document.Forms[0];

oForm.submit();

也可用按钮结合上述代码实现提交表单

} function go()

} {

} if (confirm(“你确实要提交吗？”))

} {

} document.forms[0].submit();

} }

} }

以上代码无论是否点击确定都会提交

正确代码：

function go()

{

  if (confirm("你确实要提交吗？")) {return true;  }else return false;}

} 应用3：重置表单

onreset事件，表单元素恢复到页面加载的状态

类似于提交按钮，reset也会触发form的onreset事件，可以在此处取消表单的重置.

同时，表单也有reset()方法，可以直接从脚本中重置表单，而无需使用重置按钮

} function resetform()

} {

} if (confirm(“你确实要重置表单吗？”))

} {

} return true;

} }else

} return false;

} }

表单的onsubmit事件：表单提交前会触发表单此事件,可以在此处进行表单的验证，并取消表单提交