今天開始講述表單這個(gè)重要模塊

可以說,JS 最早是為表單而發(fā)明的, 因此在沒有JS之前,所有操作都需要提交后端驗(yàn)證,發(fā)現(xiàn)有誤再重定向回原頁面, 加上之前1,2KB的網(wǎng)速,這用戶體驗(yàn)真是奇差無比.因此JS最初發(fā)明出來，就是做表單驗(yàn)證的．

圍繞表單，添加了各種語義化的元素，事件，屬性．

比如說label,在某個(gè)radio外圍上它，既能說明它是什么東西，也能擴(kuò)大點(diǎn)擊范圍

比如說fieldset，它擁有默認(rèn)的框框，方便圈定某個(gè)區(qū)域，表明這里面的東西是表單(form本身默認(rèn)不可見， 而CSS要在稍晚的時(shí)候才發(fā)明出來)

比如說, onchange, oninput, onsubmit等事件,提交與用戶交互的友好度

比如說, readOnly, disabled, checked, 為表單元素增加各種狀態(tài).

我們可以給一個(gè)定義,何謂表單元素 ?就是能向后端提供數(shù)據(jù)的元素

而這些元素通過都放在form元素中,但如果將它們單個(gè)拎出來,這個(gè)不好判定,我們還可以通過其他"外觀"特征獲得,就是它們的tagName都是input, button, select, textarea.其實(shí)option元素也算是表單元素,但它的數(shù)據(jù)需要提交到select 元素 進(jìn)行過濾,才能提交

function isFormElement(el){return /input|button|select|textarea/i.test(el.tagName) }

在HTML5中,還添加類似datalist, output等元素, 但它們只是輔助設(shè)施,沒有直接給form提交數(shù)據(jù)的能力,因此不算是表單元素.

form元素作為AJAX出現(xiàn)前唯一的提交通道,我們?cè)谶@里著重說一下

它上面擁有如下屬性

屬性	值	描述
accept	MIME_type	規(guī)定通過文件上傳來提交的文件的類型
accept-charset	charset	服務(wù)器處理表單數(shù)據(jù)所接受的字符集
enctype	MIME_type	規(guī)定表單數(shù)據(jù)在發(fā)送到服務(wù)器之前應(yīng)該如何編碼
method	get/post	規(guī)定表單數(shù)據(jù)發(fā)送的方式，get方法和post方法
name	name	規(guī)定表單的名稱
target	_blank/_parent/_self/_top	規(guī)定在何處打開action URL

其中三個(gè)重要屬性說明一下：

1、action指定該表單發(fā)送時(shí)接受操作的地址

2、method指定表單數(shù)據(jù)發(fā)送的方法。可選值:get、post。get發(fā)送則表單內(nèi)的數(shù)據(jù)將附加到url后發(fā)送。post則是在HTTP請(qǐng)求中發(fā)送。

3、enctype指定表單數(shù)據(jù)在發(fā)送的服務(wù)器之前如何編碼，特別注意的是，當(dāng)含有上傳域時(shí)要設(shè)置編碼方式為enctype="multipart/form-data"，否則后臺(tái)無法獲取到瀏覽器發(fā)送的文件數(shù)據(jù)。是設(shè)置表單的MIME編碼。默認(rèn)情況，這個(gè)編碼格式是application/x-www-form-urlencoded，不能用于文件上傳；只有使用了multipart/form-data，form里面的input的值以2進(jìn)制的方式傳過去。才能完整的傳遞文件數(shù)據(jù)。FTP上傳大文件的時(shí)候，也有個(gè)選項(xiàng)是以二進(jìn)制方式上傳。

表單里面的元素布置有一定的要求，如form里面一定放著fieldset, fielset里面包著legend, label包著說明文字與input, textearea...., label里要指定tabindex，就是tab切換的順序。

health information height: weight:

不同的表單擁有不同的外形,它們的用法也各有不同,序列化數(shù)據(jù)也不一樣,因此我們將分開以下幾種細(xì)細(xì)討論.

輸入系, 選擇系, 下拉系, 搭車系, 圖形系

總結(jié)

以上是生活随笔為你收集整理的表单元素 开篇的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。