HTML5基礎知識：與訪問者互動

首先介紹 HTML5 中新增加的標記和頁面的組織，提供有關 Web 頁面設計的高級資訊、表單的創建、API 的使用和價值，以及 Canvas 提供的種種創新可能性。 第 2 部分介紹 HTML5 表單控制項的概念，並簡單介紹了 JavaScript 和 CSS3 的作用。

管理、資料分析、行銷策略和企業級機構的其他功能都很重要。 然而，如果沒有一個您潛在客戶可使用的（或願意使用）成功數位視窗，則網站訪問者轉換開發的必要初始流程將缺失。 一個積極且方便使用的體驗可以提高工作所需的交互性，是機構的主要目標。

交互的核心是該網站的表單。 它們能促進與使用者的互動交流，因此可以通過轉換網站訪問者來加快推進網站建設這個目標。 表單是促進網站擁有者或代理與網站使用者之間交互的核心因素，正因為如此，它們對於網站的設計和開發極端重要。

該核心的中心可以在控制項中找到，選項按鈕、核取方塊、文字方塊和數位微調框等。 這些元素在網站使用者與網站的對話中是必不可少的。 換句話說，如果沒有全功能的控制項（無論是控制項的 「機械」 操作，還是給定任務控制項的適當性），就不可能有任何對話，因此，不會有潛在的轉換。

當務之急是對轉換過程中的關係加以仔細考慮，包括網站訪問者和在用系統之間的交互的各個方面。 驗證、輸入、識別、導航、頁面載入的速度，以及頁面如何設置等，均會影響轉換過程。 驗證的改進和增強，所提供更多種類的表單控制項選項，以及 HTML5 規範的總體多媒體性質，均有助於提高 HTML5 將網站訪問者轉化為實際網站使用者的效力。

HTML5 是驗證和保證基於 Web 計算良好執行的非常有力的工具，一個關鍵的安全資產。 它對於為了吸引顧客的網站設計和開發尤其重要。 因此，其使用對於維持健康的轉化率是必不可少的。 如果您無法描繪前景，您就麻煩了；如果不能轉換您所描繪的前景，等待您的就是硬著陸。

HTML5 為您提供了説明。 如 email 和 telephone 等 HTML5 類型促進了廣泛的通信選項。 結合來自 HTML5 的語義基礎的結構清晰，使您和世界其他人之間的清晰對話並沒有障礙。

在我們這個以網路為中心的世界裡，日益增加的隨機性全球經濟忙碌步伐、雲計算的快速發展、移動技術使用呈指數增長，以及跨平臺的電信解決方案（商用和社交），很明顯，我們正站在一個基於 Web 計算和通信的勇敢新世界的門檻。 這個新世界既代表功能，也代表諸多通信和 IT 元素，以及對競爭激烈的全球社會需求之間不斷發展的密切結合所產生的衍生物。

設計表單

在 HTML5 中，表單已進行了重大改造。 以前需要 JavaScript 編碼的若干項任務現在已經不需要編碼就能輕鬆地執行。 本文的表單示例分析了 HTML5 的表單創新套件的使用。 在這個過程中的第一步，當然是規劃表單。

您將開發的表單示例的佈局如圖 1 所示。 您將開發表單頁面的三個區域：頁眉 (Header) 區、表單 (Form) 區和頁腳 (Footer) 區。 頁眉區包含了打包在 <header></header> 標記中的頁面標題和副標題。 在頁面底部，頁腳區包含 <footer></footer> 標記中的版權資訊。 我已在本系列 HTML5 基礎知識，第 1 部分 提供的示例中討論過頁眉區和頁腳區：如果您尚未熟悉 <header> 和 <footer> 標記，請參閱該文章。

圖 1. 表單頁面配置

關於該表單的討論主要集中在四個標記：

在 HTML5 中，已向 <form> 標記添加了兩個新的屬性：autocomplete 和 novalidate。 autocomplete 屬性支援像 Google 等網站上出現的下拉建議清單。 novalidate 屬性關閉表單的驗證，這在測試過程中很有有用。

<fieldset> 標記擁有三個新屬性：disable、name 和 form。 disable 屬性禁用 <fieldset>。 name 屬性設置 <fieldset> 的名稱。 form 屬性值是 <fieldset> 所屬的一個或多個表單的 ID。 在 HTML5 中，一個 <fieldset> 可以在其所屬的一個或多個表單的外部。 當 <fieldset> 被放在表單外部時，您必須設置 <fieldset> 標記的 form 屬性，使 <fieldset> 可以與一個或多個正確的表單關聯。

<label> 標記定義輸入元素的類別，它有一個新屬性：form。 form 屬性值是 <label> 所屬的一個或多個表單的 ID。 <label> 標記也可以被放在表單的外部，即 form 屬性在這裡也用於關聯 <label> 和相應的表單。

<input> 標記擁有若干個新類型以及屬性，可以增強表單的可用性。 HTML5 引入了大量旨在組織和分類資料的新輸入類型，複製 HTML5 的整體語義方法。 形式應該服從功能這句老話，對於描述 HTML5 的表單功能非常合適。

在 HTML5 中，表單的 <input> 欄位可以在 <form> 標記外部。 form 屬性標識輸入欄位所屬的一個或多個表單。 它也通過引用表單的 ID 標識它所屬的表單。 表 1 顯示新的 <input> 類型。

表 1. 新的 <input> 類型

表 2 顯示新的 <input> 屬性。

表 2. 新的 <input> 屬性

在 Web 頁面創建過程中，您會用到大部分這些類型和屬性。