笔记：JS权威指南18章—表单和表单元素

最新推荐文章于 2025-08-08 17:07:36 发布

原创最新推荐文章于 2025-08-08 17:07:36 发布 · 149 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #xhtml #ViewUI

Javascript 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了HTML表单在JavaScript中的操作方法，包括引用表单元素、使用Form对象的方法（submit、reset），以及如何通过事件监听实现表单元素的交互。此外，文章还展示了如何为HTML表单添加验证功能，确保输入符合特定规则。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 对象的个人属性。

在 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>