Form 对象: Javascript 的 Form 对象代表了一个 HTML 表单, Form 对象通常可以作为 forms[] 数组的一个元素来使用,而这个数组是 Document 对象的一个属性。
document.forms[document.forms.length-1];// 引用文档的最后一个表单?
Form 对象的属性 elements[] 数组包含表示各种表单输入元素的 Javascript 对象 .
document.forms[1].ekement[2];// 引用文档的第二个表单的第三个元素?
Form 对象还包含其他属性,如 action 、 encoding 、 method 、 target ,直接对应于 HTML 标记 <form> 的属性 action 、 encoding 、 method 、 target ,这些属性都是可读可写的字符串。 Javascript 的 Form 对象支持 submit() 和 reset() 方法,分别用于提交表单和重置表单,对应的事件句柄为 onsubmit() 、 onreset() 。
?
HTML 表单元素
对象 |
HTML 标记 |
Type 属性 |
描述和事件 |
Button |
<input type=”button”> 或 <button type=”button”> |
“button” |
按钮;onclick |
Checkbox |
<input type=”checkbox” |
“checkbox” |
不具有单选行为的切换按钮;onclick |
File |
<input type=”file”> |
“file” |
用于输入要上载到web 服务器的文件名的输入框;onchange |
Hidden |
<input type=”hidden”> |
“hidden” |
随表单提交的数据,对用户不可见;没有事件句柄 |
Option |
<option> |
“option” |
Select 对象中的一个项目,事件句柄属于Select 对象,而不属于单独的option 对象 |
Password |
<input type=”password”> |
“password” |
输入口令的框,字符不可见;onchange |
Radio |
<input type=”radio”> |
“radio” |
具有单选按钮行为的切换按钮;onclick |
Reset |
<input type=”reset”> 或 <button type=”reset”> |
“reset” |
重置表单;onclick |
Select |
<select> |
“select-one” |
列表或下拉菜单,可选择一项;onchange |
Select |
<select multiple> |
“select-multiple” |
列表,可选多项 ;onchange |
Submit |
<input type=”submit”> 或 <button type=”submit”> |
“text” |
提交表单;onclick |
Text |
<input type=”text”> |
“text” |
单行文本输入框;onchange |
Textarea |
<textarea> |
“textarea” |
多行文本输入框;onchange |
?
脚本化表单元素:在 <form> 标记中定义了 name 属性,则当代表那个表单的 Form 对象被创建时,它除了会作为一个 Document 对象的数组 forms[] 元素倍存储外,还会被存储在一个 Document 对象的个人属性。
<form name= ” everything ” >
在 js 中可以通过如下方式引用:
document.everything document.forms[0] document.address.zipcode;// 引用 address 表单的 zipcode 项?
?
表单元素的属性: type , form , name , value
表单元素的事件句柄: onclick , onchange , onfocus , onblur (表单元素还支持几乎所有 HTML 元素支持的各种事件句柄,如 onmouseover )
?
按钮:超链接提供了与按钮作用一样的 onclick 事件句柄,任何按钮对象都可以用一个链接替换,只要该链接在被点击时进行与按钮被点击是相同的操作。在想使用与图形化的按钮类似的元素时,应该使用按钮;当 onclick 处理程序出发的动作可以被概念化为“沿着链接前进”时,应该使用链接。
?
切换按钮: checkbox 和 radio 元素,当用户点击时,会触发 onclick 事件和 onchange 事件(较新的 web 浏览器才支持)
?
文本框: text 元素、 textarea 元素、 password 元素
select 元素和 option 元素:当用户选中或取消一个选项时, select 元素将触发它的 onchange 事件,对于单选按钮,可读可写的 selectedIndex 用数字指定被选中的项;对于多选按钮,必须遍历 options[] 数组来确定哪些项被选中。
?
?
<!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" /> <title>包含所有表单元素的HTML表单</title> </head> <body> <form name="everything"> <table border="border" cellpadding="5"> <tr> <td>用户名:<br />[1]<input type="text" name="username" size="15" /></td> <td>密码:<br />[2]<input type="password" name="password" size="15" /></td> <td rowspan="4">输入事件[3]<br /> <textarea name="textarea" rows="20" cols="28"></textarea> </td> <td rowspan="4" align="center" valign="center"> [9]<input type="button" value="清除" name="clearbutton" /><br /> [10]<input type="submit" name="submitbutton" value="提交" /><br /> [11]<input type="reset" name="resetbutton" value="重置" /><br /> </td> </tr> <tr> <td colspan="2">文件名:[4]<input type="file" name="file" size="15" /></td> </tr> <tr> <td>我的计算机外部设备:<br /> [5]<input type="checkbox" name="extras" value="burner" />DVD Write<br /> [5]<input type="checkbox" name="extras" value="printer" />打印机<br /> [5]<input type="checkbox" name="extras" value="card" />读卡器<br /> </td> <td>我的浏览器:<br /> <input type="radio" name="browser" value="ie" />IE浏览器<br /> <input type="radio" name="browser" value="ff" />火狐浏览器<br /> <input type="radio" name="browser" value="other" />其他浏览器<br /> </td> </tr> <tr> <td>我的爱好:<br /> <select multiple="multiple" name="hobbers" size="4"> <option value="programming">编写JS</option> <option value="caffeine">喝咖啡</option> <option value="annoying">和朋友玩</option> </select> </td> <td align="center" valign="center">我最喜欢的颜色:<br /> <select name="color"> <option value="red">红色</option> <option value="blue">蓝色</option> <option value="violet">紫罗兰</option> </select> </td> </tr> </table> </form> <div align="center"> <table border=“4” bgcolor="pink" cellspacing="4"> <tr> <td align="center"><b>Form Element</b></td> <td>[1]Text</td> <td>[2]Psssword</td> <td>[3]Textarea</td> <td>[4]FileU</td> <td>[5]Checkbox</td> </tr> <tr> <td>[6]Radio</td> <td>[7]Select (list)</td> <td>[8]Select (menu)</td> <td>[9]Button</td> <td>[10]Submit</td> <td>[11]Reset</td> </tr> </table> </div> </body> <script type="text/javascript"> function report(element, event) { if ((element.type == "select-one") || (element.type == "select_multiple")) { value = " "; for(var i = 0; i < element.options.length; i++){ if (element.options[i].selected) value += element.options[i].value + " "; } } else if (element.type == "textarea") value += "..."; else value = element.value; var msg = event + ": " + element.name + "(" + value + ")\n"; var t = element.form.textarea; t.value = t.value + msg; } function addhandlers(f) { for(var i = 0; i < f.elements.length; i++) { var e = f.elements[i]; e.onclick = function() { report(this, "click"); } e.onchange = function() { report(this, "change"); } e.onfocus = function() { report(this, "foucs"); } e.onblur = function() { report(this, "blur"); } e.onselect = function() { report(this, "select"); } } f.submitbutton.onclick = function() { report(this, 'click'); return false; } f.clearbutton.onclick = function() { this.form.textarea.value = ''; report(this, 'click'); } f.resetbutton.onclick = function() { this.form.reset(); report(this, 'click'); return false; } } addhandlers(document.everything); </script> </html>
?
<!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" /> <title>为HTML表单添加表单验证</title> <style type="text/css"> input .invalid { background:#faa;} input .valid { background:#afa; } </style> </head> <body> <form> 名字:<input type="text" name="name" required /><br /> 邮箱:<input type="text" name="email" pattern="^\s*\w+@\w+\.\w+\s*$" /><br /> 邮编:<input type="text" name="zip" pattern="^\s*\d{6}\s*$" /><br /> 未通过验证:<input type="text" /><br /> <input type="submit" /> </form> </body> <script type="text/javascript"> //无干扰的javascript表单自动验证 (function() { if (window.addEventListener) window.addEventListener("load", init, false); else if (window.attachEvent) window.attachEvent("onload", init); function init() { for(var i = 0; i < document.forms.length; i++) { var f = document.forms[i]; var needsValidation = false; for(j = 0; j < f.elements.length; j++) { var e = f.elements[j]; if (e.type != "text") continue; var pattern = e.getAttribute("pattern"); var required = e.getAttribute("required") != null; if (required && !pattern) { pattern = "\\S"; e.setAttribute("pattern", pattern); } if (pattern) { e.onchange = validateOnChange; needsValidation = true; } } if (needsValidation) f.onsubmit = validateOnSubmit; } } function validateOnChange() { var textfield = this; var pattern = textfield.getAttribute("pattern"); var value = this.value; if (value.search(pattern) == -1) textfield.className = "invalid"; else textfield.className = "valid"; } function validateOnSubmit() { var valid = false; for(var i = 0; i < this.elements.length; i++) { var e = this.elements[i]; if (e.type == "text" && e.onchange == validateOnChange) { if (e.className == "invalid") invalid = true; } } if (invalid) { alert("表单未完成或存在错误的输入项,\n请修改高亮域后重试!"); return false; } } })(); </script> </html>?
?
?