毛刺

設計良好的表單有助於協助使用者，並提高轉換率。一個小小的修正就能帶來巨大的改變！

如果您想透過教學課程瞭解這些最佳做法，請參閱以下兩個程式碼研究室：付款表單最佳做法程式碼研究室和地址表單最佳做法程式碼研究室。

以下是付款表單的範例，其中展示了所有最佳做法：

以下是簡易地址表單的範例，可展示所有最佳做法：

例如，下列 HTML 會指定出生年份的輸入範圍為 1900 到 2020 之間。使用 type="number" 會將輸入值限制為數字，且必須在 min 和 max 指定的範圍內。如果您嘗試輸入超出範圍的數字，系統會將輸入內容設為無效狀態。

以下範例使用 pattern="[\d ]{10,30}" 確保有效的付款卡號，同時允許空格：

新式瀏覽器也會對 email 或 url 類型的輸入內容進行基本驗證。

CSS 格線版面配置

CSS 格線版面配置可讓您輕鬆建立彈性格線。以先前的浮動範例來說，我們可以使用格線版面配置和 fr 單位，而非使用百分比建立資料欄，這樣就能代表容器中可用空間的一部分。

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

格線也可以用來建立規則的格線版面配置，並放入盡可能多的項目。隨著螢幕大小縮小，可用的音軌數量也會減少。在示範中，我們會將可容納的資訊卡數量設為每列，且最小大小為 200px。

進一步瞭解 CSS 格線版面配置

多欄版面配置

針對某些版面配置類型，您可以使用多欄版面配置 (Multicol)，藉此使用 column-width 屬性建立回應式欄數。在示範中，您可以看到如果有空間可新增另一個 200px 欄，系統就會新增資料欄。