亚洲免费在线-亚洲免费在线播放-亚洲免费在线观看-亚洲免费在线观看视频-亚洲免费在线看-亚洲免费在线视频

使用 HTML5 構(gòu)建下一代的 Web Form

系統(tǒng) 1653 0

使用 HTML5 構(gòu)建下一代的 Web Form

作者 蔣博 發(fā)布于 2009年6月22日 上午4時(shí)52分

HTML5 是由 WHATWG (Web Hypertext Application Technology Working Group) 發(fā)起的,最開始的名稱叫做Web Application 1.0,而后這個(gè)標(biāo)準(zhǔn)吸納了Web Forms 2.0的標(biāo)準(zhǔn),并一同被W3C組織所采用,合并成為下一代的HTML5標(biāo)準(zhǔn)。

前言

HTML語言作為如今編程最為廣泛的語言,具有易用、快捷、多瀏覽平臺(tái)兼容等特點(diǎn),但是隨著時(shí)代的進(jìn)步,HTML的標(biāo)準(zhǔn)卻停滯不前,這一次還在不斷 開發(fā)中的HTML5標(biāo)準(zhǔn)的更新可以說給這門標(biāo)記語言帶來了新的生命力。本文將著重討論HTML5中的Web Forms 2.0, 即表單的部分。

表單是網(wǎng)頁中常見的控件(集)。小到網(wǎng)站注冊(cè)登錄,大到一個(gè)企業(yè)的數(shù)據(jù)管理系統(tǒng),都基本上有表單的身影。表單之所以如此重要,主要是因?yàn)樗鼡?dān)負(fù)大量 的用戶和網(wǎng)頁后臺(tái)數(shù)據(jù)更新交互的任務(wù)。Web開發(fā)人員,對(duì)于網(wǎng)頁表單可以說又愛又恨,愛的是它方便的收集、組織數(shù)據(jù)的功能,恨的是它的功能很大程度上也就 僅此而已。一些在最終網(wǎng)站用戶看起來稀松平常的功能,比如說輸入類型檢查、表單校驗(yàn)、錯(cuò)誤提示等等,開發(fā)人員無不需要花費(fèi)大量精力利用 JavaScript和DOM編程來滿足這些天然所需的功能點(diǎn),而隨著Ajax的流行,出現(xiàn)的一些JavaScript的工具庫,比如Dojo, YUI等都提供了方便的JavaScript Widget或者API來減輕開發(fā)人員的負(fù)擔(dān)。

HTML5的表單新特性

HTML5 Web Forms 2.0是對(duì)目前Web表單的全面提升,它在保持了簡便易用的特性的同時(shí),增加了許多內(nèi)置的控件或者控件屬性來滿足用戶的需求,并且同時(shí)減少了開發(fā)人員的編程。在我看來,HTML5 主要在以下幾個(gè)方面對(duì)目前的Web表單做了改進(jìn):

  • 新的控件類型
    • 還在為類型檢查犯愁嗎,還在為那一長串看不太明白的檢驗(yàn)輸入的正則表達(dá)式而苦惱嗎,HTML5提供的一系列新的控件將天然的具備類型檢查的功能。比如說URL輸入框,Email輸入框等。
                  <input type="url"></input>
                  

      <input type="email"></input>

    • 當(dāng)然還有非常重要的日期輸入框,要知道使用JavaScript和CSS來“手工”制作一個(gè)日期輸入框還是非常花功夫的,類似Dojo,YUI這樣的類庫也無不在這個(gè)widget上面大做文章。
                  <input type="date"></input>
                
    • 作為我痛苦記憶的一部分,我經(jīng)常記得我們開發(fā)人員要為一個(gè)select下拉別表動(dòng)態(tài)的添加非常多的選項(xiàng),這些選項(xiàng)大多數(shù)都是來自數(shù)據(jù)庫,比如說國家、省市列表等等。這個(gè)事情非常繁瑣。HTML5將支持data屬性,為select控件外聯(lián)數(shù)據(jù)源!
                  <select data="http://domain/getmyoptions"></select>
                
  • 改 進(jìn)的 文件上傳 控件,你可以使用一個(gè)控件上傳多個(gè)文件,自行規(guī)定上傳文件的類型(accept),你甚至可以設(shè)定每個(gè)文件最大的大小 (maxlength)。你看出它和一般操作系統(tǒng)提供的 文件上傳 控件的區(qū)別了嗎,反正我覺得基本一致了。在HTML5應(yīng)用中, 文件上傳 控件將變得非常強(qiáng)大 和易用。
  • 重復(fù)(repeat)的模型,HTML5提供一套重復(fù)機(jī)制來幫助我們構(gòu)建一些重復(fù)輸入列表,其中包括一些諸如 add、remove、move-up,move-down的按鈕類型,通過這一套重復(fù)的機(jī)制,開發(fā)人員可以非常方便的實(shí)現(xiàn)我們經(jīng)常看到的編輯列表,這是 一個(gè)很常見的模式,我們可以增加一個(gè)條目、刪除某個(gè)條目、或者移動(dòng)某個(gè)條目等等。
  • 內(nèi)建的表單校驗(yàn)系統(tǒng),HTML5為不同類 型的輸入控件各自提供了新的屬性,來控制這些控件的輸入行為,比如我們常見的必填項(xiàng)required屬性,以及為數(shù)字類型控件提供的max、min等。 而在你提交表單的時(shí)候,一旦校驗(yàn)錯(cuò)誤,瀏覽器將不執(zhí)行提交操作,而會(huì)顯示相應(yīng)的檢驗(yàn)錯(cuò)誤信息。
            <input type="text" required></input>
            

    <input type="number" min=10 max=100></input>
  • XML Submission,我們一般常見的是form的編碼格式是application/x-www-form-urlencoded。開發(fā)人員都很清楚這 種格式,數(shù)據(jù)送到服務(wù)器端,可以方便的存取。HTML5將提供一種新的數(shù)據(jù)格式:XML Submission,即application/x-www-form+xml。簡單的舉例說,服務(wù)器端將直接接收到XML形式的表單數(shù)據(jù)。
            <submission>
            

    <field name="name" index="0">Peter</field>

    <field name="password" index="0">password</field>

    </submission>

實(shí)例分析

我將利用HTML5新的表單系統(tǒng), 做一個(gè)簡單的用戶注冊(cè)的界面,包括用戶名,密碼,出生日期,保密問題等內(nèi)容,代碼如下:

    <! doctype html>
    

<html>

<head>

<style>

p label {

width: 180px;

float: left;

text-align: right;

padding-right: 10px

}

table {

margin-left: 80px

}

table td {

border-bottom: 1px solid #CCCCCC

}

input.submit {

margin-left: 80px

}

</style>

</head>

<body>

<form action='/register' enctype="application/x-www-form+xml" method="post">

<p>

<label for='name'>ID(請(qǐng)使用Email注冊(cè))</label>

<input name='name' required type='email'></input>

</p>

<p>

<label for='password'>密碼</label>

<input name='password' required type='password'></input>

</p>

<p>

<label for='birthday'>出生日期</label>

<input type='date' name='birthday' />

</p>

<p>

<label for='gender'>國籍</label>

<select name='country' data='countries.xml'></select>

</p>

<p>

<label for='photo'>個(gè)性頭像</label>

<input type='file' name='photo' accept='image/*' />

</p>

<table>

<thead>

<td><button type="add" template="questionId">+</button> 保密問題</td>

<td>答案</td>

<td></td>

</thead>

<tr id="questionId" repeat="template" repeat-start="1" repeat-min="1" repeat-max="3">

<td><input type="text" name="questions[questionId].q"></td>

<td><input type="text" name="questions[questionId].a"></td>

<td><button type="remove">刪除</button></td>

</tr>

</table>

<p>

<input type='submit' value='send' class='submit' />

</p>

</form>

</body>

</html>

由于目前HTML5標(biāo)準(zhǔn)仍然在開發(fā)中,不同的瀏覽器對(duì)HTML5特性的支持都相當(dāng)有限。其中Opera在表單方面支持得比較好,本實(shí)例在Opera9上運(yùn)行一切正常,效果圖如下:

使用 HTML5 構(gòu)建下一代的 Web Form

這個(gè)實(shí)例運(yùn)用了一些HTML5的新的表單元素,比如email類型的輸入框(ID),日期類型的輸入框(出生日期)。并且使用了重復(fù)模型來引導(dǎo)用戶 填寫保密問題,而在個(gè)性頭像的上傳中,通過限制文件類型,方便用戶選擇圖片進(jìn)行合乎規(guī)范的內(nèi)容上傳。而用戶選擇國籍的下拉選擇輸入框中,采用的是外聯(lián)數(shù)據(jù) 源的形式,外聯(lián)數(shù)據(jù)源使用coutries.xml,內(nèi)容如下:

    <select xmlns="http://www.w3.org/1999/xhtml">
    

<option>China</option>

<option>Japan</option>

<option>Korea</option>

</select>

并且form的enctype是application/x-www-form+xml,也就是HTML5的XML提交。所以一旦form校驗(yàn)通 過,form的內(nèi)容將會(huì)以XML的形式提交。你還會(huì)發(fā)現(xiàn),在ID輸入框如果沒有值,或者輸入了非email類型的字符串時(shí),一旦試圖提交表單,就會(huì)有提示 錯(cuò)誤的信息出現(xiàn),而這都是瀏覽器內(nèi)置的。

結(jié)語

HTML5對(duì)表單控件的更新,無疑是很振奮人心的。本文描述了一部分表單的新特性,還有一部分新特性同樣很令人期待。相信隨著標(biāo)準(zhǔn)的深入開發(fā)以及瀏覽器對(duì)HTML5支持程度的進(jìn)一步提升,設(shè)計(jì)一個(gè)簡單易用的表單的工作,將變得非常輕松。

參考資料

  1. W3C HTML5 規(guī)范: http://www.w3.org/TR/html5/
  2. HTML5 與 HTML4的差異: http://www.w3.org/TR/html5-diff/
  3. Opera dev: Improve your forms with HTML5: http://dev.opera.com/articles/view/improve-your-forms-using-html5/
  4. Comparison of layout engines(HTML5):
    http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML_5)

關(guān)于作者

蔣博,主要從事Web前端技術(shù)的開發(fā)工作,在Web開發(fā)與性能分析以及敏捷實(shí)踐等領(lǐng)域有較豐富的經(jīng)驗(yàn)。對(duì)HTML5的發(fā)展以及各種 JavaScript類庫有比較濃厚的興趣,經(jīng)常關(guān)注社交型的網(wǎng)站發(fā)展情況,平常喜歡聽音樂,看一些歷史類書籍。(本文僅代表個(gè)人觀點(diǎn),與公司立場無 關(guān)。)

使用 HTML5 構(gòu)建下一代的 Web Form


更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主

微信掃碼或搜索:z360901061

微信掃一掃加我為好友

QQ號(hào)聯(lián)系: 360901061

您的支持是博主寫作最大的動(dòng)力,如果您喜歡我的文章,感覺我的文章對(duì)您有幫助,請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點(diǎn)擊下面給點(diǎn)支持吧,站長非常感激您!手機(jī)微信長按不能支付解決辦法:請(qǐng)將微信支付二維碼保存到相冊(cè),切換到微信,然后點(diǎn)擊微信右上角掃一掃功能,選擇支付二維碼完成支付。

【本文對(duì)您有幫助就好】

您的支持是博主寫作最大的動(dòng)力,如果您喜歡我的文章,感覺我的文章對(duì)您有幫助,請(qǐng)用微信掃描上面二維碼支持博主2元、5元、10元、自定義金額等您想捐的金額吧,站長會(huì)非常 感謝您的哦!!!

發(fā)表我的評(píng)論
最新評(píng)論 總共0條評(píng)論
主站蜘蛛池模板: 日日网站 | 亚洲欧洲国产精品你懂的 | 中文字幕在线视频观看 | 亚洲男女在线 | 99热久久这里只有精品9 | 国产在线视频色综合 | 亚洲大片免费看 | 日日夜夜精品免费视频 | 91粉色视频在线观看 | 久久99青青久久99久久 | 夭天干夜夜怕 | 成人免费牛牛在线视频 | 精品国产一区二区三区香蕉沈先生 | 天天干网站 | 日日日日操| 91av综合 | 狠狠狠色丁香婷婷综合久久88 | 国产精品久久久久影视青草 | 四虎视频网站 | 欧美性视频一区二区三区 | 奇米影视888狠狠狠777九色 | 91福利社在线观看 | 四虎影视1515hh四虎免费 | 欧美一级日韩在线观看 | 在线播放国产一区二区三区 | 成人免费精品视频 | 日本色综合 | 天天干天天干天天天天天天爽 | 99视频在线看观免费 | 不卡一级aaa全黄毛片 | 国产精品久久久久久久午夜片 | 中文字幕不卡免费高清视频 | 亚洲综合极品香蕉久久网 | 四虎影院在线视频 | 成人性生活免费看 | 成人免费国产欧美日韩你懂的 | 欧美一级毛片香蕉网 | 操操操爽爽爽 | 久草热线视频 | 国产三级久久 | 毛片高清 |