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

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

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

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

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

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

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

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

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

　　設(shè)計表單

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

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

　　圖1. 表單頁面的布局

　　對這些表單的討論重點放在四個標簽上：

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

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

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

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

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

　　在HTML5中，表單的<input>域可以處在<form>標簽的外部，“form”屬性標識了"input"域所屬的一個或多個表單，還可以通過引用form的ID來標識其所屬的表單。表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)建過程中，你會用到這些類型和屬性中的大部分。

　　創(chuàng)建表單

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

　　圖2. Classical Music Place的表單

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

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

        

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