毛刺

設計完善的表單能幫助使用者並提升轉換率。只要稍加修正，就能大展身手！

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

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

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

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

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

CSS 格線版面配置可讓您輕鬆建立彈性的格線。如果我們考慮先前的浮動範例，而不是使用百分比建立資料欄，可以使用格線版面配置和 fr 單位 (代表容器中一部分的可用空間)。

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

格線也可用於建立一般的格線版面配置，其中包含太多項目。隨著螢幕縮小，可用曲目數量也會減少。在以下示範中，資訊卡能容納的資訊卡數量不限，且大小下限為 200px。

對於某些類型的版面配置，您可以使用多欄版面配置 (Multicol)，透過 column-width 屬性建立欄的回應式編號。在以下示範中，如果有空間為另一個「200px」欄，您會看到系統新增的欄。