【導(dǎo)讀】一下HTML5中對(duì)表單功能的更新.革新,我們都必須第一時(shí)間去了解它學(xué)習(xí)它,比如Web世界里這簇美艷的花朵—HTML5.網(wǎng)站對(duì)它的嘗試應(yīng)用(比如<!doctypehtml>應(yīng)用,比如canvas的應(yīng)用),使HTML5的邁出了。一大步,隨之而來(lái)IE9的發(fā)布,無(wú)疑又讓我們看到了HTML5離我們不再遙遠(yuǎn).學(xué)習(xí)HTML5半年有余了,雖然對(duì)它的離線存儲(chǔ)以及canvas等革新性技術(shù)還是一知半解,但我還是希望我現(xiàn)在所學(xué)到的能幫助更多的前端人學(xué)習(xí)這門毋庸置疑是新趨勢(shì)的技術(shù).息提示.此類型在Opera中必須指定name值,否則無(wú)效果.這個(gè)不用多解釋了,要求輸入一個(gè)數(shù)字字符,若未輸入則會(huì)拋出一個(gè)錯(cuò)誤.會(huì)反饋給value一個(gè)值.此類型表示輸入的將是一個(gè)搜索關(guān)鍵字,通過(guò)results=s可顯示一個(gè)搜索小圖標(biāo).此類型要求輸入一個(gè)電話號(hào)碼,但實(shí)際上它并沒(méi)有特殊的驗(yàn)證,與text類型沒(méi)什么區(qū)別.錯(cuò),MS除了Firefox,其他標(biāo)準(zhǔn)瀏覽器都能很好的支持.該屬性需要與datalist屬性共用,datalist是對(duì)選擇框的記憶,而list屬性可以為選擇框自定。者在range中設(shè)定拖動(dòng)階梯.

　　

【正文】 節(jié)、 必須知道的 22 個(gè)學(xué)習(xí) HTML5 的技巧 (二 ) 8. 占位符 此前，我們需要使用 JavaScript 來(lái)創(chuàng)建文本框的占位符。你可以初步設(shè)定值屬性來(lái)看是否合適，但是只要用戶刪除了該文本，輸入的內(nèi)容就會(huì)再次變成空的。占位符屬性有效地彌補(bǔ)了這一點(diǎn)。 XML/HTML Code 復(fù)制內(nèi)容到剪貼板 input name=”” type=”” placeholder=”” / 9. 本地存儲(chǔ) 多虧了 HTML5 的 local storage ，我們可以讓高級(jí)瀏覽器“記住”我們輸入的內(nèi)容，就算后來(lái)瀏覽器關(guān)閉或者重新刷新也不受影響。盡管不是所有的瀏覽器都支持，但是最關(guān)鍵的 Inter Explorer 8, Safari 4, Firefox 。 10. 語(yǔ)義性的 Header 和 Footer XML/HTML Code 復(fù)制內(nèi)容到剪貼板 div id=”header” ? /div div id=”footer” ? /div 上面的代碼一去不復(fù)返。 Divs 從根本上來(lái)說(shuō)并沒(méi)有任何語(yǔ)義結(jié)構(gòu)，即使應(yīng)用上了 ID 還是如此。而在 HTML5 中，我們可以使用 header和 footer元素，上面的代碼就可以替換為： XML/HTML Code 復(fù)制內(nèi)容到剪貼板 header ? /header footer ? /footer 不過(guò)注意不要將這兩個(gè)元素與網(wǎng)站的頭部和腳部混淆起來(lái)。它們只是代表它們的容 器。 11. IE 和 HTML5 IE 理解新的 HTML5 元素需要費(fèi)一定的神，為了確保新的 HTML5 元素能夠以塊級(jí)元素正確顯示，有必要將它們用下面的代碼定義風(fēng)格： XML/HTML Code 復(fù)制內(nèi)容到剪貼板 header, footer, article, section, nav, menu, hgroup { display: block。 } 就算如此， IE 還是不知道這些元素究竟是什么，因而會(huì)無(wú)視這些格式，還需要用到下面的代碼來(lái)解決這個(gè)問(wèn)題： XML/HTML Code 復(fù)制內(nèi)容到剪貼板 (“article”)。 (“footer”)。 (“header”)。 (“hgroup”)。 (“nav”)。 (“menu”)。 12. 群組標(biāo)題（ hgroup） 假設(shè)一個(gè)網(wǎng)站有名稱、副標(biāo)題分別用 h h2標(biāo)簽來(lái)標(biāo)記，在 HTML4 中 還沒(méi)有一種能夠?qū)烧咧g的關(guān)系用很好的語(yǔ)義關(guān)系來(lái)描述的方法，此外，當(dāng)使用 h2 在頁(yè)面中顯示其它標(biāo)題時(shí)，在層級(jí)方面問(wèn)題就更多。而使用群組標(biāo)題 hgroup 元素，我們可以將這些標(biāo)題聚集在一起，而不影響文檔的整個(gè)綱要。 XML/HTML Code 復(fù)制內(nèi)容到剪貼板 header hgroup h1 Recall Fan Page /h1 h2 Only for people who want the memory of a lifetime. /h2 /hgroup /header （ Required）屬性 表單允許新的必要屬性，規(guī)定是否某個(gè)特定的輸入是必要的。你可以依據(jù)自己寫代碼的偏好，用下面兩種不同方式來(lái)聲明這個(gè)屬性： XML/HTML Code 復(fù)制內(nèi)容到剪貼板 input type=”text” name=”someInput” required 或者，更嚴(yán)謹(jǐn)： XML/HTML Code 復(fù)制內(nèi)容到剪貼板 input type=”text” name=”someInput” required=”required” 上面兩行代碼都行得通。用了這行代碼之后，并且瀏覽器支持 required 屬性的話， 輸入空白的表單就不會(huì)被提交。下面是一個(gè)簡(jiǎn)單的例子，同時(shí)我們也添加了占位符屬性： XML/HTML Code 復(fù)制內(nèi)容到剪貼板 form method=”post” action=” label for=”someInput” Your Name: /label input type=”text” id=”someInput” name=”someInput” placeholder=”Douglas Quaid” required button type=”submit”Go/button /form 如果輸入是空的，表單將無(wú)法提交，突出顯示文本框。 14. 自動(dòng)對(duì)焦（ Autofocus）屬性 同樣地，有了 HTML5 就不再需要用 JavaScript 方案來(lái)解決自動(dòng)對(duì)焦的問(wèn)題。如果某個(gè)輸入應(yīng)該被”選擇“或被聚焦，我們現(xiàn)在可以使用 HTML 的自動(dòng)對(duì)焦 autofocus 屬性。 XML/HTML Code 復(fù)制內(nèi)容到剪貼板 input type=”text” name=”someInput” placeholder=”Douglas Quaid” required autofocus 15. 音頻支持 我們?cè)僖膊恍枰揽康谌讲寮?lái)提供音頻了。 HTML5 提供了音頻元素 audio。目前，只有最新的瀏覽器支持 HTML5 音頻。 此時(shí)，最好還是提供一些向后兼容性。 XML/HTML Code 復(fù)制內(nèi)容到剪貼板 audio autoplay=”autoplay” controls=”controls” source src=”” / source src=” ″ / a href=” ″ Download this file./a /audio 說(shuō)道音頻格式， Mozilla 和 Webkit 都還沒(méi)有完全支持。 Firefox 希望看到一個(gè) .ogg 文件，Webkit 瀏覽器只支持最常見(jiàn)的 .mp3 擴(kuò)展名。這意味著說(shuō)，至少目前為止，你應(yīng)該創(chuàng)建兩個(gè)版本的音頻。當(dāng) Safari 加載頁(yè)面時(shí)，它認(rèn)不出 .ogg 格式的文件，將會(huì)跳過(guò)并移到mp3 版本上。請(qǐng)注意， IE 并不支持它， Opera 10 或更低的版本只支持 .wav 文件。 第 07 節(jié)、 必須知道的 22 個(gè)學(xué)習(xí) HTML5 的技巧 (三 ) 16. 視頻支持 音頻元素 audio非常像，在新的瀏覽器上也支持 HTML5 視頻。事實(shí)上，就在最近YouTube 宣布了一項(xiàng)新的 HTML5 視頻嵌入。可惜的是，由于 HTML5 說(shuō)明文件并沒(méi)有為視頻指出某個(gè)特定的編碼器，所以都主要取決于瀏覽器來(lái)決定了。盡管 Safari 和 IE9 可以支持 格式的視頻， Firefox 和 Opera 卻仍然堅(jiān)持 Theora 和 Vorbis 格式。因此，顯示 HTML5 視頻的時(shí)候，你必須提供兩種格式。 17. 視頻預(yù)先加載 你首先需要決定是否需要瀏覽器來(lái)預(yù)先加載視頻。是否有需 要？假設(shè)，一個(gè)訪客進(jìn)入某個(gè)專門用來(lái)顯示視頻的頁(yè)面，那么就非常有必要預(yù)先加載這個(gè)頁(yè)面節(jié)省一點(diǎn)等待的時(shí)間。你可以通過(guò)設(shè)置 preload=” preload”來(lái)預(yù)先加載視頻，或者之間添加 preload 也可以。 XML/HTML Code 復(fù)制內(nèi)容到剪貼板 video preload ? /video 18. 顯示控件 你可能已經(jīng)注意到，用上面的代碼的話，視頻將只會(huì)顯示成一個(gè)圖片，而沒(méi)有任何可控制的元件。為了獲取這些播放控件，我們必需在視頻元素里指定這些控件屬性。 XML/HTML Code 復(fù)制內(nèi)容到 剪貼板 video preload controls ? /video 19. 正則表達(dá)式 對(duì)虧了新模式的屬性，我們可以直接在代碼中插入一個(gè)正則表達(dá)式。 XML/HTML Code 復(fù)制內(nèi)容到剪貼板 form method=post action=” label for=”username”create a username: /label input id=” username” type=” text” name=” username” placeholder=” 4 10″ required=”required” autofocus=” autofocus” pattern=” [AZaz]{4,10}” button type=”submit”Go /button /form 如果你比較熟悉正則表達(dá)式的話就會(huì)注意到這個(gè)新模式 : [AZaz]{4,10}只接受大小寫字母。這個(gè)字符串最少必需有四個(gè)字符，最多是十個(gè)字符。 20. 檢測(cè)瀏覽器對(duì)屬性的支持 前面提到過(guò)并非所有的瀏覽器都支持這些屬性，那是否有什么方法能夠判斷瀏覽器是否能夠識(shí)別它們呢？這個(gè)問(wèn)題問(wèn)得非常好，這里給大家介紹兩種方式，第一個(gè)選擇是使用Modernizr 來(lái)檢測(cè)，或者你也可以創(chuàng)建并剖析這些元素來(lái)看看瀏覽器都有什么能力。例如，在前面的例子里，如果我們要確定瀏覽器是否能夠執(zhí)行 pattern 屬性，就可以在頁(yè)面上添加 JavaScript: JavaScript Code 復(fù)制內(nèi)容到剪貼板 alert( ’pattern’ in (‘input’) ) // boolean。 實(shí)際上，這是確定瀏覽器兼容性的一種非常常用的方法。 jQuery 庫(kù)利用了這個(gè)技巧。上面的代碼里，我們創(chuàng)建了一個(gè)新的輸入元素，并確認(rèn) pattern 屬性是否能夠被識(shí)別。如果能夠識(shí)別的話，瀏覽器就支持這個(gè)功能，否則就不支持。 JavaScript Code 復(fù)制內(nèi)容到剪貼板 script if (!’pattern’ in (‘input’) ) { // do client/server side validation } /script 記 住，這將需要依靠 JavaScript 來(lái)實(shí)現(xiàn)！ 21. Mark 元素 mark 元素的主要功能就是在頁(yè)面中高亮顯示那些需要在視覺(jué)上向用戶突出其重要性的文字。包裹在此標(biāo)簽里的字符串必須與用戶當(dāng)前的行為相關(guān)。例如，如果我在一些博客中搜索“ Open your Mind” ，我可以使用在 mark標(biāo)簽里使用 JavaScript 來(lái)包裹每一次動(dòng)作。 XML/HTML Code 復(fù)制內(nèi)容到剪貼板 h3 search results /h3 h6 They were interrupted, just after Quato said, mark”O(jiān)pen your Mind”/mark. /h6 22. 何時(shí)使用 div 是否還需要使用 div標(biāo)簽?zāi)?？?dāng)然需要。例如，如果你想在一個(gè)元素里將一段代碼包裹住，特別是為了內(nèi)容的定位， div 將會(huì)是非常理想的選擇。不過(guò)，如果不是上述情況而是要包裹博客文章、或者頁(yè)腳的鏈接列表，建議你分別使用 article和 nav元素。