理解JavaScript表單的基礎知識_javascript技巧-js教程-PHP中文網

HTMLFormElement繼承了HTMLElement，它自己獨特的屬性和方法有：

acceptCharset:伺服器能夠處理的字元集，等價於HTML的accept-charset特性
action：接收請求的URL，等價於HTML中的action特性。
elements：表單中所有控制項的集合（HTMLCollection）
enctype：請求的編碼類型
length：表單中控制項的數量
method:要傳送的HTTP請求類型，通常是get或post
名稱：表單的名稱
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();
});

登入後複製

另外也可以透過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：

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

登入後複製

當使用者點選重設按鈕重設表單時，會觸發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：

<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属性隐藏了该字段，就会导致错误。

在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事件之外，所有的表单字段都支持下列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;
  }
}

登入後複製

以上就是本文的全部内容，希望对大家的学习有所帮助。