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

didimm

內(nèi)容簡介：
    《HTML5+CSS3技術(shù)應(yīng)用完美解析》圍繞著HTML5和cSS3技術(shù)，比較全面細致地探討了HTML5和cSS3的各項新特性的使用，使讀者能夠快速入門HTML5和cSS3前端開發(fā)。本書分為15章，各章內(nèi)容安排由易到難、由淺及深，除了討論HTML5和cSS3 API的具體使用，還深入探討HTML5和 cSS3特性的相關(guān)概念，力爭使讀者對HTML5和cSS3的新特性有一個最全面、最真實的了解和掌握。此外，書中的各個章節(jié)都提供了大量的應(yīng)用實例，以幫助讀者更好地進行開發(fā)實踐。
　　郭小成編著的《HTML5+CSS3技術(shù)應(yīng)用完美解析》內(nèi)容緊湊、結(jié)構(gòu)嚴謹、實例豐富、圖文并茂、深入淺出，適合廣大具有一定HIML、css 和JavaScript基礎(chǔ)的Web開發(fā)人員、有志于從事HTML5和cSS3開發(fā)的初學者以及對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  跨平臺運行性
1.2.3  簡單易用性
1.2.4  用戶友好性
1.3  HTML5的新功能
1.3.1  簡化的DOCTYPE聲明
1.3.2  簡化的編碼字符集
1.3.3  簡化樣式表和腳本引入
1.3.4  新增的全局屬性
1.3.5  語義化標簽之文檔元素
1.3.6  語義化標簽之文本元素
1.4  本章小結(jié)
第2章  舊貌換新顏——Html5 Web Form
2.1  Html5 Web Form概述
2.1.1  Html5 Web Form的設(shè)計理念
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)的元素標簽
2.2.3  保留的輸入類型控件
2.2.4  新增的輸入類型控件
2.2.5  新增的表單標簽屬性
2.2.6  表單驗證機制
2.3  構(gòu)建Html5 Web Form的開發(fā)實例
2.3.1  分析開發(fā)需求
2.3.2  搭建程序基本框架
2.3.3  頁面的風格設(shè)計
2.3.4  構(gòu)建實例表單驗證機制
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)勢
3.1.4  Html5 Audio and Video 的缺陷
3.1.5  Html5 Audio and Video 的瀏覽器支持情況
3.2  Html5 Audio and Video 的使用
3.2.1  檢測瀏覽器的支持情況
3.2.2  多媒體元素標簽及其簡單屬性
3.2.3  多媒體元素的source子標簽及其屬性
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ā)實例
3.5.1  分析開發(fā)的需求
3.5.2  搭建程序顯示框架
3.3.3  設(shè)計播放器控制欄樣式
3.3.4  播放器的初始化
3.3.5  添加播放和暫停按鈕
3.3.6  添加播放時間和進度控制條
3.3.7  添加靜音按鈕和音量調(diào)節(jié)滑動條
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)勢和劣勢
4.1.3  Html5 Web Canvas的瀏覽器支持情況
4.2  Html5 Web Canvas使用
4.2.1  檢測瀏覽器支持情況
4.2.2  Canvas接口的屬性和方法
4.2.3  畫筆風格的設(shè)置
4.2.4  基本形狀的繪制
4.2.5  圖形圖像的處理
4.2.6  Canvas文本的處理
4.2.7  Canvas圖片的處理
4.3  構(gòu)建Html5 Web Canvas的開發(fā)實例
4.3.1  分析開發(fā)需求
4.3.2  程序主框架的搭建
4.3.4  底部導航欄縮略圖
4.3.3  底部導航欄翻頁按鈕
4.3.5  點擊放大圖片和翻頁功能
4.3.6  縮略圖預(yù)覽顯示
4.3.7  自動隱藏導航欄
4.4  本章小結(jié)
第5章  尋她千百度——Html5 Web Geolocation
5.1  Html5 Web Geolocation概述
5.1.1  地理位置信息
5.1.2  位置信息的來源
5.1.3  Html5 Web Geolocation用戶隱私保護機制
5.1.2  Html5 Web Geolocation的瀏覽器支持情況
5.2  Html5 Web Geolocation的使用
5.2.1  檢測瀏覽器支持情況
5.2.2  單次請求方式的基本方法
5.2.3  單次請求成功之后的回調(diào)方法
5.2.4  單次請求失敗之后的回調(diào)方法
5.2.5  重復(fù)更新方式的基本方法
5.3  Google Maps的基本使用
5.3.1  引入Google Maps API
5.4.2  初始化地圖顯示
5.3.3  添加地圖地標顯示
5.3.4  添加地圖信息窗口顯示
5.4  構(gòu)建Html5 Web Geolocation開發(fā)實例
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  進程和線程
6.1.2  Html5 Web Workers的特點
6.1.3  Html5 Web Workers的工作原理
6.1.4  Html5 Web Workers的瀏覽器支持情況
6.2  Html5 Web Workers的使用
6.2.1  瀏覽器支持情況檢測
6.2.2  在主線程建立專用線程
6.2.3  在主線程建立共享線程
6.2.4  通用子線程接口的方法和屬性
6.2.5  專用子線程接口的方法和屬性
6.2.6  共享子線程接口的方法和屬性
6.3  構(gòu)建Html5 Web Workers的開發(fā)實例
6.3.1  分析開發(fā)需求
6.3.2  表單數(shù)據(jù)收集頁面
6.3.3  動態(tài)增加課程項目
6.3.4  程序的主線程
6.3.2  程序的子線程
6.4  本章小結(jié)
第7章  突起的異軍——Html5 Web Socket
7.1  Html5 Web Socket的概述
7.1.1  服務(wù)器推送技術(shù)簡介
7.1.2  基于客戶端套接口的服務(wù)器推送技術(shù)
7.1.3  基于HTTP長連接的服務(wù)器推送技術(shù)
7.1.4  Html5 Web Socket的實現(xiàn)原理
7.1.5  Html5 Web Socket的瀏覽器和服務(wù)器支持情況
7.2  Html5 Web Socket的使用
7.2.1  瀏覽器支持情況檢測
7.2.2  搭建Html5 Web Socket運行環(huán)境
7.2.3  服務(wù)器端編程之Server接口
7.2.4  服務(wù)器端編程之Connection接口
7.2.5  客戶端編程WebSocket接口
7.3  構(gòu)建Html5 Web Socket開發(fā)實例
7.3.1  分析開發(fā)需求
7.3.2  搭建程序主框架
7.3.3  編寫服務(wù)器端腳本
7.3.4  實現(xiàn)用戶登錄和顯示用戶列表
7.3.5  實現(xiàn)發(fā)送消息和顯示聊天記錄
7.4  本章小結(jié)
第8章  存儲更給力——Html5 Web Storage
8.1  Html5 Web Storage 概述
8.1.1  Cookie本地存儲
8.1.2  Web本地存儲的發(fā)展
8.1.3  Html5 Web Storage本地存儲的優(yōu)勢
8.1.4  Html5 Web Storage本地存儲的不足
8.1.5  Html5 Web Storage本地存儲的分類
8.1.4  Html5 Web Storage的瀏覽器支持情況
8.2  DOM Storage本地存儲的使用
8.2.1  瀏覽器支持情況檢測
8.2.2  Storage的屬性和方法
8.2.3  DOM Storage的事件處理機制
8.2.4  JSON數(shù)據(jù)存儲
8.3  DataBase Storage本地存儲的使用
8.3.1  瀏覽器的支持情況檢測
8.3.2  創(chuàng)建并打開本地數(shù)據(jù)庫
8.3.3  Database接口的使用
8.3.4  本地數(shù)據(jù)庫的基本操作
8.4  構(gòu)建Html5 Web Storage的開發(fā)實例
8.4.1  分析開發(fā)需求
8.4.2  設(shè)計登錄表單
8.4.3  存儲表單數(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)點和缺點
9.1.4  Html5 Web Offline 的瀏覽器支持情況
9.2  Html5 Web Offline的使用
9.2.1  瀏覽器支持情況檢測
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ā)實例
9.3.1  分析開發(fā)需求
9.3.2  搭建程序主框架
9.3.3  編寫Manifest緩存清單
9.3.4  設(shè)計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  強大的選擇器
10.2.2  專業(yè)的UI設(shè)計
10.2.3  簡單的動畫特效
10.2.4  高效的布局方式
10.2.5  智能媒體查詢
10.3  瀏覽器對CSS3的支持
10.3.1  私有屬性帶來的困擾
10.3.2  主流瀏覽器對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è)計
12.1.1  邊框?qū)傩缘氖褂?br /> 12.1.2  輪廓屬性的使用
12.2  文本和內(nèi)容UI設(shè)計
12.2.1  文本屬性的使用
12.2.2  內(nèi)容屬性的使用
12.3  漸變和背景UI設(shè)計
12.3.1  漸變方法的使用
12.3.2  背景屬性的使用
12.4  本章小結(jié)
第13章  唯美的排列 CSS3 Layout
13.1  多列自動布局方式
13.1.1  多列自動布局的瀏覽器支持情況
13.1.2  多列自動布局的使用
13.2  彈性盒布局方式
13.2.1  彈性盒布局的瀏覽器支持情況
13.2.2  彈性盒布局的使用
13.3  本章小結(jié)
第14章  強勁的動畫 CSS3 Animation
14.1 變形動畫設(shè)計
14.1.1  變形動畫設(shè)計的瀏覽器支持情況
14.1.2  變形動畫設(shè)計的使用
14.2  過渡動畫設(shè)計
14.2.1  過渡動畫設(shè)計的瀏覽器支持情況
14.2.2  過渡動畫設(shè)計的使用
14.3  高級動畫設(shè)計
14.3.1  高級動畫設(shè)計的瀏覽器支持情況
14.3.2  高級動畫設(shè)計的使用
14.4  本章小結(jié)

didimm

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




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

didimm

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

didimm

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

didimm

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

didimm

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

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

didimm

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

didimm

method屬性用來指定瀏覽器向服務(wù)器傳送表單數(shù)據(jù)的方式，這個屬性是可選的。在Html5 Web Form中，除了保留在html4規(guī)范中的<form>標簽里的method屬性，而且在任何一個表單輸入控件都可以設(shè)置formmethod屬性，方便讓表單不同部分的數(shù)據(jù)以不同的方式傳輸?shù)姆��?wù)器。Method和formmethod屬性值可以是POST和GET，兩種方式各有優(yōu)劣，表2-1對這兩種屬性的傳輸方式和優(yōu)點進行了歸納。
表2-1  Method和Formmethod屬性值的傳輸方式和優(yōu)點
Method和Formmethod屬性值        傳  輸  方  式        優(yōu)       點
Post        將主體資料直接傳輸給服務(wù)器。        傳輸數(shù)據(jù)大，安全性高，
Get        通過URL載體傳輸。        傳輸速度快，便于調(diào)試
當method或formmethod的屬性值為POST時，表單的數(shù)據(jù)在瀏覽器后臺直接傳送給服務(wù)器進行處理。這一般用于傳送數(shù)據(jù)量大、安全性要求比較高的表單數(shù)據(jù)內(nèi)容。
當method或formmethod的屬性值為GET時，實際上是通過URL傳遞表單數(shù)據(jù)內(nèi)容，具體流程如下所示。
•        瀏覽器會先從服務(wù)器請求URL。
•        瀏覽器將表單的數(shù)據(jù)內(nèi)容進行ASCALL編碼，各個變量之間使用“&”符號連接。
•        瀏覽器將編碼過的數(shù)據(jù)綁定到URL上發(fā)送給服務(wù)器。
對于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方式，因為URL的長度有限制，使用GET方式傳輸?shù)谋韱螖?shù)據(jù)一般不能超過2KB。此外，這種方式也存在一定的安全隱患，因為URL是可見的，不安分的用戶可能會直接通過網(wǎng)址提交表單。
action屬性用來設(shè)置服務(wù)器接收和處理表單數(shù)據(jù)的URL。這是表單容器<form>唯一的必選屬性。和method一樣，在Html5 Web Form中，除了在<form>標簽中具有action屬性，在任何的一個表單輸入控件都可以設(shè)置formaction，讓不同表單的數(shù)據(jù)傳輸給不同的服務(wù)器。對于action屬性的具體使用，前面我們已經(jīng)探討過了，這里不再贅述。
在繼續(xù)探討表單容器的基本屬性之前，我們有必要來討論一下表單的基本架構(gòu)，即服務(wù)器接受表單數(shù)據(jù)的具體方式。
一個完整的表單應(yīng)該是包含兩個部分的，本書所討論的都只是瀏覽器端向用戶顯示的那部分。實際上，還有一部分就是服務(wù)器端接受和處理表單數(shù)據(jù)的腳本。這些腳本語言主要有ASP、CGI和PHP等等，它們都有一套標準、統(tǒng)一表單數(shù)據(jù)接受和處理方式。例如當我們使用POST方式傳輸表單數(shù)據(jù)時，ASP腳本服務(wù)器端使用Request.Form對象來接收，而PHP腳本服務(wù)器端使用$_[POST]數(shù)組來接收。而當我們使用GET方式傳輸表單數(shù)據(jù)時，ASP腳本服務(wù)器端使用Request.QueryString對象來接收，而PHP腳本服務(wù)器端使用$_[GET]數(shù)組來接收。
enctype 屬性用來指定表單數(shù)據(jù)在發(fā)送到服務(wù)器之前進行編碼的編碼方式，這個屬性是可選的，而且該屬性只有在表單數(shù)據(jù)傳輸方式設(shè)置為POST時才有效。
同樣地，在Html5 Web Form中，除了在<form>標簽中保留了entype屬性之外，在任何的一個表單輸入控件都可以設(shè)置formenctype屬性，為不同的表單輸入控件指定相應(yīng)的編碼方式。表2-2對enctype和formenctype屬性的取值和說明進行了歸納。