全新改進(jìn)的HTML 5表單創(chuàng)建
經(jīng)歷了12年之久，萬維網(wǎng)的核心語言（HTML或超文本標(biāo)記語言）終于迎來了HTML5主要修訂版本。雖然萬眾期待的版本仍處于測試階段并且沒有宣布正式推出的日期，HTML5的網(wǎng)頁設(shè)計(jì)師和程序員已經(jīng)就有關(guān)最新功能展開了熱烈討論。 根據(jù)W3C，HTML5新特性的目的是在改善嵌入諸如視頻的多媒體支持，提供更好的用戶體驗(yàn)和更簡單的編程。雖然HTML4中已經(jīng)取得了巨大成功，（甚至被認(rèn)為最成功的標(biāo)記格式已經(jīng)發(fā)布）在互聯(lián)網(wǎng)世界的每個(gè)人都耐心等待，瀏覽器更新時(shí)得到最新的HTML版本。隨著時(shí)間推移，人們都很納悶，還等什么呢？事實(shí)上HTML5已經(jīng)被很多瀏覽器支持，比如Safari, Chrome, FireFox, Opera，以及其他主流瀏覽器。即使是IE9也準(zhǔn)備好了支持新的HTML5。HTML5的好處是，它是向后兼容的，因而，如果你樂于更新你的網(wǎng)站，現(xiàn)在你就可以。只是有幾個(gè)瀏覽器不完全兼容HTML5。 升級到HTML5是相當(dāng)容易的，因?yàn)樗cHTML4兼容。事實(shí)上，我們沒有理由摒棄HTML4的所有，因?yàn)镠TML5只是一個(gè)簡單的增加一堆新而酷的功能添加到HTML4核心語言。升級（如果你是這樣認(rèn)為）到HTML5是非常簡單的。你所需要做的的是修改你的DOCTYPE。這種新的更新有助于讓事情變得簡單，而在HTML4中有你可以使用不同的文檔類型，使得這一點(diǎn)更加棘手。你現(xiàn)在就可以更新你所有的網(wǎng)站，它們不會(huì)崩潰，因?yàn)樗蠬TML4的標(biāo)簽在HTML5還是100％支持的。 HTML5的表單定義了十幾個(gè)新的輸入類型和特性，這些新增元素可以讓程序員可以過個(gè)好日子。 輸入框占位符 我覺得這是HTML5新特性中我最愛的。所有開發(fā)人員都使用JavaScript和jQuery做輸入框占位符，而在HTML5中，開發(fā)人員可以非常容易的顯示一個(gè)占位符。什么是占位符？占位符就是出現(xiàn)在輸入框的提示文本，當(dāng)你點(diǎn)擊輸入欄位，它就自動(dòng)消失。你可以把用戶應(yīng)該輸入的文本樣例在文本框提示出來。一個(gè)例子，如果你有一個(gè)電話號碼輸入框，你可以設(shè)置占位符（XXX）XXX - XXXX，點(diǎn)擊它們時(shí)就會(huì)消失。我相信你已經(jīng)看過很多。 支持情況如下（本人開發(fā)過Android，是支持的——譯者注） IE FF Safari Chrome Opera iphone Android - 3.7+ 4+ 4+ 11+ 4+ - 自動(dòng)焦點(diǎn)事件 目前HTML4要做到自動(dòng)焦點(diǎn)的方式是使用JavaScript把焦點(diǎn)放在一個(gè)表單的第一個(gè)輸入字段。HTML5只要加載一個(gè)網(wǎng)頁，網(wǎng)頁自動(dòng)將焦點(diǎn)移到特定的輸入框，和JavaScript一樣。區(qū)別是什么？由于現(xiàn)在只是一個(gè)HTML標(biāo)記，用戶可以很容易地在他們的瀏覽器禁用此屬性。并非所有瀏覽器都支持 自動(dòng)對焦功能，但瀏覽器不只是簡單地忽略該屬性。如果你想所有瀏覽器都行得通，只需添加新的HTML5自動(dòng)對焦屬性，然后檢測瀏覽器是否支持自動(dòng)對焦。如果可以就不必使用自動(dòng)對焦的腳本，如果沒有的話，就要添加自動(dòng)對焦的腳本。 支持情況 FF IE Safari Chrome Opera iphone Android - 4+ 4+ 3+ 10+ - - HTML新定義13個(gè)輸入類型 電子郵件 我要說的第一個(gè)輸入框是電子郵件地址。那些不支持新類型的舊版瀏覽器也只是把它們看作一個(gè)文本框，99%的用戶不會(huì)注意到這個(gè)變化，直到他們提交表單（此時(shí)會(huì)有表單驗(yàn)證）。iPhone的用戶應(yīng)該知道在那些郵件地址的輸入框，當(dāng)輸入@和a的時(shí)候會(huì)出現(xiàn)一個(gè)簡單容易的鍵盤。如果你用過iPhone,你懂的。 網(wǎng)址 再說說網(wǎng)址輸入框。如果需要輸入網(wǎng)址，期望輸入的就像http://www.mazingtech.com。現(xiàn)在在網(wǎng)址類型輸入框會(huì)出現(xiàn)像iPhone里面一樣的一個(gè)可變化的虛擬鍵盤用戶可以很方便輸入斜線和.com。同樣的，在提交表單之前用戶對這些毫不知情。 數(shù)字 在過去要得到匹配的數(shù)字，你不得不使用jquery這樣的腳本來幫助驗(yàn)證輸入。HTML5增加了數(shù)字類型。還增加了一些額外的屬性（可選）： Min：指定輸入框可接受的最小輸入數(shù)字。Max：你猜對了，就是允許輸入的最大數(shù)字。Step:屬性輸入域合法的間隔，默認(rèn)是1. 如上圖，只允許輸入數(shù)字（大多數(shù)情況下不會(huì)注意到這些，直到提交的時(shí)候提示錯(cuò)誤），只有0，2，4合法（6不合法因?yàn)閟tep是10，合法的是0，10，20...——譯者注）。 Numbers as a Slider 數(shù)字滑動(dòng)條 我覺得這個(gè)真酷。HTML5允許你使用一個(gè)新的類型叫range，輸入框變成一個(gè)滑動(dòng)條。你的網(wǎng)站表單可以使用滑動(dòng)條了，這很酷吧。它的屬性標(biāo)記和數(shù)字類型一樣，只是把類型設(shè)置type='number'改成type='range'。 日歷表 迄今為止最好的新增元素，名為date和datetime的日期選擇器類型（還有其他額外的date/time類型，如時(shí)間，星期，月份，以及本地日歷）。很多JavaScript框架如jQuery UI和YIU已經(jīng)具備了這些控件，但增加一個(gè)日歷選擇器還是挺煩人的。HTML5定義一個(gè)新的本地日期選擇器，不必包括使用頁面上的腳本。截至目前，Opera是一個(gè)唯一完全支持此功能的，對于其他瀏覽器，你可以做一個(gè)備用腳本以備該瀏覽器不支持。不過，最終，所有的瀏覽器都會(huì)更新的。 搜索 HTML5增加了搜索輸入框類型。這沒什么，但對一些用戶來說是很好的變化。它可以簡單的把輸入框自動(dòng)圓邊，當(dāng)你開始輸入時(shí)，它右邊會(huì)有一個(gè)小X。目前并不是所有的瀏覽器支持。 顏色 HTML5還定義類型的顏色，它可以讓你選擇一種顏色，返回hexademical值。Opera11是唯一支持這種類型的瀏覽器。不過應(yīng)該不會(huì)有很多人使用這個(gè)類型，所以不支持也不是什么大問題。 表單驗(yàn)證 上面我們談到有關(guān)這些新的輸入類型，如電子郵件，日期，數(shù)量等HTML5新元素中，最令人興奮的新特性莫過于表單驗(yàn)證。大多數(shù)開發(fā)人員都做了表單驗(yàn)證，無論是客戶端或服務(wù)器端（我們兩個(gè)都做?。?。也許HTML5的表單驗(yàn)證器可能無法取代你的服務(wù)器端驗(yàn)證，但它肯定能最終取代你的客戶端驗(yàn)證。JavaScript驗(yàn)證的問題是，用戶很容易繞過它，可以很容易繞過它只需禁用JavaScript。現(xiàn)在HTML5，你不用有此擔(dān)心。下面是Chrome12的一個(gè)例子。所有的瀏覽器和操作系統(tǒng)對于錯(cuò)誤有不同的顯示方式，不過這是一個(gè)例子，讓你看清錯(cuò)誤可能發(fā)生的樣子。 所有的錯(cuò)誤都是HTML5原生提示的，并沒有使用JavaScript。 IE FF Safari Chrome Opera Iphone Andriod - 4+ 5+ 10+ 9+ - - 必需字段 HTML5的表單驗(yàn)證并不僅僅局限于驗(yàn)證字段的類型，它還允許調(diào)用一個(gè)新的額外的標(biāo)記，required。這個(gè)新屬性允許開發(fā)人員驗(yàn)證輸入框是否填寫，無需使用JavaScript。 每個(gè)開發(fā)人員都知道這些更新對縮短開發(fā)周期和增強(qiáng)的用戶體驗(yàn)都是至關(guān)重要。一旦所有的瀏覽器接受了HTML5，新一代的網(wǎng)站將超過任何人的期望。 那么你有了它。你可以HTML5中找到一個(gè)快速入門指南。如果你可以理解這篇文章的任何東西，請記住，HTML5不是什么可怕的麻煩。它將大大有助于開發(fā)者，而只要你有準(zhǔn)備所有HTML4網(wǎng)站已經(jīng)可以升級了！ 原文鏈接：webdesignledger.com 譯文鏈接：ArSui
【編輯推薦】
