JavaScript表单基础：HTMLFormElement属性、提交重置及字段事件详解

HTMLFormElement核心属性与方法

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值。

表单提交机制与防重复提交

一、提交表单

触发表单提交的按钮主要有三种类型。


<input type="submit" value="Submit Form">
<button type="submint">Submit Form</button>
<input type="image" src="">

通过上述按钮方式提交表单时，在浏览器向服务器发送请求前会触发submit事件。利用该事件可验证表单数据并决定是否允许提交，例如以下代码可阻止表单提交：


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

此外，也可通过JavaScript脚本调用submit()方法提交表单。需注意，直接调用此方法不会触发submit事件。


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

若首次提交表单后长时间未获响应，用户可能因不耐烦而多次点击提交按钮，导致重复提交。因此，应在首次提交后禁用提交按钮，或利用onsubmit事件阻止后续操作。


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

表单重置操作与事件处理

二、重置表单

重置表单应使用input或button元素。


<input type="reset" value = "Reset Form">
<button type="reset">Reset Form</button>

当用户点击重置按钮时，会触发reset事件。可在必要时取消重置操作，示例如下：


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

同样，通过JavaScript脚本调用reset()方法也可重置表单。与submit()不同，调用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。


<form id="myForm" name="myForm">
  <ul>
    <li><input type="radio" name="color" value="red">red</li>
    <li><input type="radio" name="color" value="yellow">yellow</li>
    <li><input type="radio" name="color" value="blue">blue</li>
  </ul>
  <button type="submint">Submit Form</button>
  <button type="reset">Reset Form</button>
</form>

当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属性隐藏，则调用focus()会导致错误。

在HTML5中，表单新增autofocus属性，可自动将焦点移动至相应字段。

autofocus属性示例如下：


<input type="text" name="lastName" autofocus>

或者检测是否已设置该属性，若未设置则调用focus()方法：


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

表单字段事件监听

共有的表单字段事件

除支持鼠标、键盘更改及HTML事件外，所有表单字段均支持以下三个事件：

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表单操作详解：属性、提交与字段控制