理解JavaScript表單的基礎知識，javascript表單

理解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值；

一、提交表單

提交表單的按鈕有三種：

<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;  }}

以上就是本文的全部內容，希望對大家的學習有所協助。

您可能感興趣的文章:

• JS中表單的使用小結
• Javascript和Java擷取各種form表單資訊的簡單一實例
• js校正表單後提交表單的三種方法總結
• jquery序列化form表單使用ajax提交後處理返回的json資料
• jquery自動將form表單封裝成json的具體實現
• js清空form表單中的內容樣本
• AngularJS實現表單驗證
• JavaScript判斷表單提交時哪個radio按鈕被選中的方法
• JavaScript擷取表單內所有元素值的方法