這裡我們介紹一下form元素與表單提交方面的知識。
form元素form元素的DOM接口是HTMLFormElement ,繼承自HTMLElement ,因而它與其他的HTML元素擁有相同的默認屬性,不過它自身還有幾個獨有的屬性和方法:
| 屬性值 | 說明 |
|---|---|
| accept-charset | 服務器能夠處理的字符集,多個字符集用空格分割 |
| action | 接受請求的URL,該值可以被form元素中的input或button元素的formaction屬性覆蓋 |
| elements | 表單中所有控件集合(HTMLCollection) |
| enctype | 請求的編碼類型,該值可以被form元素中的input或button元素的formenctype屬性覆蓋 |
| length | 表單中控件的數量 |
| method | 要發送的HTTP請求類型,通常是get或post,該值可以被form元素中的input或button元素的formmethod屬性覆蓋 |
| name | 表單的名稱 |
| reset() | 將所有表單域重置為默認值 |
| submit() | 提交表單 |
| target | 用於發送請求和接收響應的窗口名稱,該值可以被form元素中的input或button元素的formtarget屬性覆蓋 |
| autocomplete | 是否自動補全表單元素 |
input元素是應用非常廣泛的表單元素,根據type屬性值的不同,有以下幾種常用用法:
文本輸入<input type=text name=>
提交輸入<input type=submit>
單選鈕輸入<input type=radio name=必須有相同的名字value=填的值最好對應>
複選框輸入<input type=checkbox name=相同的名字value=不同的對應值>
數字輸入<input type=number min= max=> 輸入框只能輸入數字,可設置最大值,最小值。
範圍輸入<input type=range min= max=>類似number,但它會顯示一個滑動條,而不是輸入框。
顏色輸入<input type=color>會彈出一個顏色選擇器。
日期輸入<input type=date> 會彈出一個日期選擇器。
email輸入<input type=email>顯示為一個文本輸入框,並會彈出一個定制鍵盤。
tel輸入<input type=tel> 跟email輸入類似
url輸入<input type=url> 跟email輸入類似,也會彈出一個定制鍵盤。
textarea元素可以創建一個多行的文本區。
<textarea name= id= cols=30 rows=10></textarea>
其中cols和row的屬性值分別表示文本區寬度和高度的字符。
select元素和option元素結合使用可創建一個下拉菜單。
<select name= id=> <option value=></option> <option value=></option> <option value=></option> </select>
radio如何分組? 設置不同的name屬性即可
例:
<input type=radio name=favourite value=玩遊戲>玩遊戲
<input type=radio name=favourite value=寫代碼>寫代碼
<input type=radio name=sex value=man>男
<input type=radio name=sex value=woman>女、
這就是兩組radio
placeholder提供可描述輸入字段預期值的提示信息(hint)。
該提示會在輸入字段為空時顯示,並會在字段獲得焦點時消失。
type=hidden定義隱藏的input。隱藏字段對於用戶是不可見的。隱藏字段通常會存儲一個默認值,它們的值也可以由JavaScript 進行修改。
比如用於安全方面,給後台傳輸用戶不可見的name 和value值,讓後台做校驗,防偽造頁面。
提交按鈕在form中加入一個提交按鈕,便可使用戶得以提交表單。
下列三種按鈕皆可在點擊時觸發表單的submit事件:
<input type=submit /><button type=submit></button><input type=image />
規範中button元素的type默認值是submit,但是在IE678下默認值是button,所以從兼容性考慮有必要為button元素手動加上type=submit屬性。
submit事件初心者可能會認為表單提交是提交按鈕的click事件觸發,其實不然,按鈕元素的click事件與表單的submit事件在不同的瀏覽器中執行順序不一,所以為了能準確控製表單提交事件,我們會選擇在表單的submit事件中執行驗證等操作。
form.addEventListener('submit', function (e) { if (valid()) { ... } e.preventDefault()})當form元素中沒有上述的三個按鈕中任何一個的時候,用戶將無法提交表單(回車鍵也無效),此時可以利用form元素特有的submit()方法執行提交表單,需要注意的是調用submit()方法並不會觸發form元素的submit事件,表單的驗證等操作應該在調用submit()方法之前。
if (valid()) { form.submit()}表單提交與用戶體驗基於現在流行的ajax+跨域POST(CORS)技術,我們很可能不使用form元素直接向服務器提交數據。這雖然可行,但在大多數情況下存在著體驗劣化現象。
JavaScript 表單驗證JavaScript 可用來在數據被送往服務器前對HTML 表單中的這些輸入數據進行驗證。
被JavaScript 驗證的這些典型的表單數據有:
用戶是否已填寫表單中的必填項目?
用戶輸入的郵件地址是否合法?
用戶是否已輸入合法的日期?
用戶是否在數據域(numeric field) 中輸入了文本?
必填(或必選)項目下面的函數用來檢查用戶是否已填寫表單中的必填(或必選)項目。假如必填或必選項為空,那麼警告框會彈出,並且函數的返回值為false,否則函數的返回值則為true(意味著數據沒有問題):
function validate_required(field,alerttxt){with (field){if (value==null||value==) {alert(alerttxt);return false}else {return true}}}下面是連同HTML 表單的代碼:
<html><head><script type=text/javascript>function validate_required(field,alerttxt){with (field) { if (value==null||value==) {alert(alerttxt);return false} else { return true} }}function validate_form(thisform){with (thisform) { if (validate_required(email,Email must be filled out!)==false) {email.focus();return false} }}</script>< /head><body><form action=submitpage.htm onsubmit=return validate_form(this) method=post>Email: <input type=text name=email size=30><input type=submit value=Submit> </form ></body></html> E-mail 驗證下面的函數檢查輸入的數據是否符合電子郵件地址的基本語法。
意思就是說,輸入的數據必須包含@ 符號和點號(.)。同時,@ 不可以是郵件地址的首字符,並且@ 之後需有至少一個點號:
function validate_email(field,alerttxt){with (field){apos=value.indexOf(@)dotpos=value.lastIndexOf(.)if (apos<1||dotpos-apos<2) {alert(alerttxt);return false }else {return true}}}下面是連同HTML 表單的完整代碼:
<html><head><script type=text/javascript>function validate_email(field,alerttxt){with (field){apos=value.indexOf(@)dotpos=value.lastIndexOf(.)if (apos<1|| dotpos-apos<2) {alert(alerttxt);return false}else {return true}}}function validate_form(thisform){with (thisform){if (validate_email(email,Not a valid e-mail address!)== false) {email.focus();return false}}}</script></head><body><form action=submitpage.htmonsubmit=return validate_form(this); method=post>Email: <input type=text name=email size=30><input type=submit value=Submit> </form></body></html>快捷鍵提交在沒有form元素包裹的情況下,即使當前頁面的焦點在表單元素上,按回車鍵也不會觸發表單提交,對於用戶而言,需要從鍵盤控制切換到鼠標/手勢控制,破壞了原有的流暢度。解決方法最簡單的就是在外層用一個form元素包裹,並且確定form元素中起碼有一個提交按鈕。此時當表單中的輸入域得到焦點時,用戶按回車鍵便會觸發提交。
瀏覽器記住賬號密碼在提交表單時,高級瀏覽器包括移動端瀏覽器,會詢問用戶是否需要記住用戶賬號密碼,對於一般用戶而言,這是一個十分有用的特性,特別是在移動端,可以為用戶節省很多時間。在沒有form元素的情況下,瀏覽器不會彈出該詢問窗口。
總結我們在開發一個表單應用的時候,不應該嘗試去除form元素直接進行提交,在form元素中應該包含一個提交按鈕,如果是button元素,應該手動加上type=submit屬性。提交事件的處理在form元素的submit事件中,而非提交按鈕的click事件。
參考:
form元素與表單提交