協助使用者透過自己偏好的瀏覽器使用您的表單
為確保盡可能讓更多使用者存取您的表單,請使用針對工作建構的元素:<input>
、<textarea>
、<select>
和 <button>
。這是可用表單的基準。
預設瀏覽器樣式看起來很美!接著來改變權限。
確保所有人都能讀取表單控制項
在大部分瀏覽器中,表單控制項的預設字型大小太小。 為確保表單控制項清晰易讀,請透過 CSS 變更字型大小:
增加 font-size
和 line-height
以改善可讀性。
.form-element {
font-size: 1.3rem;
line-height: 1.2;
}
協助使用者瀏覽表單
下一步,請變更表單版面配置並增加表單元素的間距,藉此協助使用者瞭解哪些元素屬於同一群組。
margin
CSS 屬性會增加元素之間的空間,而 padding
屬性會增加元素內容周圍的空間。
如果是一般版面配置,請使用 Flexbox 或 Grid。進一步瞭解 CSS 版面配置方法。
確保表單控制項看起來像表單控制項
您可以為表單控制項採用清楚易懂的樣式,方便使用者填寫表單。
例如,使用實框設定 <input>
元素樣式。
input,
textarea {
border: 1px solid;
}
協助使用者提交表單
建議您讓 <button>
使用 background
以符合您的網站樣式,並覆寫或移除預設的 border
樣式。
協助使用者瞭解目前狀態
瀏覽器會為 :focus
套用預設樣式。您可以覆寫 :focus
的樣式,以符合品牌的顏色。
button:focus {
outline: 4px solid green;
}
隨堂測驗
測驗您對樣式表單樣式的瞭解程度
為什麼要為 font-size
使用相對單位?
確保大小能依使用者偏好進行調整。
🎉
為了確保大小能回應上一個元素,
請再試一次!
確保大小能回應深色模式。
請再試一次!
確保大小能回應媒體查詢。
請再試一次!
如何增加表單控制項之間的間距?
使用
padding
CSS 屬性。請再試一次!
使用
spacer
CSS 屬性。請再試一次!
使用
margin
CSS 屬性。🎉
使用
boundary
CSS 屬性。請再試一次!