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>