JavaScript之表单基础知识(表单脚本)
2017-05-19 20:37
225 查看
表单的基础知识
在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>
也可以通过document.forms来获取页面中的所有表单。在这个集合中,通过数组索引或name值来获取引用。
<!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>时,
<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>
效果:
点击重置按钮,表单中的数据就会被重置。重置表单时,所有[b]字符段都会恢复到页面刚加载完的初始状态,也就是未动表单之前的状态。如果字符段初始值为空,则重置后为空,如果字符段初始值有默认的值,则重置后为默认的值。
[/b]
除了以上的方法重置表单外,还可以用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:指向当前字段所
d612
属表单的指针,只读。
name:当前字段的名称。
readOnly:布尔值,表示当前字段是否可读。
tabIndex:表示当前字段的切换(TAB)的序号。次序。
type:当前字段的类型。
value:当前字段的值,也就是将被提交到服务器的值。
除了form属性外,其它属性均可用JavaScript来修改。
<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()"表示输入的为非数字。
相关文章推荐
- 说说 JavaScript 表单脚本之基础知识
- 表单脚本基础知识
- 第十四章:表单脚本(表单的基础知识)
- JavaScript:表单基础知识
- JavaScript基础——表单脚本
- web前端脚本编程(一)--JavaScript脚本基础知识
- 理解JavaScript表单的基础知识
- JavaScript基础笔记(十)表单脚本
- 理解JavaScript表单的基础知识
- JavaScript基础——表单脚本
- JavaScript基础知识(四)
- JavaScript基础知识(一)
- JavaScript基础知识(六)
- JavaScript基础知识
- javascript学习中的一些心得(基础知识,高手免进)
- JavaScript基础知识
- Javascript & DHTML 实例编程(教程)基础知识
- Javascript & DHTML 实例编程(教程)基础知识
- JavaScript常用检测脚本(三)表单验证
- JavaScript脚本入门基础