歡迎使用學習表單!

本課程會將 HTML 表單分成幾個簡單易懂的段落。 在接下來的幾個單元中,你將瞭解 HTML 表單的運作方式,以及如何在專案中有效使用 HTML 表單。 您可以透過「Learn Forms」(學習表單) 標誌旁的選單窗格瀏覽模組。

您會瞭解如何製作基本 HTML 表單、關於 HTML 表單元素、樣式表單、協助使用者重新輸入資料、確保表單易於存取、如何測試表單,以及特定表單類型。

每個單元都有完整的互動式示範和自我評量,可用來驗收學習成果。

本課程適合初學者和進階的 HTML 開發人員。前幾個單元可協助您開始建立 HTML 表單,其他模組則會提供更多詳細資訊。您可以從頭開始瀏覽本系列文章,全面瞭解 HTML 表單 您也可以挑選想要進一步瞭解的特定單元

必備條件

在開始本課程之前,請先瞭解 HTML。如果您是網頁開發新手,請參閱 MDN 的 HTML 簡介課程,瞭解如何編寫標記。

試聽帶

大多數示範都使用 CodePen

看看這些示範,您可能會好奇樣式的來源。 所有示範內容都會用到一般的樣式表,因此只會顯示相關樣式。 在 CodePen 中,您可以從「設定」中選取加入的 CSS 檔案。

表單控制項和表單欄位

「表單控制項」是可讓使用者互動和資料輸入或選取的元素:<input><select><textarea><button>

有時表單欄位是用來指表單控制項,特別是文字輸入元素的特定元素:<input><textarea>

本文將介紹

利用表單取得使用者的資料

透過本表單元素簡介,瞭解使用網頁版表單的基本概念。

協助使用者在表單中輸入資料

概略介紹您可以選擇建立表單的各種表單元素。

協助使用者避免在表單中重新輸入資料

方便使用者填寫表單。

協助使用者在表單中輸入正確的資料

瞭解如何在前端驗證表單。

測試表單

瞭解如何測試及分析表單。

設計基本概念

瞭解如何製作容易使用的表單。

無障礙功能

如何打造多元包容的表單。

國際化和本地化

請準備好採用國際資料格式,並瞭解如何規劃表單以進行本地化。

安全性與隱私權

瞭解如何確保表單安全,並確保使用者資料的私密性。

自動填入

瞭解自動填入和自動完成屬性。

如何測試表單的可用性

瞭解如何進行可用性測試,確保表單適合所有使用者使用。

跨裝置和平台測試表單

確保您的表單適用於不同的裝置、瀏覽器、平台和不同情境。

收集資料

瞭解如何評估及分析表單。

深入瞭解表單元素

全面瞭解表單元素、表單的使用時機,以及表單的運作方式。

深入瞭解表單欄位

進一步瞭解您可以使用哪些表單欄位,以及選擇正確的表單元素。

深入瞭解表單屬性

瞭解表單屬性:如何修改螢幕小鍵盤的版面配置、啟用內建驗證功能等等。

樣式表單

使用 CSS 設定表單樣式,同時確保所有使用者都能輕鬆使用及讀取表單。

樣式表單控制項

瞭解如何使用 CSS 導入表單控制項。

JavaScript

瞭解如何使用 JavaScript 讓表單內容更豐富。

付款表單

建立更完善的付款表單,提高轉換率。

地址表單

協助使用者輕鬆快速地填寫地址表單。

結論和後續步驟

參考其他資源,瞭解如何執行後續步驟。

準備好瞭解表單了嗎?開始使用