Web 表單
本模組提供一系列文章，幫助您掌握 Web 表單的基礎知識。Web 表單是與使用者互動的強大工具——最常見的用法是收集使用者資料，或允許使用者控制使用者介面。然而，由於歷史和技術原因，充分發揮其潛力並不總是顯而易見的。在下面列出的文章中，我們將涵蓋 Web 表單的所有基本方面，包括標記其 HTML 結構、樣式化表單控制元件、驗證表單資料以及將資料提交到伺服器。
預備知識
在開始學習本模組之前，您至少應該閱讀我們的 HTML 入門指南。此時，您應該會發現 入門教程 易於理解，並且也能夠使用我們的 基本原生表單控制元件 教程。
然而，精通表單需要的不只是 HTML 知識——您還需要學習一些特定的技術來樣式化表單控制元件，並且需要一些指令碼知識來處理諸如驗證和建立自定義表單控制元件之類的事情。因此，在您檢視下面列出的其他部分之前，我們建議您先去學習一些 CSS 和 JavaScript。
以上文字很好地表明瞭為什麼我們將 Web 表單放在一個獨立的模組中，而不是試圖將其部分內容混入 HTML、CSS 和 JavaScript 的主題區域——表單元素比大多數其他 HTML 元素更復雜，並且它們還需要與相關的 CSS 和 JavaScript 技術緊密結合才能充分發揮其作用。
入門教程
- 你的第一個表單
-
我們系列的第一篇文章將帶您體驗建立 Web 表單的整個過程，包括設計一個簡單的表單、使用正確的 HTML 元素實現它、透過 CSS 新增一些非常簡單的樣式，以及資料如何傳送到伺服器。
- 如何構建 Web 表單
-
在掌握了基礎知識之後，我們現在將更詳細地研究用於為表單的不同部分提供結構和含義的元素。
不同的表單控制元件
- 基本的原生表單控制元件
-
在本節中，我們將詳細研究原始 HTML
<input>型別的 [功能]，瞭解收集不同型別資料的可用選項。 - HTML5 輸入型別
-
在這裡，我們將繼續深入研究
<input>元素，關注 HTML5 釋出時提供的其他輸入型別，以及它們提供的各種 UI 控制元件和資料收集增強功能。此外，我們還將研究<output>元素。 - 其他表單控制元件
-
接下來，我們將檢視所有非
<input>的表單控制元件和相關工具，例如<select>、<textarea>、<meter>和<progress>。
表單樣式教程
- 為網頁表單新增樣式
-
本文件提供 CSS 表單樣式入門指南，包括您可能需要了解的基本樣式任務的所有基礎知識。
- 高階表單樣式
-
在這裡，我們將研究一些更高階的表單樣式技術，這些技術在嘗試處理一些更難樣式化的表單元素時需要使用。
- 可定製的 select 元素
-
本文件解釋瞭如何結合使用專用的、現代的 HTML 和 CSS 功能來建立完全自定義的
<select>元素。這包括完全控制樣式化選擇按鈕、下拉選擇器、箭頭圖示、當前選擇的複選標記以及每個單獨的<option>元素。 - UI 偽類
-
介紹 UI 偽類，使 HTML 表單控制元件能夠根據其當前狀態進行定位。
驗證和提交表單資料
附加教程
以下文章不包含在學習路徑中，但在您掌握了上述技術並想了解更多時，它們會非常有趣且有用。
- 如何構建自定義表單控制元件
-
在某些情況下，原生表單控制元件無法滿足您的需求，例如，由於樣式或功能原因。在這種情況下，您可能需要用純 HTML 構建自己的表單控制元件。本文件將解釋您將如何做到這一點以及在這樣做時需要注意的事項，並提供一個實際案例研究。
- 透過 JavaScript 傳送表單
-
本文件將探討使用表單組裝 HTTP 請求並透過自定義 JavaScript 傳送它的方法，而不是標準的表單提交。它還將探討您為什麼要這樣做，以及這樣做可能產生的後果。（另請參閱 使用 FormData 物件。）
- 舊版瀏覽器中的 HTML 表單
-
如果您需要支援舊版瀏覽器中的 HTML 表單，本文件將提供技巧和竅門，以幫助緩解相關痛點。
- 使用者輸入方法和控制
-
本文件展示了使用者與表單和其他 Web 內容互動的不同方式，並提供了管理使用者輸入、真實世界示例和進一步資訊連結的建議。