上一節(jié)：HTML5基礎(chǔ)，第1部分：初試鋒芒

　　英文原文：HTML5 fundamentals, Part 2: Organizing inputs

　　對于一個(gè)企業(yè)來說，管理、數(shù)據(jù)分析、營銷策略等都很重要，然而，如果沒有通過網(wǎng)站提供合適的數(shù)據(jù)窗口給潛在客戶使用 —— 或是激發(fā)起用戶的使用興趣 —— 那么就缺失了把站點(diǎn)訪問者轉(zhuǎn)化為客戶的最基本的入口。而企業(yè)的主要目標(biāo)就是通過努力提供積極的、友好的用戶體驗(yàn)，促進(jìn)用戶與企業(yè)之間的交互。

　　交互的核心是站點(diǎn)中的表單，這些表單方便了與用戶的互動(dòng)交流，友好的互動(dòng)體驗(yàn)會(huì)促進(jìn)網(wǎng)站訪問者轉(zhuǎn)化為客戶。表單是促進(jìn)網(wǎng)站所有者或者代理商與網(wǎng)站用戶之間交互的核心因素，因此，它們在設(shè)計(jì)和開發(fā)網(wǎng)站過程中就顯得極為重要。

　　核心中的核心是這些控件 —— 單選按鈕、復(fù)選框、文本框、數(shù)字的微調(diào)控制器等等。它們是用戶與網(wǎng)站對話時(shí)必不可少的元素。換句話說，沒有這些控件實(shí)現(xiàn)的完整功能，就不可能進(jìn)行對話，也就沒有潛在的用戶轉(zhuǎn)化。

　　對轉(zhuǎn)化過程中的各種關(guān)系做仔細(xì)的考慮是很有必要的，這其中包括了站點(diǎn)訪問者和系統(tǒng)之間交互的各個(gè)方面，驗(yàn)證速度、輸入、認(rèn)知、導(dǎo)航、頁面的加載以及頁面的組織，所有這些方面都會(huì)對轉(zhuǎn)化過程產(chǎn)生影響。HTML5規(guī)范帶來的多媒體特性以及更豐富的表單控制選項(xiàng)，改進(jìn)和增強(qiáng)了表單驗(yàn)證，從而提高了網(wǎng)站將站點(diǎn)訪問者轉(zhuǎn)化成實(shí)際用戶的能力。

　　HTML5為Web驗(yàn)證提供了強(qiáng)大的工具，為健全的Web計(jì)算環(huán)境保駕護(hù)航（一個(gè)關(guān)鍵的安全資產(chǎn)）。在設(shè)計(jì)和開發(fā)旨在招徠客戶的網(wǎng)站時(shí)，它就顯得格外重要。因此，HTML5的使用對于保證一個(gè)網(wǎng)站的用戶轉(zhuǎn)化率是必不可少的。如果你不能描繪出前景，那說明你有困惑；但如果你描繪出了前景，卻不能將之落到實(shí)處，那只是空中樓閣。美好的理想需要行動(dòng)來實(shí)現(xiàn)。

　　不過沒關(guān)系，HTML5就能給你幫助。比如HTML5的email和telephone類型，為交流方式提供了更多選擇。HTML5清晰的語義結(jié)構(gòu)讓交流更加通暢無阻（感謝嗷嗷的翻譯）。

　　我們的世界越來越以網(wǎng)絡(luò)為中心、充滿機(jī)遇的全球經(jīng)濟(jì)前進(jìn)的步伐越來越繁忙、云計(jì)算的快速發(fā)展、移動(dòng)技術(shù)應(yīng)用的指數(shù)級增長，以及跨平臺(tái)的電信解決方案 —— 既包含商業(yè)的也包含社會(huì)的 —— 很明顯，我們已經(jīng)站在一個(gè)美麗新世界的大門口 —— 基于Web的計(jì)算與通信的世界。這是一個(gè)IT與通信相互融合并不斷進(jìn)化的世界，同時(shí)這也是高度競爭的社會(huì)全球化發(fā)展的需要。

　　設(shè)計(jì)表單

　　在HTML5中，表單已經(jīng)做了重大的修整，一些以前需要通過JavaScript編碼實(shí)現(xiàn)的功能現(xiàn)在無需編碼就可輕松實(shí)現(xiàn)。本文中的表單示例分析了HTML5新表單組件的用法。當(dāng)然，首先是規(guī)劃表單。

　　表單的布局如圖1所示，需要開發(fā)表單頁面的三個(gè)區(qū)域：Header區(qū)、Form區(qū)和Footer區(qū)。Header區(qū)包含了封裝在<header></header>標(biāo)簽中的頁面標(biāo)題和副標(biāo)題。在頁面的底部，F(xiàn)ooter區(qū)包含了放在<footer></footer>標(biāo)簽內(nèi)的版權(quán)信息。我已經(jīng)在該系列文章的第一部分所提供的例子中討論了Header區(qū)和Footer區(qū)的構(gòu)建，如果你對<header>和<footer>標(biāo)簽不太熟悉的話，請參閱該篇文章。

　　圖1. 表單頁面的布局

　　對這些表單的討論重點(diǎn)放在四個(gè)標(biāo)簽上：

　　1. <form>
　　2. <fieldset>
　　3. <label>
　　4. <input>

　　在HTML5中，<form>標(biāo)簽增加了兩個(gè)新的屬性：autocomplete和novalidate。autocomplete屬性用于啟用“下拉建議列表”功能，novalidate屬性用于關(guān)閉表單驗(yàn)證功能，這在測試時(shí)會(huì)很有用。

　　<fieldset>標(biāo)簽增加了三個(gè)新屬性：disable、name和form。“disable”屬性用于禁用<fieldset>，“name”屬性用于設(shè)置<fieldset>的名稱，“form”屬性的值是<fieldset>所屬的一個(gè)或多個(gè)表單的ID。在HTML5中，<fieldset>可處于其所屬的一個(gè)或多個(gè)表單的外部，當(dāng)<fieldset>被置于表單的外部時(shí)，你必須設(shè)置該<fieldset>標(biāo)簽的form屬性，這樣<fieldset>就可以正確地與一個(gè)或多個(gè)表單關(guān)聯(lián)起來。

　　<label>標(biāo)簽增加了一下新屬性：form，該屬性值是<label>所屬的一個(gè)或多個(gè)表單的ID。<label>標(biāo)簽也可放置在表單的外部，因此這里的form屬性也是用于關(guān)聯(lián)<label>標(biāo)簽和對應(yīng)的表單。

　　<input>標(biāo)簽引入了一些新的類型與屬性，增強(qiáng)了表單的可用性。HTML5引入了一些新的input類型，用于對數(shù)據(jù)進(jìn)行組織和歸類，這跟HTML5總的目標(biāo)（更懂語義）是一致的（感謝巴蠻子的翻譯）。“形式應(yīng)該服從于功能”（form should follow function）這句古訓(xùn)很適合于描述HTML5的表單功能。

　　在HTML5中，表單的<input>域可以處在<form>標(biāo)簽的外部，“form”屬性標(biāo)識(shí)了"input"域所屬的一個(gè)或多個(gè)表單，還可以通過引用form的ID來標(biāo)識(shí)其所屬的表單。表1給出了新的<input>類型。

　　表1. 新的<input>類型

color　　date　　datetime　　datetime-local　　month
week　　time 　　email　　number　　range
search　　tel　　url

　　表2. 新的<input>屬性

autocomplete　　autofocus　　form　　formaction　　formenctype
formmethod　　formnovalidate　　formtarget　　height　　max
min　　multiple　　pattern　　placeholder　　required
step

　　在網(wǎng)頁的創(chuàng)建過程中，你會(huì)用到這些類型和屬性中的大部分。

　　創(chuàng)建表單

　　圖2所示的是一個(gè) Classical Music Place 網(wǎng)頁，一個(gè)提供作曲家作品下載的站點(diǎn)，它還允許古典音樂愛好者上傳他們的作品錄音，這就是你要?jiǎng)?chuàng)建的頁面。

　　圖2. Classical Music Place的表單

　　表單的結(jié)構(gòu)從<form>標(biāo)簽開始，在該例子中，你用到了新的autocomplete屬性，如下所示：

<form id="orderForm" autocomplete="on" 
action="Javascript:alertValues();" method="get">        

        

        
        
      
        
it知識(shí)庫：HTML5基礎(chǔ)，第2部分：組織頁面的輸入，轉(zhuǎn)載需保留來源！
        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。