如何設計表單，以便處理各種姓名和地址格式？表單出現輕微錯誤會讓使用者感到不悅，甚至可能導致他們離開網站，或放棄完成購買或註冊程序。
本程式碼研究室將說明如何建構易於使用且符合無障礙設計的資料表單，以便大多數使用者使用。
步驟 1：充分運用 HTML 元素和屬性
您將從空白表單開始本程式碼研究室的這一部分，只需標題和按鈕即可。接著，您將開始新增輸入內容。(CSS 和少量 JavaScript 已包含在內)。
按一下「Remix to Edit」，即可編輯專案。
使用以下程式碼，在
<form>元素中新增名稱欄位：
<section>
<label for="name">Name</label>
<input id="name" name="name">
</section>
這麼做看起來可能很複雜，而且重複性很高，但這麼做已經能發揮很大的效用。
您可以將 label 與 input 建立關聯，方法是將 label 的 for 屬性與 input 的 name 或 id 進行比對。輕觸或點選標籤可將焦點移至其輸入內容，讓目標比輸入內容本身還要大得多，這對手指、大拇指和滑鼠點擊都很有幫助！當標籤或標籤的輸入內容獲得焦點時，螢幕閱讀器會朗讀標籤文字。
name="name" 呢？這是與這項輸入內容相關聯的名稱 (剛好是「name」)，會在提交表單時傳送至伺服器。加入 name 屬性也表示 FormData API 可以存取這個元素的資料。
步驟 2：新增屬性，協助使用者輸入資料
在 Chrome 中輕觸或點選「名稱」輸入框會發生什麼情況？您應該會看到瀏覽器儲存的自動填入建議，並根據 name 和 id 值，猜測適合此輸入內容的內容。
接著在輸入程式碼中加入 autocomplete="name"，如下所示：
<section>
<label for="name">Name</label>
<input id="name" name="name" autocomplete="name">
</section>
在 Chrome 中重新載入頁面，然後輕觸或點選「名稱」輸入框。你發現哪些差異？
您應該會發現細微的變化：使用 autocomplete="name" 時，系統會根據先前在表單輸入內容中使用的特定值提供建議，這些輸入內容也含有 autocomplete="name"。瀏覽器不會只是猜測可能適合的內容，而是由您自行決定。您也會看到「管理…」選項，可查看及編輯瀏覽器儲存的名稱和地址。
現在請新增限制驗證屬性
maxlength、pattern 和 required，讓輸入程式碼如下所示：
<section>
<label for="name">Name</label>
<input id="name" name="name" autocomplete="name"
maxlength="100" pattern="[\p{L} \-\.]+" required>
</section>
maxlength="100"表示瀏覽器不允許輸入超過 100 個半形字元的內容。pattern="[\p{L} \-\.]+"使用規則運算式，允許使用 Unicode 字母字元、連字號和句號。也就是說，Françoise 或 Jörg 這類名稱不會歸類為「無效」。但如果您使用\w值，則情況並非如此，因為該值只允許使用拉丁字母。required代表「必要」！如果這個欄位沒有資料，瀏覽器就不會允許提交表單，並會在您嘗試提交時發出警告並醒目顯示輸入內容。完全不需要額外程式碼！
如要測試表單在有無這些屬性的情況下如何運作，請嘗試輸入資料：
- 嘗試輸入不符合
pattern屬性的值。 - 請嘗試提交空白輸入內容的表單。您會看到內建瀏覽器功能警告空白的必要欄位，並將焦點設在該欄位上。
步驟 3：在表單中新增彈性地址欄位
如要新增地址欄位，請在表單中加入以下程式碼：
<section>
<label for="address">Address</label>
<textarea id="address" name="address" autocomplete="address"
maxlength="300" required></textarea>
</section>
textarea 是使用者輸入地址最彈性的方式，而且非常適合剪下和貼上。
除非必要，否則請勿將地址表單分割成街道名稱和門牌號碼等元件。請勿強迫使用者將地址填入不相符的欄位。
接著新增「郵遞區號」和「國家/地區」欄位。為了簡化起見，這裡只列出前五個國家/地區。已完成的地址表單會列出完整清單。
<section>
<label for="postal-code">ZIP or postal code (optional)</label>
<input id="postal-code" name="postal-code"
autocomplete="postal-code" maxlength="20">
</section>
<section id="country-region">
<label for="">Country or region</label>
<select id="country" name="country" autocomplete="country"
required>
<option selected value="SPACER"> </option>
<option value="AF">Afghanistan</option>
<option value="AX">Åland Islands</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
</select>
</section>
您會發現「郵遞區號」是選填項目，這是因為許多國家/地區不使用郵遞區號。(Global Sourcebook 提供 194 個國家/地區的地址格式資訊，包括示例地址)。我們使用「國家/地區或區域」標籤，而非「國家/地區」標籤，是因為完整清單中的部分選項 (例如英國) 並非單一國家/地區 (儘管 autocomplete 值是單一國家/地區)。
步驟 4：讓消費者輕鬆輸入運送和帳單地址
您已建立功能強大的地址表單，但如果您的網站需要多個地址 (例如運送和帳單地址) 呢？請嘗試更新表單，讓客戶輸入運送和帳單地址。如何讓資料輸入作業變得更快速簡單，尤其是當兩個地址相同時？本程式碼研究室的相關文章會說明處理多個地址的技術。無論您採取何種做法，請務必使用正確的 autocomplete 值！
步驟 5：新增電話號碼欄位
如要新增電話號碼輸入欄位，請在表單中加入以下程式碼：
<section>
<label for="tel">Telephone</label>
<input id="tel" name="tel" autocomplete="tel" type="tel"
maxlength="30" pattern="[\d \-\+]+" enterkeyhint="done"
required>
</section>
請使用單一輸入方式輸入電話號碼，不要將號碼分成多個部分。這樣一來，使用者就能更輕鬆地輸入資料或複製及貼上內容，驗證作業也更簡單，瀏覽器也能自動填入資料。
有兩個屬性可改善使用者輸入電話號碼的體驗：
type="tel"可確保行動使用者取得正確的鍵盤。enterkeyhint="done"會設定行動鍵盤的 Enter 鍵標籤，顯示這是最後一個欄位，且表單現在可提交 (預設為next)。
完整的地址表單現在應如下所示：
- 請嘗試在不同裝置上測試表單。您指定的是哪些裝置和瀏覽器？如何改善表單？
您可以透過多種方式在不同裝置上測試表單：
- 使用 Chrome 開發人員工具的裝置模式模擬行動裝置。
- 將網址從電腦傳送到手機。
- 使用 BrowserStack 等服務，在各種裝置和瀏覽器上進行測試。
進一步
分析和真實使用者監控：啟用表單設計的效能和可用性，以便測試及監控真實使用者，並檢查變更是否成功。您應監控載入效能和其他網站體驗核心指標，以及網頁分析 (有多少使用者在未完成地址表單後離開？使用者在地址表單頁面上停留多久？) 和互動分析 (使用者是否與哪些網頁元件互動？)。
您的使用者位於何處？他們的地址格式為何？他們會使用哪些名稱來表示地址元件，例如郵遞區號？Frank's Compulsive Guide to Postal Addresses 提供實用連結和詳細指南，詳細說明 200 多個國家/地區的地址格式。
國家/地區選取器的可用性向來惡名昭彰。最好避免為長項目清單使用選取元素，而 ISO 3166 國家/地區代碼標準目前列出 249 個國家/地區！您可以考慮使用 Baymard Institute 國家/地區選取器等替代方案，而非
<select>。您能否為含有大量項目的清單設計更好的選取器？您如何確保設計可在各種裝置和平台上使用？(
<select>元素不適用於大量項目，但至少可在幾乎所有瀏覽器和輔助裝置上使用！)部落格文章「<input type="country" />」討論了標準化國家/地區選取器的複雜性。國家/地區名稱的本地化也可能會出現問題。國家/地區清單提供工具，可讓您以多種語言和格式下載國家/地區代碼和名稱。