|
|
英文原文：HTML5 fundamentals, Part 2: Organizing inputs
對于一個企業來說，管理、數據分析、營銷策略等都很重要，然而，如果沒有通過網站提供合適的數據窗口給潛在客戶使用 —— 或是激發起用戶的使用興趣 —— 那么就缺失了把站點訪問者轉化為客戶的最基本的入口。而企業的主要目標就是通過努力提供積極的、友好的用戶體驗，促進用戶與企業之間的交互。
交互的核心是站點中的表單，這些表單方便了與用戶的互動交流，友好的互動體驗會促進網站訪問者轉化為客戶。表單是促進網站所有者或者代理商與網站用戶之間交互的核心因素，因此，它們在設計和開發網站過程中就顯得極為重要。
核心中的核心是這些控件 —— 單選按鈕、復選框、文本框、數字的微調控制器等等。它們是用戶與網站對話時必不可少的元素。換句話說，沒有這些控件實現的完整功能，就不可能進行對話，也就沒有潛在的用戶轉化。
對轉化過程中的各種關系做仔細的考慮是很有必要的，這其中包括了站點訪問者和系統之間交互的各個方面，驗證速度、輸入、認知、導航、頁面的加載以及頁面的組織，所有這些方面都會對轉化過程產生影響。HTML5規范帶來的多媒體特性以及更豐富的表單控制選項，改進和增強了表單驗證，從而提高了網站將站點訪問者轉化成實際用戶的能力。
HTML5為Web驗證提供了強大的工具，為健全的Web計算環境保駕護航（一個關鍵的安全資產）。在設計和開發旨在招徠客戶的網站時，它就顯得格外重要。因此，HTML5的使用對于保證一個網站的用戶轉化率是必不可少的。如果你不能描繪出前景，那說明你有困惑；但如果你描繪出了前景，卻不能將之落到實處，那只是空中樓閣。美好的理想需要行動來實現。
不過沒關系，HTML5就能給你幫助。比如HTML5的email和telephone類型，為交流方式提供了更多選擇。HTML5清晰的語義結構讓交流更加通暢無阻（感謝嗷嗷的翻譯）。
我們的世界越來越以網絡為中心、充滿機遇的全球經濟前進的步伐越來越繁忙、云計算的快速發展、移動技術應用的指數級增長，以及跨平臺的電信解決方案 —— 既包含商業的也包含社會的 —— 很明顯，我們已經站在一個美麗新世界的大門口 —— 基于Web的計算與通信的世界。這是一個IT與通信相互融合并不斷進化的世界，同時這也是高度競爭的社會全球化發展的需要。
設計表單
在HTML5中，表單已經做了重大的修整，一些以前需要通過JavaScript編碼實現的功能現在無需編碼就可輕松實現。本文中的表單示例分析了HTML5新表單組件的用法。當然，首先是規劃表單。
表單的布局如圖1所示，需要開發表單頁面的三個區域：Header區、Form區和Footer區。Header區包含了封裝在<header></header>標簽中的頁面標題和副標題。在頁面的底部，Footer區包含了放在<footer></footer>標簽內的版權信息。我已經在該系列文章的第一部分所提供的例子中討論了Header區和Footer區的構建，如果你對<header>和<footer>標簽不太熟悉的話，請參閱該篇文章。
圖1. 表單頁面的布局
對這些表單的討論重點放在四個標簽上：
1. <form>
2. <fieldset>
3. <label>
4. <input>
在HTML5中，<form>標簽增加了兩個新的屬性：autocomplete和novalidate。autocomplete屬性用于啟用“下拉建議列表”功能，novalidate屬性用于關閉表單驗證功能，這在測試時會很有用。
<fieldset>標簽增加了三個新屬性：disable、name和form。“disable”屬性用于禁用<fieldset>，“name”屬性用于設置<fieldset>的名稱，“form”屬性的值是<fieldset>所屬的一個或多個表單的ID。在HTML5中，<fieldset>可處于其所屬的一個或多個表單的外部，當<fieldset>被置于表單的外部時，你必須設置該<fieldset>標簽的form屬性，這樣<fieldset>就可以正確地與一個或多個表單關聯起來。
<label>標簽增加了一下新屬性：form，該屬性值是<label>所屬的一個或多個表單的ID。<label>標簽也可放置在表單的外部，因此這里的form屬性也是用于關聯<label>標簽和對應的表單。
<input>標簽引入了一些新的類型與屬性，增強了表單的可用性。HTML5引入了一些新的input類型，用于對數據進行組織和歸類，這跟HTML5總的目標（更懂語義）是一致的（感謝巴蠻子的翻譯）。“形式應該服從于功能”（form should follow function）這句古訓很適合于描述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
在網頁的創建過程中，你會用到這些類型和屬性中的大部分。
創建表單
圖2所示的是一個 Classical Music Place 網頁，一個提供作曲家作品下載的站點，它還允許古典音樂愛好者上傳他們的作品錄音，這就是你要創建的頁面。
圖2. Classical Music Place的表單
表單的結構從<form>標簽開始，在該例子中，你用到了新的autocomplete屬性，如下所示：
<form id="orderForm" autocomplete="on"
action="Javascript:alertValues();" method="get">
it知識庫：HTML5基礎，第2部分：組織頁面的輸入，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
