表單提供與使用者互動的基本介面，以 Web 的應用來說是不可或缺的功能，首先列出常見的表單問題，接著了解各種表單元素類型的用途、常規運算式等。
從歷史經驗得知，開發人員有時候建立沒有提交按鈕的表單，而是在表單元素值（例如選擇下拉選單）變化時提交。必須理解一點：如果這麼做的話，代表未啟用 JavaScript 的使用者就無法提交表單。
談到可存取性，表單應該始終存在一個有效的 action 屬性值，當未啟用 JavaScript 時，可讓表單資料通過一種實際的資源，在實際的網站中，建議必須始終建立一個備用的頁面，在使用者未啟用 JavaScript 時處理表單提交。
可以利用 JavaScript 動態修改 action 值：
為了阻止表單提交到伺服端的腳本，可以透過阻止預設事件行為的標準技術（出現在表單提交事件處理器中）：
可藉助 JavaScript 呼叫表單元素的
最後，在瀏覽器支援 HTML5 的情況下，它將根據輸入類型和指定的屬性執行驗證，這種驗證提供令人滿意的錯誤資訊，如果不使用 HTML5 或者瀏覽器不支援 HTML5，就得改用 DOM 操作和 CSS 提供具有吸引力的內嵌錯誤資訊。
為了完成所有必要的任務：建立的函數需要兩個參數：1.應用錯誤訊息的表單元素 id 以及2.錯誤訊息本身，接著加上一個包含資訊的 span 元素，並將其附加在目標元素之後。該函數必須為新的 span 指定一個 id 值，以便在重複呼叫時檢查 span 是否存在（如果已存在就沒有必要再產生），其他函數也能夠在合適的時候刪除錯誤訊息，該函數還為表單元素的標籤增加 error 類別。
將新增和刪除錯誤訊息製成一支獨立函數：
為了大幅降低使用者錯誤，最好在完成表單的同時，向使用者傳達期望的輸入，如果設計之初考慮到這一點，便可在表單元素的旁邊增加註解，但這種方法可能使頁面看上去很繁雜。
替代方案之一是藉助工具提示，工具提示依照需求顯示和消失，所以每次只會出現一種提示──用於目前正在處理的元素。
從設計和寫程式的角度來看，工具提示類似一種強制回應視窗，但是不會遮住頁面的其餘部分，一開始可用固定的 HTML 建立工具提示：
為達到可存取性的目的，最好將工具提示放到對應的元素標籤內，但是 span 在不支援 CSS 的瀏覽器中將被隱藏，所以這樣做反而使得工具提示沒有原來那麼醒目。注意，span 具有 tooltip 的類別，同時應用於 CSS 和 JavaScript：
現在 JavaScript 只需要在滑鼠移過對應的表單元素，或者元素取得焦點時改變工具提示的 visibility 屬性，因此建立一函數方便完成任務：
製作 showTooltip() 和 hideTooltip() 函數，它們都以一個事件作為參數，並以此事件動態修改元素的 visibility 屬性：
停用提交按鈕最常見的目的是避免無意間的多次提交，尤其在電子商務網站上，當表單作為付款流程一部份的情況下。
停用提交按鈕，主要是透過設定按鈕的 disabled 屬性為 disabled 或布林值 true 來完成：
作為附加功能，停用提交功能時，最好從視覺上為使用者指出這種變異和狀態：
參考 w3schools JavaScript Forms：http://www.w3schools.com/js/js_validation.asp
參考 w3schools JavaScript HTML Input Examples：http://www.w3schools.com/js/js_input_examples.asp
1一般表單考慮事項
處理表單提交的最佳途徑是為表單本身增加提交事件處理器，提交事件在使用者點擊提交事件或者按下 Enter/Return 鍵（適用於某些瀏覽器）時觸發，因此，監控提交事件是最可靠和最容易的方法。在極少數的情況下，我們可能希望在修改某些表單元素時驗證，但此舉應謹慎，因為 change 事件的發生頻率可能過高，不一定適合於廣泛的驗證。從歷史經驗得知，開發人員有時候建立沒有提交按鈕的表單，而是在表單元素值（例如選擇下拉選單）變化時提交。必須理解一點：如果這麼做的話，代表未啟用 JavaScript 的使用者就無法提交表單。
談到可存取性，表單應該始終存在一個有效的 action 屬性值，當未啟用 JavaScript 時，可讓表單資料通過一種實際的資源，在實際的網站中，建議必須始終建立一個備用的頁面，在使用者未啟用 JavaScript 時處理表單提交。
可以利用 JavaScript 動態修改 action 值：
document.getElementById('theForm').action = 'otherPage.php';
如此一來，就可以在提交表單時，讓啟用 JavaScript 的使用者進入與未啟用 JavaScript 的使用者不同的位置。為了阻止表單提交到伺服端的腳本，可以透過阻止預設事件行為的標準技術（出現在表單提交事件處理器中）：
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
return false;
返回 false 只在使用 DOM Level 0 方法建立事件處理器時有效；其他方法則適用於 DOM Level 2 事件處理器，分別是能使用 addEventListener() 的瀏覽器，以及無法使用的情況（也就是舊版的 IE）。可藉助 JavaScript 呼叫表單元素的
submit() 方法，強制表單的提交：
document.getElementById('theForm').submit();
最後，在瀏覽器支援 HTML5 的情況下，它將根據輸入類型和指定的屬性執行驗證，這種驗證提供令人滿意的錯誤資訊，如果不使用 HTML5 或者瀏覽器不支援 HTML5，就得改用 DOM 操作和 CSS 提供具有吸引力的內嵌錯誤資訊。
建立錯誤訊息
為了完成所有必要的任務：建立的函數需要兩個參數：1.應用錯誤訊息的表單元素 id 以及2.錯誤訊息本身，接著加上一個包含資訊的 span 元素，並將其附加在目標元素之後。該函數必須為新的 span 指定一個 id 值，以便在重複呼叫時檢查 span 是否存在（如果已存在就沒有必要再產生），其他函數也能夠在合適的時候刪除錯誤訊息，該函數還為表單元素的標籤增加 error 類別。
將新增和刪除錯誤訊息製成一支獨立函數：
//定義 addErrorMessage() 函數
function addErrorMessage(id, msg){
'use strict';
//取得表單元素
var elem = document.getElementById(id);
var newId = id + 'Error';
var span = document.getElementById(newId);
//檢查 span 的存在
if(span){
span.firstChild.value = msg; //即顯示錯誤訊息
}else{
span = document.createElement('span'); //建立一個元素
span.id = newId; //為該元素指定一個適合的 id
span.className = 'error'; //應用 error 類別至 span
span.appendChild(document.createTextNode(msg)); //在 span 裡放入錯誤訊息
//新增 span 到 DOM 中
elem.parentNode.appendChild(span); //將新的 span 附加到表單元素的雙親節點內
elem.previousSibling.className = 'error'; //為元素的標籤指定 error 類別
}
}
//定義 removeErrorMessage() 函數，用來刪除 span 以及對應標籤中的錯誤類別
function removeErrorMessage(id){
'use strict';
var span = document.getElementById(id + 'Error');
//檢查 span 的存在
if(span){
span.previousSibling.previousSibling.className = null; //從標籤中刪除 error 類別
span.parentNode.removeChild(span); //刪除 span
}
}
建立工具提示
為了大幅降低使用者錯誤，最好在完成表單的同時，向使用者傳達期望的輸入，如果設計之初考慮到這一點，便可在表單元素的旁邊增加註解，但這種方法可能使頁面看上去很繁雜。
替代方案之一是藉助工具提示，工具提示依照需求顯示和消失，所以每次只會出現一種提示──用於目前正在處理的元素。
從設計和寫程式的角度來看，工具提示類似一種強制回應視窗，但是不會遮住頁面的其餘部分，一開始可用固定的 HTML 建立工具提示：
為達到可存取性的目的，最好將工具提示放到對應的元素標籤內，但是 span 在不支援 CSS 的瀏覽器中將被隱藏，所以這樣做反而使得工具提示沒有原來那麼醒目。注意，span 具有 tooltip 的類別，同時應用於 CSS 和 JavaScript：
label { position: relative; }
.tooltip {
display: block;
visibility: hidden;
position: absolute;
left: 30em;
top: 0;
}
現在 JavaScript 只需要在滑鼠移過對應的表單元素，或者元素取得焦點時改變工具提示的 visibility 屬性，因此建立一函數方便完成任務：
function addTooltipHandlers(elem){
//監控「滑鼠移入元素」或「元素在焦點上」時顯示
document.getElementById('someFormElement').onmouseover = showTooltip;
document.getElementById('someFormElement').onfocus = showTooltip;
//監控「滑鼠離開元素」或「元素失去焦點」時隱藏
document.getElementById('someFormElement').onmouseout = hideTooltip;
document.getElementById('someFormElement').onblur = hideTooltip;
}
製作 showTooltip() 和 hideTooltip() 函數，它們都以一個事件作為參數，並以此事件動態修改元素的 visibility 屬性：
function showToolTip(e){
if (typeof e == 'undefined') e = window.event;
var target = e.target || e.srcElement;
target.previousSibling.lastChild.style.visibility = 'visible';
}
function hideToolTip(e){
if (typeof e == 'undefined') e = window.event;
var target = e.target || e.srcElement;
target.previousSibling.lastChild.style.visibility = 'hidden';
}
這兩個函數的難處式表單元素觸發事件，需要修改的是標籤內的 span，為從表單元素中使用 span，首先引用 previousSibling（就是標籤），接著是 lastChild。停用提交按鈕
停用提交按鈕最常見的目的是避免無意間的多次提交，尤其在電子商務網站上，當表單作為付款流程一部份的情況下。
停用提交按鈕，主要是透過設定按鈕的 disabled 屬性為 disabled 或布林值 true 來完成：
document.getElementById('submitButton').disabled = true;
//or
document.getElementById('submitButton').disabled = 'disabled';
在需要布林值的情況下，實際上任何值都被看作真值，所以 disabled 和布林值 true 的效果相同。
作為附加功能，停用提交功能時，最好從視覺上為使用者指出這種變異和狀態：
- 這可透過為按鈕應用 CSS 類別、在按鈕旁邊增加提示訊息的元素、修改按鈕上的文字或者綜合以上方法來完成
- 增加訊息，它採用的技術與建立表單元素的錯誤訊息相同
- 實際上，我們可以基於 CSS 的強制回應視窗，建立帶有訊息的一個新層級，並將頁面的其餘部分變為灰色，同時阻止使用者再次點擊按鈕，藉以通知他們發生的情況