Web 表單構建塊

本模組提供一系列文章，幫助您掌握 Web 表單的基本知識。Web 表單是與使用者互動的非常強大的工具——最常見的是用於收集使用者資料或允許他們控制使用者介面。但是，由於歷史和技術原因，並不總是清楚如何充分利用它們。在下面列出的文章中，我們將涵蓋 Web 表單的所有基本方面，包括標記其 HTML 結構、樣式化表單控制元件、驗證表單資料以及將資料提交到伺服器。

先決條件

在開始本模組之前，您至少應完成我們的 HTML 簡介。此時，您應該發現入門指南容易理解，並且能夠使用我們的基本原生表單控制元件指南。

但是，掌握表單不僅僅需要 HTML 知識——您還需要學習一些特定的技術來樣式化表單控制元件，並且需要一些指令碼知識來處理諸如驗證和建立自定義表單控制元件之類的事情。因此，在檢視下面列出的其他部分之前，我們建議您先去學習一些 CSS 和 JavaScript。

上面的文字很好地說明了為什麼我們將 Web 表單放入其自己的獨立模組中，而不是試圖將其中的部分混合到 HTML、CSS 和 JavaScript 主題區域中——表單元素比大多數其他 HTML 元素更復雜，並且它們還需要緊密結合相關的 CSS 和 JavaScript 技術才能充分發揮其作用。

注意：如果您在無法建立自己檔案的計算機/平板電腦/其他裝置上工作，您可以嘗試在線上編碼程式（如 JSBin 或 Glitch）中嘗試（大部分）程式碼示例。

入門指南

您的第一個表單: 我們系列中的第一篇文章提供了您建立 Web 表單的最初體驗，包括設計簡單的表單、使用正確的 HTML 元素實現它、透過 CSS 新增一些非常簡單的樣式以及資料如何傳送到伺服器。
如何構建 Web 表單: 在掌握了基礎知識之後，我們現在將更詳細地瞭解用於為表單的不同部分提供結構和含義的元素。

不同的表單控制元件

基本原生表單控制元件: 我們從詳細瞭解原始 HTML <input> 型別開始本節，瞭解可用於收集不同型別資料的選項。
HTML5 輸入型別: 在這裡，我們繼續深入研究 <input> 元素，檢視 HTML5 釋出時提供的其他輸入型別以及它們提供的各種 UI 控制元件和資料收集增強功能。此外，我們還介紹了 <output> 元素。
其他表單控制元件: 接下來，我們將檢視所有非 <input> 表單控制元件和相關工具，例如 <select>、<textarea>、<meter> 和 <progress>。

表單樣式指南

樣式化 Web 表單: 本文件介紹瞭如何使用 CSS 樣式化表單，包括您可能需要了解的所有基本樣式化任務。
高階表單樣式: 在這裡，我們查看了一些更高階的表單樣式化技術，這些技術需要在嘗試處理一些難以樣式化的表單元素時使用。
UI 偽類: UI 偽類的介紹，使 HTML 表單控制元件能夠根據其當前狀態進行定位。

驗證和提交表單資料

客戶端表單驗證: 僅傳送資料是不夠的——我們還需要確保使用者輸入表單的資料格式正確，以便成功處理它，並且不會破壞我們的應用程式。我們還想幫助我們的使用者正確填寫我們的表單，並且在嘗試使用我們的應用程式時不會感到沮喪。表單驗證有助於我們實現這些目標——本文件告訴您需要了解的內容。
傳送表單資料: 本文件介紹了使用者提交表單時會發生什麼——資料去哪裡，以及我們到達那裡後如何處理它？我們還介紹了與傳送表單資料相關的一些安全問題。

高階文章

以下文章對於學習路徑並非必不可少，但當您掌握了上述技術並希望瞭解更多資訊時，它們將被證明是有趣且有用的。

如何構建自定義表單控制元件: 在某些情況下，原生的表單小部件無法滿足您的需求，例如由於樣式或功能限制。在這種情況下，您可能需要使用原始 HTML 構建自己的表單小部件。本文將解釋如何執行此操作以及在執行此操作時需要注意的事項，並提供一個實際案例研究。
透過 JavaScript 傳送表單: 本文探討了如何使用表單來組裝 HTTP 請求並透過自定義 JavaScript 傳送它，而不是使用標準表單提交。它還探討了為什麼要執行此操作以及執行此操作的影響。（另請參見使用 FormData 物件。）
表單控制元件的 CSS 屬性相容性表: 這篇最後的文章提供了一個方便的參考，您可以透過它查詢哪些 CSS 屬性與哪些表單元素相容。