設計完善的表單能幫助使用者並提升轉換率。只要稍加修正,就能大展身手!
以下是簡單的付款表單範例,展示了所有最佳做法:
以下是簡單的地址表單範例,展示了所有最佳做法:
例如,以下 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
。
多欄版面配置
對於某些類型的版面配置,您可以使用多欄版面配置 (Multicol),透過 column-width
屬性建立欄的回應式編號。在以下示範中,如果有空間為另一個「200px
」欄,您會看到系統新增的欄。