表单事件实际上就是对元素获得或失去焦点的动作进行控制。可以利用表单事件来改变获得或失去焦点的元素样式，这里所指的元素可以是同一类型，也可以是多个不同类型的元素。
获取焦点与失去焦点事件
获得焦点事件(onfocus) 是当某个元素获得焦点时触发事件处理程序。失去焦点事件(onblur)是当前元素失去焦点时触发事件处理程序。在一般情况下，这两个事件是同时使用的。
例子：文本框获得焦点时改变背景颜色
在用户选择页面中的文本框时，改变文本框的背景颜色，当选择其他文本框时，将失去焦点的文本框背景颜色恢复原始状态。
<html><head><meta charset="utf-8"><title></title><script type="text/javascript">function txtfocus(event){ //当前元素获得焦点var e=window.event;var obj=e.srcElement; //用于获取当前对象的名称obj.style.background="#FFFF66";}function txtblur(event){ //当前元素失去焦点var e=window.event;var obj=e.srcElement; //用于获取当前对象的名称obj.style.background="#FFFFFF";}</script></head><body ><table align="center" width="400px" height="300px" border="1px"><tr><td width="100px">user:</td><td><form name="form1" method="post"><input type="text" onfocus="txtfocus()" onblur="txtblur()" /></form></td></tr><tr><td width="100px">password:</td><td><form name="form2" method="post"><input type="text" onfocus="txtfocus()" onblur="txtblur()" /></form></td></tr><tr><td width="100px">name:</td><td><form name="form3" method="post"><input type="text" onfocus="txtfocus()" onblur="txtblur()" /></form></td></tr><tr><td width="100px">sex:</td><td><form name="form4" method="post"><input type="text" onfocus="txtfocus()" onblur="txtblur()" /></form></td></tr></table> </body>
</html>
失去焦点修改事件
失去焦点修改事件(onchange)是当前元素失去焦点并且元素的内容发生改变时触发事件处理程序。该事件一般在下拉列表框中使用。
例子：用下拉列表框改变字体颜色
在用户选择下拉列表框中的颜色时，通过onchange事件来相应地改变文本框的字体颜色。
<html><head><meta charset="utf-8"><title></title><script type="text/javascript">function txtfocus(event){ //当前元素获得焦点var e=window.event;var obj=e.srcElement; //用于获取当前对象的名称obj.style.background="#FFFF66";}function txtblur(event){ //当前元素失去焦点var e=window.event;var obj=e.srcElement; //用于获取当前对象的名称obj.style.background="#FFFFFF";}function color(){var e=window.event;var obj=e.srcElement;form1.field1.style.color=obj.options[obj.selectedIndex].value;}</script></head><body ><table align="center" width="400px" height="300px" border="1px"><tr><td width="100px">user:</td><td><form name="form1" method="post"><input type="text" onfocus="txtfocus()" onblur="txtblur()" name="field1"/></form></td></tr><tr><td width="100px">password:</td><td><form name="form2" method="post"><input type="text" onfocus="txtfocus()" onblur="txtblur()" /></form></td></tr><tr><td width="100px">name:</td><td><form name="form3" method="post"><input type="text" onfocus="txtfocus()" onblur="txtblur()" /></form></td></tr><tr><td width="100px">sex:</td><td><form name="form4" method="post"><input type="text" onfocus="txtfocus()" onblur="txtblur()" /></form></td></tr></table><div align="center"><select name="menu1" onchange="color()"><option value="black">黑</option><option value="red">红</option><option value="blue">蓝</option><option value="purple">紫</option><option value="green">绿</option><option value="yellow">黄</option></select> </div> </body></html>
表单提交与重置事件
表单提交事件(onsubmit)是在用户提交表单时(通常使用“提交”按钮，也就是将按钮的type属性设为submit，在表单提交之前被触发，因此，该事件的处理程序通过返回false值来阻止表单的提交。该事件可以用来验证表单输入项的正确性。
表单重置事件(onreset) 与表单提交事件的处理过程相同，该事件只是将表单中各元素的值设为原始值。一般用于清空表单中的文本框。
