本文介绍了HTML表单的基础知识，包括如何获取表单引用、提交表单、阻止表单提交、重置表单等内容。此外还讲解了如何通过JavaScript操作表单字段的属性、方法和事件。
表单的基础知识
在HTML中，表单用<form>元素来表示，在JavaScript中，表单用HTMLFormElement来表示，HTMLFormElement继承了HTMLElement。
获取表单的引用
取得表单的引用有多种方式，常见的就是通过ID来获取元素引用。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>
<form id="form1" name="form" action="" method="get">
<input id="input0" type="text"> <br>
<input id="input1" type="submit" value="提交">
</form>
<script>
/* 在此处书写javascript代码 */
//通过ID获取form元素
var form1 = document.getElementById("from1");
/*
通过document.forms获取所有表单，forms[0]为第一个表单
var firstForm = document.forms[0];
var myFrom = document.forms["form"]; //获取页面中名称为“form”的表单
*/
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>
<form id="form1" name="form" action="" method="get">
<input id="input0" type="text"> <br>
<input id="input1" type="submit" value="提交">
</form>
<script>
/* 在此处书写javascript代码 */
//通过ID获取form元素
//var form1 = document.getElementById("from1");
//通过document.forms获取所有表单，forms[0]为第一个表单
var firstForm = document.forms[0];
// var myFrom = document.forms["form"]; //获取页面中名称为“form”的表单
</script>
</body>
</html>
注：可以同时为表单指定ID和name。它们的值不一定相同。
提交表单
当用户单击提交按钮或图像按钮时，就会提交表单。使用<input>或<button>都可以定义按钮。使用<input>时，其type属性值为"submit"，使用图像按钮提交表单时，<input>的type属性值为"image"，src属性值为图像的路径。
当<input>的type属性为"submit"时，
<input id="input1" type="submit" value="提交">当<input>的type属性为"image"时，
<input id="imasub" type="image" src="smile.gif">
<button id="butt">确定</button>在JavaScript中编程调用submit()也能提交表单，这种方法无需包含按钮也能向服务器提交表单数据。
<body>
<form id="myForm" action="php.php" method="get">
姓名：<input type="text" name="name" size="20"><br>
<input type="button" onclick="formSubmit()" value="提交">
</form>
<script>
function formSubmit() {
var myForm = document.querySelector("#myForm");
myForm.submit();
}
</script>
</body>
这种方法与用户单击submit按钮一样可以提交表单，但是使用这种方法，表单的onsubmit事件处理程序不会被调用。
阻止submit事件，取消表单提交
点击提交按钮，浏览器会在将请求发送给服务器之前触发submit事件，这样就有机会验证表单数据，阻止表单这个事件的方法（即点击按钮提交表单），可以使用preventDefault方法。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>
<form id="form1" name="form" action="" method="get">
<input id="input0" type="text"> <br>
<input id="input1" type="submit" value="提交">
</form>
<script>
/* 在此处书写javascript代码 */
//通过ID获取input元素
var input1 = document.getElementById("input1");
//通过document.forms获取所有表单，forms[0]为第一个表单
//var firstForm = document.forms[0];
// var myFrom = document.forms["form"]; //获取页面中名称为“form”的表单
input1.onsubmit = function (event) {
event.preventDefault(); //阻止表单submit的默认行为
};
</script>
</body>
</html>
提交表单有个重大问题，那就是重复提交表单，如果页面长时间没有反应，那么用户可能会不耐烦，就会反复点击提交按钮，这样服务器会重复处理多次请求，或者造成错误，如果是在订单，那么可能造成订好几份。
解决这个问题有两个办法：
1、在第一次提交表单后，就禁用提交按钮。
2、用onsubmit事件处理程序取消后续的表单提交操作。
重置表单
在用户点击重置按钮时，表单数据会被重置，使用属性type为reset的<input>或<button>可以创建重置按钮。
<form id="myForm" action="php.php" method="get">
姓名：<input type="text" name="name" size="20" value="默认初始值"><br>
<input type="button" value="提交">
<!-- 重置按钮 -->
<input type="reset">
<button type="reset">button重置</button>
</form>
效果：
点击重置按钮，表单中的数据就会被重置。重置表单时，所有字符段都会恢复到页面刚加载完的初始状态，也就是未动表单之前的状态。如果字符段初始值为空，则重置后为空，如果字符段初始值有默认的值，则重置后为默认的值。
除了以上的方法重置表单外，还可以用rest()方法t来定义重置。
<body>
<form id="myForm" action="php.php" method="get">
姓名：<input type="text" name="name" size="20" value="默认初始值"><br>
<input type="button" onclick="formSubmit()" value="提交">
</form>
<script>
function formSubmit() {
var myForm = document.querySelector("#myForm");
//重置表单
myForm.reset();
}
</script>
</body>效果：
建议少用重置按钮，建议设置一个取消按钮，让用户返回前一个页面。
当用户点击重置按钮时，会触发reset事件。这时我们可以取消重置操作，也就是使用preventDefault()方法阻止重置操作。
表单字段（表单元素）
可以像访问页面中其它元素一样，使用DOM访问表单中的元素。每个表单有个elements属性，该属性是表单所有元素的集合，也就是表单字段的集合。它包含了表单的所有字符段，如：<input>、<textarea>、<button>、<fieldset>等。每个字符段（表单元素）在elements中的顺序与它们在标记中的顺序一致，通过elements返回的量NodeList。可以按照位置（索引）和name来访问它们，length属性可以得到字段的个数。
<body>
<form id="myForm" action="php.php" method="get">
<fieldset>
<legend>边框标题</legend>
<input type="text" name="name1" size="20" value="默认初始值">
<input id="text" type="text" name="name1" value="">
<button name="name1">提交按钮</button>
</fieldset>
</form>
<script>
var myForm = document.querySelector("#myForm");
//取得表单中的第一个字段
var field = myForm.elements[0]
console.log(field); //<fieldset></fieldset>
//取得name值为"name"的字段集合
var field2 = myForm.elements["name1"];
console.log(field2.length); //3 name值为"name"的字段个数。
//返回name值为"name"的第一个字段
console.log(field2[0]); //<input type="text">
console.log(field2[1]); //<input type="text">
console.log(field2[2]); //<button></button>
</script>
</body>
共有的表单字段属性
除了<fieldset>元素之外，所有表单字段都拥有相同的一组属性。由于<input>类型可以表示多种表单字段，因为有些属性只用于某些字段，一些字段是所有字段共有的。共有属性如下：
- disabled：布尔值，表示当前字段是否禁用。
- form：指向当前字段所属表单的指针，只读。
- name：当前字段的名称。
- readOnly：布尔值，表示当前字段是否可读。
- tabIndex：表示当前字段的切换（TAB）的序号。次序。
- type：当前字段的类型。
- value：当前字段的值，也就是将被提交到服务器的值。
<body>
<form id="myForm" action="php.php" method="get">
<fieldset>
<legend>边框标题</legend>
<input id="text" type="text" name="name1" value="默认值">
<button name="name1">提交按钮</button>
</fieldset>
</form>
<script>
var myForm = document.querySelector("#myForm");
//取得表单中的第二个字段
var field = myForm.elements[1]
//修改value属性的值
field.value="修改后的值";
//检查form属性
console.log(field.form);
//设置焦点
field.focus();
</script>
</body>
效果：
能够动态的修改表单字段属性，意味着我们可以随时以任何方式操作表单。例如，用户重复单击提交按钮，当涉及订单或银行卡消费时，重复点击按钮会将费用翻番。解决的办法就是：在第一次点击提交按钮后就禁用这个提交按钮。思路：侦听submit事件，并在该事件发生时禁用提交按钮即可。这样就只发生一次的提交操作，后续的提交操作被禁止了。
<body>
<form id="myForm" action="" method="get">
<fieldset>
<legend>边框标题</legend>
<input id="text" type="text" name="name1" value="默认值">
<button name="submit-btn">提交按钮</button>
</fieldset>
</form>
<script>
var myForm = document.querySelector("#myForm");
myForm.addEventListener("submit", function (e) {
var event = e.target;
//取得提交按钮
var btn = event.elements["submit-btn"];
//禁用提交按钮
btn.disabled = true;
});
</script>
</body>
以上代码为submit事件添加了一个事件处理程序。事件触发后，代码取得了提交按钮并将其disable设置为true，意味着之后禁用提交按钮。
注意，只能通过submit事件来禁用提交按钮。不能使用onclick事件处理程序来实现禁用，原因是不同浏览器的onclick程序存在时差，有的浏览器会先触发onclick事件程序，这样的话，意味着提交之前就禁用了提交按钮，结果永远都不会提交。因为最好通过submit事件处理程序来禁用提交按钮。
共有的表单字段方法
每个表单有有两个方法：focus()和blur()。
focus()方法表示将焦点设置到表单字段上，以激活表单字段，使其响应键盘事件。
例如，当页面加载完成后，将焦点转移到表单中的第一个字段。为此，可以侦听页面的load事件，并在该事件发生时在表单的第一个字段上调用focus()方法：
<body>
<form id="myForm" action="" method="get">
<input id="text" type="text" name="name1" value="默认值">
<button name="submit-btn">提交按钮</button>
</form>
<script>
window.onload = function (e) {
//当页面加载完成后，表单的第一个字段调用focus()方法
document.forms[0].elements[0].focus();
};
</script>
</body>
效果：
这里表单的第一个字段为<input>元素，因此当页面加载完成后，这个文本框获得了焦点。
注：如果表单的第一个字段是<input>元素，且其type的属性值为"hidden"，那么以上代码会出错，意味着找不到这个字段。同样的，如果对这个字段使用CSS的display和visibility属性隐藏了该字段，以上代码也会出错。因为隐藏了这个字段，那么以上代码就找不到了。
HTML5为表单字段新增了autofocus属性，意味着字段将自动获取焦点。autofocus属性的值是个布尔值，true表示获取焦点，false表示不获取焦点。
<input type="text" autofocus>为了保证以上代码在设置了autofocus属性的字段中也能运行，首先需对字段进行检测，确定这个字段是否设置了autofocus属性，如果设置了就无需调用focus()方法，如果没有设置这个属性，就需要调用focus()方法来获取焦点。
<body>
<form id="myForm" action="" method="get">
<input id="text" type="text" name="name1" value="默认值">
<button name="submit-btn">提交按钮</button>
</form>
<script>
window.onload = function (e) {
//获取表单的第一个字段
var element = document.forms[0].elements[0];
//判断该字段是否设置了autofocus属性
if (element.autofocus !== true) {
element.focus(); //如果没有设置，则调用focus()方法
console.log("JavaScript focus");
}
};
</script>
</body>
这段代码会返回"JavaScript focus"，意思就是说表单的第一个字段没有设置autofocus属性，那么该字段就调用focus()方法 获取焦点。如果这个字段设置了autofocus属性，那么当页面加载完成后，该字段就获取了焦点。
与focus()方法相对的就是blur()方法，这个方法表示字段失去焦点即把焦点从这个字段上移出。这个方法在字段获取了焦点的情况下使用才有效。
<body>
<form id="myForm" action="" method="get">
<input id="text" type="text" name="name1" value="默认值">
<button name="submit-btn">提交按钮</button>
</form>
<script>
window.onload = function (e) {
//获取表单的第一个字段
var element = document.forms[0].elements[0];
//判断该字段是否设置了autofocus属性
if (element.autofocus !== true) {
element.focus(); //设置焦点
element.blur(); //移出焦点
}
};
</script>
在以上代码中增加一行代码"element.blur()"，也就是移出焦点，那么表单中的第一个字段结果还是没有获取到焦点。因为即使通过focus()方法获取了焦点，同样也通过blur()方法移出了焦点，最后结果就是没有获取焦点。
共有的表单字段事件
除了了支持键盘、鼠标、HTML和更改事件外，表单字段不支持以下3类事件：
- blur：当前字段失去焦点时触发这个事件。
- focus：当前字段获取焦点时触发这个事件。
- change：对于<input>和<textarea>元素，在它们失去焦点且value值改变时触发（有焦点时，意味着文本正在输入）。对于<select>元素，只要选项改变就会触发，也就是说，不失去焦点也会触发。
通常focus和blur属性用于改变用户界面，要么给用户于视觉的提示，要么就向页面中新增功能。change属性通常用于验证用户输入的值是否符合某种规范（例如只能输入数字）。
我们假定一个文本框<texteara>，当文本框获取了焦点时背景颜色变成蓝色，当文本框失去焦点时恢复文本框的背景颜色，当用户向文本框输入纯数字时，恢复文本框颜色，当用户输入的值为非纯数字时，文本框背景颜色变成红色。
<body>
<form id="myForm" action="" method="get">
<textarea id="textbox" rows="10" cols="20"></textarea>
</form>
<script>
//获取表单中的文本框字段
var textbox = document.forms[0].elements[0];
//确定文本框是否获取了焦点,并设置相应颜色
textbox.addEventListener("focus", function (e) {
var element = e.target; //获取这个文本框这个目标
if (element.style.background != "orange") {
element.style.background = "blue";
}
});
//当失去焦点时，改变相应颜色
textbox.addEventListener("blur", function (e) {
var element = e.target;
if (/[^\d]/.test(element.value)) {
element.style.background = "red";
} else {
element.style.background = "";
}
});
textbox.addEventListener("change", function (e) {
var element = e.target;
if (/[^\d]/.test(element.value)) {
element.style.background = "red";
} else {
element.style.background = "";
}
});
</script>
</body>
效果：
这里为也检测用户所输入的内容是否为纯数字，运用了正则表达式，"[^\d].test()"表示输入的为非数字。
扫一扫
864
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
