如何理解JavaScript表单的基础知识

如何理解JavaScript表单的基础知识

　　HTMLFormElement继承了HTMLElement，它自己独有的属性和方法有：

　　acceptCharset:服务器能够处理的字符集，等价于HTML的accept-charset特性 action：接收请求的URL，等价于HTML中的action特性。 elements：表单中所有控件的集合（HTMLCollection） enctype：请求的编码类型 length：表单中控件的数量 method:要发送的HTTP请求类型，通常是get或post name：表单的名称 reset():将所有表单域重置为默认值 submit():提交表单 target:用于发送请求和接收响应的窗口名称；

　　取得form元素的引用可以是getElementById、也可以是document.forms中数值索引或name值；

　　一、提交表单

　　提交表单的按钮有三种：

　　Submit Form

　　以上面这种方法提交表单会在浏览器请求发送给服务器之前触发submit事件，这样就可以验证表单数据和决定是否允许提交表单，如下面的代码就可以阻止表单的提交：

　　var form = document.getElementById("myForm");form.addEventListener("submit", function () { event.preventDefault();});

　　另外也可以通过js脚本调用submit()方法提交表单，在调用submit()提交表单不会触发submit事件。

　　var form = document.getElementById("myForm");form.submit();

　　第一次提交表单后如果长时间没有回应，用户会变得不耐烦，往往多次点击提交按钮，导致重复提交表单，因此应该在第一次提交表单后就禁用提交按钮或利用onsubmit事件阻止后续操作。

　　var submitBtn = document.getElementById("submitBtn");submitBtn.onclick = function () { //处理表格和提交等等 submitBtn.disabled = true;};

　　二、重置表单

　　重置表单应该使用input或button：

　　Reset Form

　　当用户单击重置按钮重置表单时，会触发reset事件，可以在必要的时候取消重置操作：

　　var resetBtn = document.getElementById("resetBtn");resetBtn.addEventListener("reset", function () { event.preventDefault();});

　　另外也可以通过js脚本调用reset()方法重置表单，在调用reset()方法重置表单时会触发reset事件。

　　var form = document.getElementById("myForm");form.reset();

　　三、表单字段

　　每个表单都有一个elements属性，该属性是表单中所有表单（字段）的集合：

　　var form = document.forms["myForm"];var list = [];//取得表单中第一个字段var firstName = form.elements[0];list.push(firstName.name);//取得表单中名为lastName的字段var lastName = form.elements["lastName"];list.push(lastName.name);// 取得表单中包含的字段的数量var fieldCount = form.elements.length;list.push(fieldCount);console.log(list.toString()); //firstName,lastName,4

　　多个表单控件使用一个name（单选按钮），那么会返回以该name命名的NodeList：

　　name都是color，在访问elements["color"]时，返回NodeList：

　　var list = [];var form = document.forms["myForm"];var radios = form.elements["color"];console.log(radios.length) //3

　　共有的表单字段属性

　　disabled: 布尔值，表示当前字段是否被禁用； form: 指向当前字段所属表单的指针：只读； name: 当前字段的名称； readOnly: 布尔值，表示当前字段是否只读； tabIndex: 表示当前字段的切换（tab）序号； type: 当前字段的类型； value: 当前字段被提交给服务器的值。对文件字段来说，这个属性是只读的，包含着文件在计算机中的路径；

　　可通过submit事件在提交表单后禁用提交按钮，但不可以用onclick事件，因为onclick在不同浏览器中有“时差”；

　　共有表单字段方法

　　focus(): 激活字段，使其可以响应键盘事件； blur(): 失去焦点，触发；使用的场合不多；

　　可以在侦听页面的load事件上添加该focus()方法：

　　window.addEventListener("load", function () { document.forms["myForm"].elements["lastName"].focus();});

　　需要注意，第一个表单字段是input，如果其type特性为“hidden”，或者css属性的display和visibility属性隐藏了该字段，就会导致错误。

　　在HTML5中，表单中新增加了autofocus属性，自动把焦点移动到相应字段。

　　autofocus

　　如：

　　或者检测是否设置了该属性，没有的话再调用focus()方法：

　　window.addEventListener("load", function () { var form = document.forms["myForm"]; if (form["lastName"].autofocus !== true) { form["lastName"].focus(); };});

　　共有的表单字段事件

　　除了支持鼠标键盘更改和HTML事件之外，所有的表单字段都支持下列3个事件：

　　blur： 当前字段失去焦点时触发；

　　change：input元素和textarea元素，在它们失去焦点且value值改变时触发；select元素在其选项改变时触发（不失去焦点也会触发）；

　　focus：当前字段获得焦点时触发；

　　如：

　　var form = document.forms["myForm"];var firstName = form.elements["firstName"];firstName.addEventListener("focus", handler);firstName.addEventListener("blur", handler);firstName.addEventListener("change", handler);function handler() { switch (event.type) { case "focus": if (firstName.style.backgroundColor !== "red") { firstName.style.backgroundColor = "yellow"; }; break; case "blur": if (event.target.value.length < 1) { firstName.style.backgroundColor = "red"; } else { firstName.style.backgroundColor = ""; }; break; case "change": if (event.target.value.length < 1) { firstName.style.backgroundColor = "red"; } else { firstName.style.backgroundColor = ""; }; break; }}

【如何理解JavaScript表单的基础知识】相关文章：

如何调试javascript脚本呢07-19

javascript跨域访问的方法07-19

少儿绘画基础知识:如何教孩子画画04-19

商务礼仪的基础知识 礼仪基础知识05-04

国画基础知识02-18

网球基础知识07-11

健身的基础知识09-09

京剧的基础知识05-28

显卡基础知识07-16

美术基础知识总结03-15