導(dǎo)航
【初探HTML5之使用新標(biāo)簽布局】用html5布局我的博客頁(yè)！
【HTML5初探之form標(biāo)簽】解放表單驗(yàn)證、增加文件上傳、集成拖放
【HTML5初探之繪制圖像（上）】看我canvas元素引領(lǐng)下一代web頁(yè)面
【HTML5初探之繪制圖像（下）】看我canvas元素引領(lǐng)下一代web頁(yè)面
【HTML5初探之多媒體元素】視頻播放HTML5、Flash誰(shuí)才是王道？
【HTML5初探之本地存儲(chǔ)】如果沒(méi)有數(shù)據(jù)庫(kù)。。。
【HTML5初探之離線應(yīng)用】如何打造零請(qǐng)求、無(wú)流量的網(wǎng)站？
【HTML5初探之通信API】跨域門檻不再高、數(shù)據(jù)推送不是夢(mèng)
【HTML5初探之Web Workers】網(wǎng)頁(yè)也能多線程
【HTML5初探之Geolocation API】讓我們來(lái)回去地理信息

HTML中與form有關(guān)的東東

新增屬性
個(gè)人理解
form
html5之前，表單內(nèi)的從屬元素需要放入標(biāo)簽中，現(xiàn)在可以為標(biāo)簽指定form標(biāo)簽即可
點(diǎn)評(píng)：該功能解決了我們實(shí)際中遇到的一些問(wèn)題，比如iframe模擬異步圖片上傳時(shí)，就必須將圖片寫(xiě)到form外。
formaction
formmethod
該屬性用于按鈕（submit）讓表單提交頁(yè)面可又按鈕控制
formmethod指定各按鈕提交方式
placehoder
該屬性非常有用，用于文本框中顯示提示信息，非常有用的一屬性
list
list屬性需要與datalist一同使用，相當(dāng)于文本框，模擬select，非常適用的一個(gè)屬性
autofocus
用于文本框主動(dòng)獲取焦點(diǎn)，有用的東東
新增input屬性，解放驗(yàn)證，各瀏覽器支持不好
tel
用于電話
url
驗(yàn)證url
email
驗(yàn)證郵箱
date/time
日期類驗(yàn)證，會(huì)出現(xiàn)日期選擇插件哦。。。
number
只能是數(shù)字
range
控制數(shù)字范圍
color
顏色選擇器，好東西啊。。。
HTML5中增加了很多與form有關(guān)的屬性，說(shuō)實(shí)在的，這些東西真心貼心啊！！！很大程度上講：
完全解放表單驗(yàn)證
若不是考慮兼容性問(wèn)題，老夫恨不得立即投入其中，但一旦想起兼容性問(wèn)題的話，你就會(huì)非常頭疼！！！
因?yàn)樵竞芎玫臇|西，卻是因?yàn)闅v史的原因，反而會(huì)增加我們的工作量！！！
在錯(cuò)的時(shí)間，做對(duì)的事情，他看起來(lái)是對(duì)的，實(shí)際上也是對(duì)的。。。但你會(huì)發(fā)現(xiàn)，他錯(cuò)了。。。。
增強(qiáng)頁(yè)面元素
項(xiàng)目
個(gè)人理解
figure/figcaption
據(jù)說(shuō)表示頁(yè)面獨(dú)立內(nèi)容，移除后無(wú)影響，暫無(wú)發(fā)現(xiàn)用處..
details
該標(biāo)簽有點(diǎn)意思，用于替代js中，元素收起展開(kāi)功能。
最新ff都不支持……個(gè)人覺(jué)得，既然提供了該標(biāo)簽應(yīng)該提供屬性表示上下展開(kāi)或者左右展開(kāi)；
mark
高亮顯示，當(dāng)真語(yǔ)義化
progress
屌絲們，可以告別gif圖片了，也不用div模擬百分比了，與windows區(qū)域一致的進(jìn)度條出現(xiàn)啦，異步文件上傳更加完善！
改良o(jì)l
老夫就沒(méi)有用過(guò)這個(gè)主。。。
……
以上元素屬于可有可無(wú)的元素，不必贅述，接下來(lái)，本文明星對(duì)象登場(chǎng)：
文件API
FileList與file對(duì)象：
在html4中，file標(biāo)簽只允許選擇一個(gè)文件，但html5中，對(duì)file標(biāo)簽設(shè)置multiple屬性后，變可以選擇多文件了！！！
而，選擇后便會(huì)形成這里的filelist對(duì)象，即一個(gè)個(gè)file組成的對(duì)象列表，簡(jiǎn)單來(lái)說(shuō)就是file數(shù)組。
file對(duì)象具有2屬性，name代表文件名（不包括路徑），lastModifiedDate表示最后修改時(shí)間
其實(shí)我們?cè)趆tml4中操作file時(shí)，可以獲取本地很多屬性，比如文件大小，但是萬(wàn)惡的ie不支持，到ie9后才有所好轉(zhuǎn)。
所以想客戶端提示文件上傳過(guò)大的同學(xué)放棄吧。。。

Blob對(duì)象
表示二進(jìn)制原始數(shù)據(jù)，提供一slice方法訪問(wèn)字節(jié)內(nèi)部原始數(shù)據(jù)；size表示blob對(duì)象字節(jié)長(zhǎng)度、type表示其mime類型，類型未知?jiǎng)t返回空字符串。
來(lái)來(lái)，簡(jiǎn)單做一實(shí)驗(yàn)：
關(guān)于File 我們?cè)趂f中選擇圖片后，提交，設(shè)個(gè)斷點(diǎn)看看：


file主角登場(chǎng)，就是他了，我們將之屬性輸出來(lái)看看：


真的是應(yīng)有盡有啊！有了該屬性就可以做很多事情了，但是。。。我們來(lái)看看ie7、8：


各位觀眾，人家壓根沒(méi)這個(gè)屬性，所以一切百搭。。。
話說(shuō)，我覺(jué)得ie瀏覽器調(diào)試起來(lái)很痛苦，請(qǐng)問(wèn)各位大神有沒(méi)有什么好的ie開(kāi)發(fā)插件，就像ff的firebug，google自帶的插件？？

FIleReader接口
filereader接口，可將文件讀入內(nèi)存，有了這個(gè)東東我們就可以很舒服的做圖片預(yù)覽了，但他的公用不止如此。
filereader的四個(gè)方法：
readAsBinaryString 將文件讀取為二進(jìn)制碼——通常我們將數(shù)據(jù)傳給后端；
readAsText 將文件讀取為文本——讀取文本內(nèi)容；
readAsURL 將文件讀取為DataURL——一般是小文件，圖片或者h(yuǎn)tml；
abort 中斷讀取，因?yàn)槲募^(guò)大等待時(shí)間就很長(zhǎng)了

filereader接口事件：
onabort 讀取中斷觸發(fā)；
onerror 讀取失敗觸發(fā)；
onloadstart 開(kāi)始讀取時(shí)觸發(fā)；
onprogress 讀取中
onload 讀取成功時(shí)觸發(fā)；
onloadend 讀取完成后觸發(fā)，無(wú)論成功失敗；
光說(shuō)不練不行，我們這里做個(gè)小實(shí)驗(yàn)：
我是一個(gè)小實(shí)驗(yàn) 用最新瀏覽器運(yùn)行試試呢！
我們?cè)僮鲆粋€(gè)判斷，看看其事件執(zhí)行順序：
reader.onload = function (e) { alert('onload'); } reader.onprogress = function (e) { alert('onprogress'); } reader.onerror = function (e) { alert('onerror'); } reader.onloadstart = function (e) { alert('onloadstart'); } reader.onloaded = function (e) { alert('onloaded'); }
此處具體應(yīng)用：


簡(jiǎn)單圖片上傳 此處暫時(shí)告一段落，若是想看更復(fù)雜一點(diǎn)的應(yīng)用，請(qǐng)猛擊，記得頂喲： http://www.cnblogs.com/yexiaochai/archive/2013/04/11/3014404.html
拖放API
其實(shí)之前，我還用jquery寫(xiě)了個(gè)拖放的插件呢。。
工作中碰到的一些東西【彈出窗口】【拖放】【異步文件上傳】
但是集成在HTML5中當(dāng)然更好！！！我們現(xiàn)在來(lái)看看這個(gè)東東。。。并且它的強(qiáng)大之處，就是不止在瀏覽器中拖動(dòng)，這就不得了了哦（拖動(dòng)圖片上傳）
html5中默認(rèn)對(duì)圖片、鏈接可以拖放，其它元素需要設(shè)置draggable="true"才能拖放，事不宜遲，老夫馬上去試試。
拖放的例子

拖放時(shí)候一定要記住，阻止頁(yè)面默認(rèn)行為，否則會(huì)打開(kāi)新窗口的，其中以下亦是重點(diǎn)：
1 拖放可使用DataTransfer傳遞數(shù)據(jù)，該對(duì)象是非常有用的，因?yàn)樵谕蟿?dòng)目標(biāo)元素時(shí)，可能會(huì)經(jīng)過(guò)其它元素，我們可以用此傳遞信息；
API：
dragstart 被拖放元素 開(kāi)始拖放時(shí)
drag 被拖放元素 拖放過(guò)程中
dragenter 拖放過(guò)程中鼠標(biāo)經(jīng)過(guò)的元素 被拖放元素開(kāi)始進(jìn)入本元素時(shí)
dragover ?拖放過(guò)程中鼠標(biāo)經(jīng)過(guò)的元素 本元素內(nèi)移動(dòng)
drageleave ?拖放過(guò)程中鼠標(biāo)經(jīng)過(guò)的元素 離開(kāi)本元素
drop 拖放的目標(biāo)元素 拖動(dòng)的元素放到了本元素中
dragend 拖放的對(duì)象 拖放結(jié)束
其實(shí)這里是有問(wèn)題的，我并未去深入研究從開(kāi)始拖動(dòng)到經(jīng)過(guò)各種元素會(huì)產(chǎn)生神馬情況，這個(gè)可以作為二次學(xué)習(xí)時(shí)的重點(diǎn)研究對(duì)象。
結(jié)語(yǔ)
html5的文件和表單做的比較精致，個(gè)人感覺(jué)比布局新增的幾個(gè)標(biāo)簽有用多了，明天開(kāi)始學(xué)習(xí)canvas，雖然不懂，雖然見(jiàn)過(guò)，但是還是感覺(jué)很厲害的樣子！?

本文轉(zhuǎn)自葉小釵博客園博客，原文鏈接http://www.cnblogs.com/yexiaochai/archive/2013/04/16/3025240.html，如需轉(zhuǎn)載請(qǐng)自行聯(lián)系原作者

總結(jié)

以上是生活随笔為你收集整理的【HTML5初探之form标签】解放表单验证、增加文件上传、集成拖放的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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