如何設計適合各種名稱和地址格式的表單？微型表單故障會讓使用者感到恐懼，甚至可能因此離開您的網站，或是放棄完成購買或註冊流程。
本程式碼研究室將說明如何建構易於使用的表單，適合大多數使用者存取。
步驟 1：善用 HTML 元素和屬性
在本程式碼研究室中，您將使用空白表單開始在這個部分中，只使用標題和按鈕本身。然後開始新增輸入內容。(隨附 CSS 和一些 JavaScript)
按一下「Remix to Edit」，讓專案可供編輯。
使用下列程式碼在
<form>元素中新增名稱欄位：
<section>
<label for="name">Name</label>
<input id="name" name="name">
</section>
這類欄位可能看起來不僅複雜且重複，也足以因應各種狀況。
您將 label 的 for 屬性與 input 的 name 或 id 進行比對，將 label 與 input 建立關聯。輕觸一下或點選標籤，即可將焦點移至輸入項目上，目標也比本身的輸入內容大上許多，很適合手指、拇指和滑鼠點擊！當標籤或標籤的輸入內容成為焦點時，螢幕閱讀器會朗讀標籤文字。
那 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>
您會發現「郵遞區號」是選填欄位，因為許多國家/地區並未使用郵遞區號。
(全球來源簿提供 194 個不同國家/地區的地址格式資訊，包括地址範例)。使用 Country or
region 標籤取代「Country」，因為部分選項 (例如英國) 並非單一國家/地區 (儘管有 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"會設定手機鍵盤的輸入鍵標籤，表示這是最後一個欄位，現在可以提交表單 (預設為next)。
完整的地址表單應如下所示：
- 在其他裝置上試用表單。您指定了哪些裝置和瀏覽器？如何改善這份表單？
您可以透過下列幾種方式在不同裝置上測試表單：
- 使用 Chrome 開發人員工具裝置模式模擬行動裝置。
- 將電腦中的網址傳送到手機。
- 使用 BrowserStack 等服務，對各種裝置和瀏覽器進行測試。
進一步探索
分析與即時使用者監控：讓實際使用者測試及監控您的表單設計的效能和可用性，並且檢查變更是否成功。您應該監控載入效能和其他網站體驗指標，以及網頁分析資料 (在未填寫地址表單的情況下，使用者離開地址表單的比例為何？使用者在您的地址表單網頁上停留多久的時間？) 和互動分析 (使用者會與哪些網頁元件互動？)
您的使用者位於何處？他們該如何設定地址格式？地址元件 (如郵遞區號) 使用什麼名稱？Frank 的郵政地址綜合指南提供實用連結，以及詳盡的地址格式詳細說明，範圍涵蓋 200 多個國家/地區。
國家/地區選取器的可用性不理想，因此會遭到記名。建議您避免為列出較長項目的項目選取元素，以及 ISO 3166 國家/地區代碼標準目前列出 249 個國家/地區！建議您考慮改用其他
<select>，例如 Baymard Institute 國家/地區選取器。你能設計更適合內含大量項目的清單嗎？如何確保設計可在各種裝置和平台上存取？(
<select>元素不適用於大量項目，但至少可以在所有瀏覽器和輔助裝置上使用！)這篇網誌文章 <input type="country" /> 說明瞭國家/地區選取器標準化作業的複雜度。國家/地區名稱的本地化也可能有問題國家/地區清單提供的工具可讓您下載多種語言的國家/地區代碼和名稱。