《html5+css3技術(shù)應(yīng)用》（連載）

didimm

內(nèi)容簡(jiǎn)介：
    《HTML5+CSS3技術(shù)應(yīng)用完美解析》圍繞著HTML5和cSS3技術(shù)，比較全面細(xì)致地探討了HTML5和cSS3的各項(xiàng)新特性的使用，使讀者能夠快速入門HTML5和cSS3前端開發(fā)。本書分為15章，各章內(nèi)容安排由易到難、由淺及深，除了討論HTML5和cSS3 API的具體使用，還深入探討HTML5和 cSS3特性的相關(guān)概念，力爭(zhēng)使讀者對(duì)HTML5和cSS3的新特性有一個(gè)最全面、最真實(shí)的了解和掌握。此外，書中的各個(gè)章節(jié)都提供了大量的應(yīng)用實(shí)例，以幫助讀者更好地進(jìn)行開發(fā)實(shí)踐。
　　郭小成編著的《HTML5+CSS3技術(shù)應(yīng)用完美解析》內(nèi)容緊湊、結(jié)構(gòu)嚴(yán)謹(jǐn)、實(shí)例豐富、圖文并茂、深入淺出，適合廣大具有一定HIML、css 和JavaScript基礎(chǔ)的Web開發(fā)人員、有志于從事HTML5和cSS3開發(fā)的初學(xué)者以及對(duì)Web前端開發(fā)技術(shù)感興趣的人員。

didimm

目錄
第1章  HTML5概述
1.1  HTML5的發(fā)展歷程
1.1.1  HTML4興起之路
1.1.2  XHTML曲折之路
1.1.3  HTML5的誕生
1.2  HTML5的基本特征
1.2.1  向前兼容性
1.2.2  跨平臺(tái)運(yùn)行性
1.2.3  簡(jiǎn)單易用性
1.2.4  用戶友好性
1.3  HTML5的新功能
1.3.1  簡(jiǎn)化的DOCTYPE聲明
1.3.2  簡(jiǎn)化的編碼字符集
1.3.3  簡(jiǎn)化樣式表和腳本引入
1.3.4  新增的全局屬性
1.3.5  語義化標(biāo)簽之文檔元素
1.3.6  語義化標(biāo)簽之文本元素
1.4  本章小結(jié)
第2章  舊貌換新顏——Html5 Web Form
2.1  Html5 Web Form概述
2.1.1  Html5 Web Form的設(shè)計(jì)理念
2.1.2  Html5 Web Form新在何處
2.1.3  Html5 Web Form的瀏覽器支持情況
2.2  Html5 Web Form的使用
2.2.1  表單容器的基本屬性
2.2.2  表單結(jié)構(gòu)的元素標(biāo)簽
2.2.3  保留的輸入類型控件
2.2.4  新增的輸入類型控件
2.2.5  新增的表單標(biāo)簽屬性
2.2.6  表單驗(yàn)證機(jī)制
2.3  構(gòu)建Html5 Web Form的開發(fā)實(shí)例
2.3.1  分析開發(fā)需求
2.3.2  搭建程序基本框架
2.3.3  頁面的風(fēng)格設(shè)計(jì)
2.3.4  構(gòu)建實(shí)例表單驗(yàn)證機(jī)制
2.4  本章小結(jié)
第3章  影音急先鋒——Html5 Audio and Video
3.1  Html5 Audio and Video 概述
3.1.1  視頻容器
3.1.2  編碼器和解碼器
3.1.3  Html5 Audio and Video 的優(yōu)勢(shì)
3.1.4  Html5 Audio and Video 的缺陷
3.1.5  Html5 Audio and Video 的瀏覽器支持情況
3.2  Html5 Audio and Video 的使用
3.2.1  檢測(cè)瀏覽器的支持情況
3.2.2  多媒體元素標(biāo)簽及其簡(jiǎn)單屬性
3.2.3  多媒體元素的source子標(biāo)簽及其屬性
3.2.4  多媒體元素的事件控制
3.2.4  多媒體元素的網(wǎng)絡(luò)狀態(tài)
3.2.5  多媒體元素的就緒狀態(tài)
3.2.6  多媒體元素的異常狀態(tài)
3.2.7  多媒體元素的播放狀態(tài)
3.2.8  多媒體元素的控制按鈕
3.3  構(gòu)建Html5 Audio and Video的開發(fā)實(shí)例
3.5.1  分析開發(fā)的需求
3.5.2  搭建程序顯示框架
3.3.3  設(shè)計(jì)播放器控制欄樣式
3.3.4  播放器的初始化
3.3.5  添加播放和暫停按鈕
3.3.6  添加播放時(shí)間和進(jìn)度控制條
3.3.7  添加靜音按鈕和音量調(diào)節(jié)滑動(dòng)條
3.3.8  添加播放速率選擇按鈕和停止按鈕
3.3.9  添加全屏按鈕和關(guān)燈按鈕
3.4  本章小結(jié)
第4章  璀璨的明珠——Html5 Web Canvas
4.1  Html5 Web Canvas概述
4.1.1  Html5 Web Canvas的發(fā)展歷程
4.1.2  Html5 Web Canvas的優(yōu)勢(shì)和劣勢(shì)
4.1.3  Html5 Web Canvas的瀏覽器支持情況
4.2  Html5 Web Canvas使用
4.2.1  檢測(cè)瀏覽器支持情況
4.2.2  Canvas接口的屬性和方法
4.2.3  畫筆風(fēng)格的設(shè)置
4.2.4  基本形狀的繪制
4.2.5  圖形圖像的處理
4.2.6  Canvas文本的處理
4.2.7  Canvas圖片的處理
4.3  構(gòu)建Html5 Web Canvas的開發(fā)實(shí)例
4.3.1  分析開發(fā)需求
4.3.2  程序主框架的搭建
4.3.4  底部導(dǎo)航欄縮略圖
4.3.3  底部導(dǎo)航欄翻頁按鈕
4.3.5  點(diǎn)擊放大圖片和翻頁功能
4.3.6  縮略圖預(yù)覽顯示
4.3.7  自動(dòng)隱藏導(dǎo)航欄
4.4  本章小結(jié)
第5章  尋她千百度——Html5 Web Geolocation
5.1  Html5 Web Geolocation概述
5.1.1  地理位置信息
5.1.2  位置信息的來源
5.1.3  Html5 Web Geolocation用戶隱私保護(hù)機(jī)制
5.1.2  Html5 Web Geolocation的瀏覽器支持情況
5.2  Html5 Web Geolocation的使用
5.2.1  檢測(cè)瀏覽器支持情況
5.2.2  單次請(qǐng)求方式的基本方法
5.2.3  單次請(qǐng)求成功之后的回調(diào)方法
5.2.4  單次請(qǐng)求失敗之后的回調(diào)方法
5.2.5  重復(fù)更新方式的基本方法
5.3  Google Maps的基本使用
5.3.1  引入Google Maps API
5.4.2  初始化地圖顯示
5.3.3  添加地圖地標(biāo)顯示
5.3.4  添加地圖信息窗口顯示
5.4  構(gòu)建Html5 Web Geolocation開發(fā)實(shí)例
5.4.1  分析開發(fā)的需求
5.4.2  搭建程序主框架
5.4.3  獲取用戶的地理位置信息
5.4.4  在Google地圖上顯示用戶的地理位置
5.4.5  顯示用戶所在地的天氣
5.5  本章小結(jié)
第6章  多管共齊下——Html5 Web Workers
6.1  Html5 Web Workers的概述
6.1.1  進(jìn)程和線程
6.1.2  Html5 Web Workers的特點(diǎn)
6.1.3  Html5 Web Workers的工作原理
6.1.4  Html5 Web Workers的瀏覽器支持情況
6.2  Html5 Web Workers的使用
6.2.1  瀏覽器支持情況檢測(cè)
6.2.2  在主線程建立專用線程
6.2.3  在主線程建立共享線程
6.2.4  通用子線程接口的方法和屬性
6.2.5  專用子線程接口的方法和屬性
6.2.6  共享子線程接口的方法和屬性
6.3  構(gòu)建Html5 Web Workers的開發(fā)實(shí)例
6.3.1  分析開發(fā)需求
6.3.2  表單數(shù)據(jù)收集頁面
6.3.3  動(dòng)態(tài)增加課程項(xiàng)目
6.3.4  程序的主線程
6.3.2  程序的子線程
6.4  本章小結(jié)
第7章  突起的異軍——Html5 Web Socket
7.1  Html5 Web Socket的概述
7.1.1  服務(wù)器推送技術(shù)簡(jiǎn)介
7.1.2  基于客戶端套接口的服務(wù)器推送技術(shù)
7.1.3  基于HTTP長(zhǎng)連接的服務(wù)器推送技術(shù)
7.1.4  Html5 Web Socket的實(shí)現(xiàn)原理
7.1.5  Html5 Web Socket的瀏覽器和服務(wù)器支持情況
7.2  Html5 Web Socket的使用
7.2.1  瀏覽器支持情況檢測(cè)
7.2.2  搭建Html5 Web Socket運(yùn)行環(huán)境
7.2.3  服務(wù)器端編程之Server接口
7.2.4  服務(wù)器端編程之Connection接口
7.2.5  客戶端編程WebSocket接口
7.3  構(gòu)建Html5 Web Socket開發(fā)實(shí)例
7.3.1  分析開發(fā)需求
7.3.2  搭建程序主框架
7.3.3  編寫服務(wù)器端腳本
7.3.4  實(shí)現(xiàn)用戶登錄和顯示用戶列表
7.3.5  實(shí)現(xiàn)發(fā)送消息和顯示聊天記錄
7.4  本章小結(jié)
第8章  存儲(chǔ)更給力——Html5 Web Storage
8.1  Html5 Web Storage 概述
8.1.1  Cookie本地存儲(chǔ)
8.1.2  Web本地存儲(chǔ)的發(fā)展
8.1.3  Html5 Web Storage本地存儲(chǔ)的優(yōu)勢(shì)
8.1.4  Html5 Web Storage本地存儲(chǔ)的不足
8.1.5  Html5 Web Storage本地存儲(chǔ)的分類
8.1.4  Html5 Web Storage的瀏覽器支持情況
8.2  DOM Storage本地存儲(chǔ)的使用
8.2.1  瀏覽器支持情況檢測(cè)
8.2.2  Storage的屬性和方法
8.2.3  DOM Storage的事件處理機(jī)制
8.2.4  JSON數(shù)據(jù)存儲(chǔ)
8.3  DataBase Storage本地存儲(chǔ)的使用
8.3.1  瀏覽器的支持情況檢測(cè)
8.3.2  創(chuàng)建并打開本地?cái)?shù)據(jù)庫(kù)
8.3.3  Database接口的使用
8.3.4  本地?cái)?shù)據(jù)庫(kù)的基本操作
8.4  構(gòu)建Html5 Web Storage的開發(fā)實(shí)例
8.4.1  分析開發(fā)需求
8.4.2  設(shè)計(jì)登錄表單
8.4.3  存儲(chǔ)表單數(shù)據(jù)
8.4.4  讀取表單數(shù)據(jù)
8.5  本章小結(jié)
第9章  離線也瘋狂——Html5 Web Offline
9.1  Html5 Web Offline概述
9.1.1  Google Gears離線應(yīng)用
9.1.2  Html5 Web Offline和瀏覽器網(wǎng)頁緩存
9.1.3  Html5 Web Offline的優(yōu)點(diǎn)和缺點(diǎn)
9.1.4  Html5 Web Offline 的瀏覽器支持情況
9.2  Html5 Web Offline的使用
9.2.1  瀏覽器支持情況檢測(cè)
9.2.2  配置Html5 Web Offline的服務(wù)器環(huán)境
9.2.3  Manifest緩存清單文件
9.2.3  applicationCache接口的狀態(tài)常量和事件屬性
9.2.4  applicationCache接口的方法
9.3  構(gòu)建Html5 Web Offline的開發(fā)實(shí)例
9.3.1  分析開發(fā)需求
9.3.2  搭建程序主框架
9.3.3  編寫Manifest緩存清單
9.3.4  設(shè)計(jì)Javascript腳本
9.4  本章小結(jié)
第10章  CSS3概述
10.1 CSS3發(fā)展歷程
10.1.1  CSS的興起
10.1.2  CSS Level 2.1的發(fā)布
10.1.3  CSS Level 3的誕生
10.2 CSS3的新特性
10.2.1  強(qiáng)大的選擇器
10.2.2  專業(yè)的UI設(shè)計(jì)
10.2.3  簡(jiǎn)單的動(dòng)畫特效
10.2.4  高效的布局方式
10.2.5  智能媒體查詢
10.3  瀏覽器對(duì)CSS3的支持
10.3.1  私有屬性帶來的困擾
10.3.2  主流瀏覽器對(duì)CSS3的支持情況
10.4  本章小結(jié)
第11章  選擇器暢想CSS3 Selector
11.1  屬性選擇器
11.1.1  保留的屬性選擇器
11.1.2  新增的屬性選擇器
11.2  偽選擇器
11.2.1  偽元素選擇器
11.2.2  保留的偽類選擇器
11.2.3  新增的結(jié)構(gòu)性偽類選擇器
11.2.4  新增的UI元素狀態(tài)偽類選擇器
11.3  本章小結(jié)
第12章  專業(yè)的視覺CSS3 UI
12.1  邊框和輪廓UI設(shè)計(jì)
12.1.1  邊框?qū)傩缘氖褂?br /> 12.1.2  輪廓屬性的使用
12.2  文本和內(nèi)容UI設(shè)計(jì)
12.2.1  文本屬性的使用
12.2.2  內(nèi)容屬性的使用
12.3  漸變和背景UI設(shè)計(jì)
12.3.1  漸變方法的使用
12.3.2  背景屬性的使用
12.4  本章小結(jié)
第13章  唯美的排列 CSS3 Layout
13.1  多列自動(dòng)布局方式
13.1.1  多列自動(dòng)布局的瀏覽器支持情況
13.1.2  多列自動(dòng)布局的使用
13.2  彈性盒布局方式
13.2.1  彈性盒布局的瀏覽器支持情況
13.2.2  彈性盒布局的使用
13.3  本章小結(jié)
第14章  強(qiáng)勁的動(dòng)畫 CSS3 Animation
14.1 變形動(dòng)畫設(shè)計(jì)
14.1.1  變形動(dòng)畫設(shè)計(jì)的瀏覽器支持情況
14.1.2  變形動(dòng)畫設(shè)計(jì)的使用
14.2  過渡動(dòng)畫設(shè)計(jì)
14.2.1  過渡動(dòng)畫設(shè)計(jì)的瀏覽器支持情況
14.2.2  過渡動(dòng)畫設(shè)計(jì)的使用
14.3  高級(jí)動(dòng)畫設(shè)計(jì)
14.3.1  高級(jí)動(dòng)畫設(shè)計(jì)的瀏覽器支持情況
14.3.2  高級(jí)動(dòng)畫設(shè)計(jì)的使用
14.4  本章小結(jié)

didimm

第 2章  舊貌換新顏——Html5 Web Form




本章我們來一起探討Htmt5 Web Form。眾所周知，Html表單自從問世以來，通過其在數(shù)據(jù)收集、數(shù)據(jù)組織、人機(jī)交互的優(yōu)勢(shì)，使得Web應(yīng)用程序使整個(gè)Web領(lǐng)域提升到了一個(gè)新的層次。Html表單在整個(gè)Web領(lǐng)域中起著舉足輕重的作用，小到個(gè)人網(wǎng)站的注冊(cè)登錄功能，大到大型企業(yè)的數(shù)據(jù)庫(kù)管理系統(tǒng)，都可以看到Html 表單的身影。
如果說Html表單的問世豐富和活躍了Web領(lǐng)域，那么Html5 Web Form的實(shí)現(xiàn)就是使這項(xiàng)嶄新的技術(shù)百尺竿頭，更進(jìn)一步。Html5 Web Form在保持了Html表單簡(jiǎn)便易用特性的同時(shí)，增加了許多內(nèi)置的元素、控件和屬性來滿足用戶的需求，大大簡(jiǎn)便了我們之前要實(shí)現(xiàn)的輸入類型檢查、錯(cuò)誤提示、表單校驗(yàn)等功能的代碼。
本章，我們主要討論Html5 Web Form，首先會(huì)探討Html5 Web Form的設(shè)計(jì)理念和各主流瀏覽器的支持情況，隨后會(huì)討論保留的和新加的表單元素、輸入類型屬性和輸入類型控件，最后我們會(huì)以一個(gè)開發(fā)實(shí)例探討Html5 Web Form在實(shí)際開發(fā)中的應(yīng)用。

didimm

2.1  Html5 Web Form概述
Html5 Web Form是基于原有HTML表單的基礎(chǔ)上，加入了一些特性元素和屬性。使得開發(fā)人員更加方便，用戶體驗(yàn)程度更高。本節(jié)，我們將重點(diǎn)探討Html5 Web Form的設(shè)計(jì)理念、新穎之處和目前瀏覽器的支持情況。
2.1.1  Html5 Web Form的設(shè)計(jì)理念
在Web領(lǐng)域里探索了12年之久的超文本標(biāo)記語言HTML，自從成為萬維網(wǎng)的核心語言之后，精益求精，不斷創(chuàng)新，終于發(fā)展到了第五次修訂版本Html5。但是Html4的發(fā)布以后，就被一度被網(wǎng)頁設(shè)計(jì)師和Web程序員稱為最成功地標(biāo)記格式語言。那么Html5在表單應(yīng)用方面又有哪些創(chuàng)新的設(shè)計(jì)理念呢？
根據(jù)W3C(World Wide Web Consortium,萬維網(wǎng)聯(lián)盟)的解釋，HTML5表單新特性的目的是在為用戶提供更好的用戶體驗(yàn)，為開發(fā)人員提供更簡(jiǎn)單的編程。從而我們總結(jié)Html5 Web Form是基于以下設(shè)計(jì)理念的。
•        代碼簡(jiǎn)單。同樣的表單代碼Html5將比以前的Html代碼更簡(jiǎn)單，因?yàn)樵贖tml5 Web Form中去掉了以往的冗余代碼。這對(duì)開發(fā)人員來說是非常重要的。
•        功能強(qiáng)大。在Html5 Web Form加入一些新元素新特性，在很大程度上改善了Html4中表單標(biāo)簽死板等問題，例如：在Html4或XHtml中，<input>,<button>,<select>,<textarea>等標(biāo)簽要放在<form>標(biāo)簽里面，而在Html5 Web Form中，卻沒有這樣的限制，這些標(biāo)簽可以放在網(wǎng)頁的任何位置，因?yàn)檫@些標(biāo)簽可以通過新增的form屬性與相應(yīng)的表單關(guān)聯(lián)。
•        用戶友好。Html5 Web Form的初衷是為用戶提供了更好的Web服務(wù)體驗(yàn)。例如：使用Html5 Web Form的新特性可以為用戶提供一些自動(dòng)聚焦、輸入信息提示和輸入信息選擇等功能。
•        兼容性好�；�于目前的瀏覽器參差不齊，各大主流瀏覽器對(duì)Html5 Web Form的支持情況也不盡相同。但是Html4表單的標(biāo)簽和特性在Html5中是完全支持的，反過來，Html5 Web Form的新元素新特性在舊式瀏覽器也不會(huì)報(bào)錯(cuò)，所以讀者現(xiàn)在就可以在自己的Web程序上大膽地使用Html Web Form技術(shù)。

didimm

相信大家都可能對(duì)Xform有一定的了解。事實(shí)上，Html5 Web Form從某種意義上來說只是Xform的冰山一角。Xform是下一代的HTML表單的標(biāo)準(zhǔn)，通過XML結(jié)構(gòu)化數(shù)據(jù)格式定義、存儲(chǔ)和傳遞表單數(shù)據(jù)，提供了比現(xiàn)在更加靈活或豐富的表單控件，而且使用了我們Web開發(fā)中流行的MVC(視圖、控制器、模型)的設(shè)計(jì)模式，強(qiáng)制性地將用戶數(shù)據(jù)和表單分離，使代碼更加清晰、簡(jiǎn)單、方便，比現(xiàn)有的html表單更加規(guī)范，有更高的可用性。此外，XForm提供了豐富的表單樣式和強(qiáng)大的事件處理模型，讓開發(fā)者可以把大量的精力放在表單內(nèi)容和數(shù)據(jù)的收集上，從而可以不用過多地關(guān)注表單的顯示方式。但是這個(gè)作為W3C萬維網(wǎng)研究了近十年的標(biāo)準(zhǔn)，至今還處于雛形階段，主流瀏覽器在沒有安裝插件的條件下，都沒有對(duì)其提供支持。而Html5 Web Form的一些功能和特性的設(shè)計(jì)理念在很大程度上就是來自于Xform。讀者如果對(duì)Xform感興趣，可以自行查看相關(guān)資料進(jìn)行學(xué)習(xí)。
2.1.2  Html5 Web Form新在何處
Html5 Web Form是在Html4中改進(jìn)而來的，萬變不離其宗，所以它必然保留了一些現(xiàn)有html表單的功能和特性。當(dāng)然，這些保留的功能和特性，對(duì)于我們來說是喜聞樂見的，因?yàn)槲覀儾粌H可以花更少的時(shí)間去熟悉Html5 Web Form 的使用，而且對(duì)Html5 Web Form的兼容性也有一定的保障。這些保留的功能和特性主要如下：
•        表單的容器還是<form>標(biāo)簽，我們可以在其中設(shè)置基本的提交特性。
•        我們之前的表單控件（如文本框、單選按鈕、復(fù)選框）的使用方法不變。
•        用戶向服務(wù)器提交表單的方式不變，GET和POST兩種方式。
•        我們之前使用的腳本控制可以繼續(xù)使用。
所以，Html5 Web Form標(biāo)準(zhǔn)的出現(xiàn)并不是什么質(zhì)的變革。簡(jiǎn)單來說，Html5 Web Form只是在原來的基礎(chǔ)上加入了一些新的控件類型，同時(shí)加入一些新元素和屬性來解決開發(fā)人員以往代碼冗余的問題，所以Html5 Web Form的舊貌換新顏主要體現(xiàn)在以下幾個(gè)方面。

didimm

表單結(jié)構(gòu)更加自由。前面我們已經(jīng)討論過，在Html4的表單實(shí)現(xiàn)中，如果我們不使用一定腳本控制，表單控件就必須被放置在<form></form>標(biāo)簽之中才能順利的提交到服務(wù)器，也就是說，Html4規(guī)范中要求開發(fā)人員必須將要提交到同一服務(wù)器的數(shù)據(jù)集中到一個(gè)DOM塊中，這在form元素和表單控件較多的情況下對(duì)設(shè)計(jì)以及實(shí)現(xiàn)帶來一定程度的限制。例如在某個(gè)注冊(cè)模塊中，有一部分信息需要提交到服務(wù)器地址A，而另一部分則需要提交到服務(wù)器地址B，然而在展現(xiàn)上這些控件又是混在一塊的。這一場(chǎng)景在HTML4中處理起來是比較麻煩的，但是在Html5 Web Form中卻可以輕松處理，因?yàn)樵贖tml5中，所有的表單控件都增加了一個(gè)新屬性form,可以關(guān)聯(lián)相應(yīng)的表單id，表示該控件屬于某個(gè)表單。通過這個(gè)屬性則徹底突破了必須將控件寫在<form></form>之中的限制。
表單提交更加靈活。在Html4中，一個(gè)表單的數(shù)據(jù)內(nèi)容一般只能提交到一個(gè)服務(wù)器地址，這在一定程度上也阻礙了我們表單功能實(shí)現(xiàn)的限制。而Html5 Web Form也解決了這個(gè)問題，因?yàn)樵贖tml5中,所有的表單控件都增加了一個(gè)新屬性formaction,可以為每個(gè)表單控件設(shè)置要提交的服務(wù)器地址，這使得我們?cè)谠O(shè)計(jì)網(wǎng)頁時(shí)更加靈活，可以自由地選擇要向服務(wù)器提交表單的數(shù)據(jù)。
用戶體驗(yàn)更加友好。Html5 Web Form的初衷就是為了提供更好地用戶體驗(yàn)，Html5中引入了一些新的屬性，例如holderplace、datalist、list等，這些自動(dòng)聚焦、提示列表和用戶自由信息提示等功能，可以讓W(xué)eb程序更好地與用戶實(shí)現(xiàn)交互。
輸入類型更加豐富。Html5 Web Form規(guī)范中提供了一系列的輸入類型，如郵箱、網(wǎng)址、郵政編碼等等。與我們之前只有的文本text、password和submit相比，大大豐富了我們的輸入類型，也使我們省略了一大堆冗余的表單腳本驗(yàn)證代碼。
表單樣式更加華麗。Html5 Web Form在以前只有文本框、單選鈕和復(fù)選框等幾個(gè)典型的輸入樣式的基礎(chǔ)上，引入了時(shí)間選擇器和數(shù)字選擇器等更加豐富的表單數(shù)據(jù)內(nèi)容表現(xiàn)形式，使我們可以在研究和實(shí)現(xiàn)用戶內(nèi)容和數(shù)據(jù)的收集上放更多的精力，從而不必太在意表單樣式的表現(xiàn)。
此外，在Html5 Web Form規(guī)范中，雖然提供了很多元素和屬性的使用方法，但是它并沒有規(guī)定瀏覽器用何種方式來呈現(xiàn)給用戶。Html5的這種以退為進(jìn)，無為而大作的策略，顯然有著長(zhǎng)遠(yuǎn)的考慮。

didimm

首先，這種分離語義和樣式的方法帶給了瀏覽器更大的發(fā)揮空間，瀏覽器可以不斷改善自己的顯示樣式；
其次，桌面瀏覽器和移動(dòng)設(shè)備的瀏覽器都可以遵照Html5 Web Form語義標(biāo)準(zhǔn)的前提下，設(shè)計(jì)出適合用戶當(dāng)前使用設(shè)備的顯示方式。例如，現(xiàn)在的部分移動(dòng)設(shè)備上，可以通過識(shí)別表單的輸入類型，會(huì)顯示不同的屏幕鍵盤。在Iphone手機(jī)上，當(dāng)輸入類型為email時(shí)，會(huì)提供帶有“@”和“.”的屏幕鍵盤，而輸入類型為url時(shí)，則會(huì)提供帶有“.com”和“/”的屏幕鍵盤。如圖2-1和圖2-2所示。

2.1.3  Html5 Web Form的瀏覽器支持情況
雖然Html5 Web Form的瀏覽器支持情況不一定是最糟糕的，但至少是令我們最頭疼最糾結(jié)的一個(gè)。目前主流的桌面瀏覽器和移動(dòng)設(shè)備瀏覽器對(duì)Html5 Web Form新控件和新屬性的支持情況如圖2-3和圖2-4所示。其中白色表示完全支持，淺灰色表示部分支持，深灰色表示不支持。

didimm

從圖2-2和圖2-3中可以看出，雖然支持Html5 Web Form的瀏覽器越來越多，但是在主流的瀏覽器的支持情況卻是參差不齊。這主要是因?yàn)镠tml5 Web Form控件類型眾多，而到目前為止，很多瀏覽器制造廠商都還沒有來得及投入太多的精力去支持這些新的輸入控件類型。即便如此，現(xiàn)在的Webkit內(nèi)核的瀏覽器基本都在不同程度上地開始支持Html5 Web Form，特別是桌面瀏覽器Opera和移動(dòng)設(shè)備上的瀏覽器Safari已經(jīng)把Html5 Web Form支持得很完美了，Html5 Web Form的普及已經(jīng)指日可待。
此外，讀者也不需要對(duì)自己在應(yīng)用程序上使用Html5 Web Form新元素而表示擔(dān)憂，因?yàn)镠tml5 Web Form的兼容性非常好。例如，即使用戶的瀏覽器不支持新的表單輸入控件，也會(huì)向Html4規(guī)范兼容，不會(huì)拋出任何異�；蛘咤e(cuò)誤，只是使用簡(jiǎn)單文本輸入框代替。正是基于此，我們?cè)谑褂肏tml5 Web Form時(shí)，也沒有去檢測(cè)用戶的瀏覽器的支持情況的必要。
2.2  Html5 Web Form的使用
在Web應(yīng)用程序中，表單是收集用戶信息和進(jìn)行程序交互的主要手段，也是組織和分配用戶數(shù)據(jù)內(nèi)容的重要方式。而Html5 Web Form良好的表單設(shè)計(jì)理念，將更好地降低服務(wù)器處理表單的負(fù)載壓力，提供用戶友好體驗(yàn)，讓開發(fā)人員在使用表單收集數(shù)據(jù)時(shí)更加方便。本節(jié)，首先我們討論一些表單的基礎(chǔ)，然后從細(xì)節(jié)上探討Html5 Web Form的使用。
2.2.1  表單容器的基本屬性
在Html5 Web Form中，保留了我們熟悉的表單容器<form>標(biāo)簽�，F(xiàn)在我們一起來回顧<form>標(biāo)簽的基本屬性的使用。這些屬性主要包括：
•        method屬性
•        action屬性
•        enctype屬性
•        accept屬性
•        accept-charset 屬性
•        target屬性
•        id屬性
•        name屬性
•        autocomplete屬性
•        novalidate屬性

didimm

method屬性用來指定瀏覽器向服務(wù)器傳送表單數(shù)據(jù)的方式，這個(gè)屬性是可選的。在Html5 Web Form中，除了保留在html4規(guī)范中的<form>標(biāo)簽里的method屬性，而且在任何一個(gè)表單輸入控件都可以設(shè)置formmethod屬性，方便讓表單不同部分的數(shù)據(jù)以不同的方式傳輸?shù)姆��?wù)器。Method和formmethod屬性值可以是POST和GET，兩種方式各有優(yōu)劣，表2-1對(duì)這兩種屬性的傳輸方式和優(yōu)點(diǎn)進(jìn)行了歸納。
表2-1  Method和Formmethod屬性值的傳輸方式和優(yōu)點(diǎn)
Method和Formmethod屬性值        傳  輸  方  式        優(yōu)       點(diǎn)
Post        將主體資料直接傳輸給服務(wù)器。        傳輸數(shù)據(jù)大，安全性高，
Get        通過URL載體傳輸。        傳輸速度快，便于調(diào)試
當(dāng)method或formmethod的屬性值為POST時(shí)，表單的數(shù)據(jù)在瀏覽器后臺(tái)直接傳送給服務(wù)器進(jìn)行處理。這一般用于傳送數(shù)據(jù)量大、安全性要求比較高的表單數(shù)據(jù)內(nèi)容。
當(dāng)method或formmethod的屬性值為GET時(shí)，實(shí)際上是通過URL傳遞表單數(shù)據(jù)內(nèi)容，具體流程如下所示。
•        瀏覽器會(huì)先從服務(wù)器請(qǐng)求URL。
•        瀏覽器將表單的數(shù)據(jù)內(nèi)容進(jìn)行ASCALL編碼，各個(gè)變量之間使用“&”符號(hào)連接。
•        瀏覽器將編碼過的數(shù)據(jù)綁定到URL上發(fā)送給服務(wù)器。
對(duì)于method屬性的具體使用，讀者可以參考下面的代碼。
HTML代碼:test_method.html。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
        <form action="#" method="GET">
                <p>
                        姓名：
                        <input type = "text" name="user_name"/>
                </p>
                <p>
                        密碼：
                        <input type = "password" name="user_password"/>
                </p>
                <input type="submit"/>
        </form>
</body>
</html>
•        text是文本框輸入類型控件。
•        password是密碼框的輸入類型控件。
•        method屬性用來指定瀏覽器向服務(wù)器傳送表單數(shù)據(jù)的方式。
•        action屬性用來設(shè)置服務(wù)器接收和處理表單數(shù)據(jù)的URL。
•        在上述代碼中，我們使用GET方法傳送數(shù)據(jù)內(nèi)容。

didimm

在一般情況下，要盡量避免使用GET方式，因?yàn)閁RL的長(zhǎng)度有限制，使用GET方式傳輸?shù)谋韱螖?shù)據(jù)一般不能超過2KB。此外，這種方式也存在一定的安全隱患，因?yàn)閁RL是可見的，不安分的用戶可能會(huì)直接通過網(wǎng)址提交表單。
action屬性用來設(shè)置服務(wù)器接收和處理表單數(shù)據(jù)的URL。這是表單容器<form>唯一的必選屬性。和method一樣，在Html5 Web Form中，除了在<form>標(biāo)簽中具有action屬性，在任何的一個(gè)表單輸入控件都可以設(shè)置formaction，讓不同表單的數(shù)據(jù)傳輸給不同的服務(wù)器。對(duì)于action屬性的具體使用，前面我們已經(jīng)探討過了，這里不再贅述。
在繼續(xù)探討表單容器的基本屬性之前，我們有必要來討論一下表單的基本架構(gòu)，即服務(wù)器接受表單數(shù)據(jù)的具體方式。
一個(gè)完整的表單應(yīng)該是包含兩個(gè)部分的，本書所討論的都只是瀏覽器端向用戶顯示的那部分。實(shí)際上，還有一部分就是服務(wù)器端接受和處理表單數(shù)據(jù)的腳本。這些腳本語言主要有ASP、CGI和PHP等等，它們都有一套標(biāo)準(zhǔn)、統(tǒng)一表單數(shù)據(jù)接受和處理方式。例如當(dāng)我們使用POST方式傳輸表單數(shù)據(jù)時(shí)，ASP腳本服務(wù)器端使用Request.Form對(duì)象來接收，而PHP腳本服務(wù)器端使用$_[POST]數(shù)組來接收。而當(dāng)我們使用GET方式傳輸表單數(shù)據(jù)時(shí)，ASP腳本服務(wù)器端使用Request.QueryString對(duì)象來接收，而PHP腳本服務(wù)器端使用$_[GET]數(shù)組來接收。
enctype 屬性用來指定表單數(shù)據(jù)在發(fā)送到服務(wù)器之前進(jìn)行編碼的編碼方式，這個(gè)屬性是可選的，而且該屬性只有在表單數(shù)據(jù)傳輸方式設(shè)置為POST時(shí)才有效。
同樣地，在Html5 Web Form中，除了在<form>標(biāo)簽中保留了entype屬性之外，在任何的一個(gè)表單輸入控件都可以設(shè)置formenctype屬性，為不同的表單輸入控件指定相應(yīng)的編碼方式。表2-2對(duì)enctype和formenctype屬性的取值和說明進(jìn)行了歸納。