今天開始講述表單這個重要模組
可以說,JS 最早是為表單而發明的, 因此在沒有JS之前,所有操作都需要提交後端驗證,發現有誤再重定向回原頁面,
加上之前1,2KB的網速,這使用者體驗真是奇差無比.因此JS最初發明出來，就是做表單驗證的．
圍繞表單，新增了各種語義化的元素，事件，屬性．
比如說label,在某個radio外圍上它，既能說明它是什麼東西，也能擴大點選範圍
比如說fieldset，它擁有預設的框框，方便圈定某個區域，表明這裡面的東西是表單(form本身預設不可見，
而CSS要在稍晚的時候才發明出來)
比如說, onchange, oninput, onsubmit等事件,提交與使用者互動的友好度
比如說, readOnly, disabled, checked, 為表單元素增加各種狀態.
我們可以給一個定義,何謂表單元素 ?就是能向後端提供資料的元素
而這些元素通過都放在form元素中,但如果將它們單個拎出來,這個不好判定,我們還可以通過其他”外觀”特徵獲得,就是它們的tagName都是input, button, select, textarea.其實option元素也算是表單元素,但它的資料需要提交到select 元素 進行過濾,才能提交
|
1 2 3 |
function isFormElement(el){ return /input|button|select|textarea/i.test(el.tagName) } |
在HTML5中,還新增類似datalist, output等元素, 但它們只是輔助設施,沒有直接給form提交資料的能力,因此不算是表單元素.
form元素作為AJAX出現前唯一的提交通道,我們在這裡著重說一下
它上面擁有如下屬性
| 屬性 | 值 | 描述 |
| accept | MIME_type | 規定通過檔案上傳來提交的檔案的型別 |
| accept-charset | charset | 伺服器處理表單資料所接受的字符集 |
| enctype | MIME_type | 規定表單資料在傳送到伺服器之前應該如何編碼 |
| method | get/post | 規定表單資料傳送的方式，get方法和post方法 |
| name | name | 規定表單的名稱 |
| target | _blank/_parent/_self/_top | 規定在何處開啟action URL |
其中三個重要屬性說明一下：
1、action指定該表單傳送時接受操作的地址
2、method指定表單資料傳送的方法。可選值:get、post。get傳送則表單內的資料將附加到url後傳送。post則是在HTTP請求中傳送。
3、enctype指定表單資料在傳送的伺服器之前如何編碼，特別注意的是，當含有上傳域時要設定編碼方式為enctype=”multipart/form-data”，否則後臺無法獲取到瀏覽器傳送的檔案資料。是設定表單的MIME編碼。預設情況，這個編碼格式是application/x-www-form-urlencoded，不能用於檔案上傳；只有使用了multipart/form-data，form裡面的input的值以2進位制的方式傳過去。才能完整的傳遞檔案資料。FTP上傳大檔案的時候，也有個選項是以二進位制方式上傳。
表單裡面的元素佈置有一定的要求，如form裡面一定放著fieldset, fielset裡面包著legend, label包著說明文字與input, textearea…., label裡要指定tabindex，就是tab切換的順序。
|
1 2 3 4 5 6 7 |
<form> <fieldset> <legend>health information</legend> <label tabindex="1">height: <input type="text"></label> <label tabindex="2">weight: <input type="text"></label> </fieldset> </form> |
不同的表單擁有不同的外形,它們的用法也各有不同,序列化資料也不一樣,因此我們將分開以下幾種細細討論.
輸入系, 選擇系, 下拉系, 搭車系, 圖形系