一、最後一個頁面 contact.html。改進表單
在該頁面實作的功能：
幾乎所有的網站都會有表單填寫，對于使用者輸入和填寫的資料，首先我們一般現在前台驗證，然後再去背景驗證。
在前台最簡單的驗證：檢查必填字段是否填寫、填寫格式是否符合要求等。
每個表單裡面，當擷取到輸入焦點時，令提示文本消失
現在開始動手來寫。
1、實作思路
（1）在這個表單裡會驗證的是必填字段和郵箱格式是否正确。首先，把判斷必填字段和郵箱格式分别寫在兩個函數裡；然後在一個validateForm()函數裡，根據擷取到的className屬性值，确定調用哪個函數（className屬性值有required和email）；最後将這個判斷合法性的整合函數valiedateForm()在使用者送出資料時調用進來。
function prepareForms(){
for(var i=0; i<document.forms.length; i++){
var thisform = document.forms[i];
resetFields(thisform);
thisform.onsubmit = function(){
return validateForm(this);
}
}
}
（2）關于提示文本消失，給一個if判斷，如果表單裡的值預設值，則指派為空，否則當輸入焦點離開時，不去改變值。
defaultValue為表單的預設值，onfocus為擷取焦點，onblur焦點離開。
（3）相容浏覽器。不是所有的浏覽器都會對點選label元素所包含的的文本，與之相關的表單字段就會獲得輸入焦點并等待使用者輸入，是以寫個小函數來實作相容。
給每個label标簽的都有一個onclick函數，如果這個label标簽有for屬性值，并且這個表單裡面的某個字段是有存在這個id，則給這個id所在的表單字段一個focus函數。element.focus()
2、代碼
（1）contact.html
拷貝template.html，在div的className為content部分，開始寫表單内容。
View Code
（2）修改webdesign.css檔案
（3）建立contact.js檔案
最後，在contact.html頁面，加載contact.js檔案。
ok了，可以打開谷歌浏覽器驗證一番。現在在表單必填字段沒填寫，郵箱位址寫錯 ，會出現一個對話框。
二、學與思
1、預設值
聯系表單裡都會有一些預設的“占位符”文本，W3C是這樣說的：“如果你無法斷定使用者端的軟體或代理能夠對空白的控件做出正确的處理，就一定要在編輯框或文本輸入區域裡給出一些預設的、占位符性質的字元。【優先級3】”。
預設值美中不足之處就是當準備輸入時要手動清除，麻煩。是以寫了個小函數，當if判斷是預設值時，則把表單字段指派為空。
2、Form對象
擷取到的是input、textarea等
和childNodes.length不一樣。form.elements.length隻對掉單元素進行統計。
3、資料合法性檢驗
把判斷必填字段和郵箱格式的判斷函數寫在不同的函數裡，然後在一個整合函數中根據表單字段id值不同再進行具體調用。顯得更加友善，這樣就不用在每個表單字段裡面添加這樣一個判斷函數，我們需要做的就是擷取到表單的className屬性值，給一個if判斷，是required的是就調用isFilled(),如果是email就調用isMail()。最後在使用者送出資料時，調用這個整合函數即可。
完整代碼：http://pan.baidu.com/s/1mgr39US