簡單的技巧，用於更可用的形式

> Web表單：開發人員的恐懼和用戶的挫敗感。 但是聰明的CSS和JavaScript可以顯著改善這種常見的網絡體驗。本文探討了簡單的技術，以提高可用性，激發您創建自己的增強功能。

密鑰改進：

>
• >自動焦點：模擬Google的方法，通過自動將重點的注重量集合到頁面加載上。這提高了效率。
有效標籤：
• 利用元素來提高可用性和可訪問性。單擊標籤應聚焦或切換關聯的字段。 帶有CSS的視覺提示<label></label>>
：
• 使用CSS更改焦點上的邊框顏色，清楚地表明了當前有效的字段。 > JavaScript反饋和驗證：使用JavaScript進行動態反饋。 例如，更改輸入標籤顏色以反映數據有效性。
• 實時數據格式：使用JavaScript在提交前實時使用JavaScript進行格式化輸入數據（例如，電話號碼，日期）。
• 小變化，很大的影響
>

>讓我們從一個共同的增強開始：自動將主輸入字段聚焦。 假設您的目標字段具有ID“ Myfield”。以下是實現這一目標的幾種方法：

方法1（Google的方法）：

>

方法2（使用）：

>

window.onload>方法3（使用函數 - 最適合多個

事件）：

window.onload = function() { document.getElementById('myfield').focus(); };

> addEventonload>方法4（內聯位置）：>

addEvent(window, 'load', function() { document.getElementById('myfield').focus(); });
// addEvent function (from previous article) would be included here.

這些方法根據您的項目結構提供靈活性。 隨後的示例將主要顯示內聯方法，但請記住這些替代方法存在。

利用標籤

<input type="text" id="myfield" ...>  <!-- Place this JavaScript AFTER the input field -->

>

>元素通常被忽略但至關重要。 他們將描述性文本鏈接到形成字段。單擊標籤聚焦關聯的字段（或切換複選框/無線電按鈕）。 例如：

為提高標籤可見度，使用CSS更改光標：>

視覺焦點提示<label></label>

<label for="username">Username:</label> <input type="text" id="username">

>用CSS突出顯示活動輸入字段：

label { cursor: pointer; cursor: hand; } /* handles IE compatibility */

對於IE的兼容性（缺少

支持），請使用JavaScript： 或，對於帶有許多字段的清潔代碼，請使用上一節中所示的

方法。

。

input { border: 2px solid #ccc; }
input:focus { border: 2px solid #000; }

>增強文本字段

:focus

• >選擇焦點上的選擇：自動在焦點上選擇默認文本：

• >動態標題更新：>以用戶類型更新頁面標題：

window.onload = function() { document.getElementById('myfield').focus(); };

• > 派生的字段值：自動基於另一個字段（例如，從標題生成URL）：>

addEvent(window, 'load', function() { document.getElementById('myfield').focus(); });
// addEvent function (from previous article) would be included here.

驗證和反饋

>始終在服務器端驗證，但是客戶端驗證提供了立即的反饋。 使用圖標指示字段狀態（必需，錯誤，完成）。

>

（CSS，JavaScript和HTML示例此處都將包括在內，類似於原始文本，但有可能簡化或重組，以清晰。

數據格式

實時重新格式化數據（例如，美國電話號碼）： （此處包括電話號碼格式的JavaScript示例。）

>本文提供了基礎。 探索這些技術並以它們為基礎，以創建更具用戶友好和高效的形式。 切記始終優先考慮安全端驗證的安全性。

>

（FAQS部分將包括在這裡，類似於原始但有可能改寫的，以獲得更好的流動和簡潔性。）

以上是簡單的技巧，用於更可用的形式的詳細內容。更多資訊請關注PHP中文網其他相關文章！