JavaScript：表单基础知识

来源：互联网发布：百度慧眼数据编辑：程序博客网时间：2024/06/05 19:11

在HTML中表单是由<form>元素来表示的，而在JavaScript中，表单对应的则是HTMLFormELement有下列独有的属性和方法：

acceptCharset：服务器能够处理的字符集；

action：接受请求的URL；

elements：表单中所有空间的集合；

enctype：请求的编码类型；

length：表单中控件的数量；

method：要发送的http请求类型；

name：表单的名称；

reset()：将所有表单域重置为默认值；

submit()：提交表单；

target：用于发送请求和接收响应的窗口名称；

1、表单引用

var form=document.getElementById("from1");//取得id为from1的表单引用var firstForm=document.forms[0];//取得页面中的第一个表单var myForm=document.forms["form2"];//取得页面中名称为“form2”的表单

2、提交表单

用户点击提交按钮或者图像按钮时，就会提交表单。

<!--通用提交按钮--><input type="submit" value="Submit Form"><!--自定义提交按钮--><button type="submit" >Submit Form</button><!--图像按钮--><input type="image" src="submit.gif">

下列代码会阻止表单提交：

var form=document.getElementById("from1");//阻止表单提交EventUtil.addHandler(form,"submit",function(event){   event= EventUtil.getEvent(event);//取得事件对象   EventUtil.preventDefault(event);//阻止默认事件});//提交表单form.submit();

3、重置表单

var form=document.getElementById("from1");//阻止表单重置EventUtil.addHandler(form,"reset",function(event){    event= EventUtil.getEvent(event);//取得事件对象EventUtil.preventDefault(event);//阻止默认事件});//提交重置form.reset();

4、表单字段

每个表单都有elements属性，该属性是表单中所有表单元素（字段）的集合。这个elements集合是一个有序列表，其中包含着表单中的所有字段。

var form=document.getElementById("from1");var field1=form.elements[0];//取得表单中的第一个字段var field2=form.elements[“textbox1”];//取得名为“textbox1”的字段var fieldCount=form.elements.length;//取得表单中包含字段的数量

（1）、共有的表单字段属性

表单字段共有的属性如下：

disableed：布尔值，表示当前字段是否被禁用。

form：指向当前字段所属表单的指针；只读。

name：当前字段的名称。

readOnly：布尔值，表示当前字段是否只读。

tabIndex：表示当前字段的切换(tab)序号。

type：当前字段的类型，如“select-one”、“select-multiple”等

value：当前字段将被提交给服务器的值，对于文件字段来说，这个属性是只读的，包含着文件在计算机中的路径。

var form=document.getElementById("from1");var field=form.elements[0];//取得表单中的第一个字段//修改value的值field.value=“Another value”；//检查form属性的字，form指向当前字段所属表单的指针alert(field.form===form);//当前字段的名字alert(field.name);//把焦点设置到当前字段field.focus();//禁用当前字段field.disabled=true;//修改type属性（不推荐）field.type=“checkbox”//避免多次提交表单EventUtil.addHandler(form,"submit",function(event){    event= EventUtil.getEvent(event);//取得事件对象    var target=EventUtil.getTarget(event);//取得表单对象    var btn=target.elements[“submit-btn”];//取得提交按钮    btn.disabled=true;});

（2）、共有的表单字段方法

每个表单字段都有两个方法：focus()和blur()；下列是在页面加载完毕后，将焦点转移到表单中的第一个字段。

EventUtil.addHandler(window,"load",function(event){   document.forms[0].elements[0].focus();});

要注意的是，如果第一个表单字段是一个<input>元素，且其type特性的值为“hidden”，那么以上代码会导致错误。另外，如果使用css的display和visibility属性隐藏了该字段，同样也会导致错误。

HTML5为表单字段新增了一个autofocus属性。在支持这个属性的浏览器中，只要设置这个属性，不用JavaScript就能自动把焦点移动到相应字段。例如：

   <input type=“text” autofocus>

为了保证前面的代码在设置autofocus的浏览器正常运行，必须先检测是否设置了该属性，如果设置了，就不用调用focus()了。

<pre code_snippet_id="1781307" snippet_file_name="blog_20160724_5_560522" name="code" class="javascript" style="font-size: 14px;">EventUtil.addHandler(window,"load",function(event){   var element=document.forms[0].elements[0];   if(element.autofocus!==true){

    element.focus();

});

（3）、共有的表单字段事件

所有表单字段都支持下列三个事件：blur、change和focus。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="EventUtil.js"></script><title>表单脚本</title></head><body><form action="#" method="post" id="form" name="form"><input type="text" name="text" id="text"/><input type="submit" value="提交" /></form><script>var form=document.getElementById("form");var textbox=form.elements[0];//取得表单中的第一个字段EventUtil.addHandler(textbox,"focus",function(){    event=EventUtil.getEvent(event);var target=EventUtil.getTarget(event);if(target.style.backgroundColor!="red"){   target.style.backgroundColor="yellow";}});EventUtil.addHandler(textbox,"blur",function(){    event=EventUtil.getEvent(event);var target=EventUtil.getTarget(event);if(/[^\d]/.test(target.value)){//判断非数值字符target.style.backgroundColor="red"}else{    target.style.backgroundColor="";}});EventUtil.addHandler(textbox,"change",function(){    event=EventUtil.getEvent(event);var target=EventUtil.getTarget(event);if(/[^\d]/.test(target.value)){target.style.backgroundColor="red"}else{    target.style.backgroundColor="";}});</script></body></html>

0 0