設定表單樣式

協助使用者透過自己偏好的瀏覽器使用您的表單

為確保盡可能讓更多使用者存取您的表單，請使用針對工作建構的元素：<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;
}

隨堂測驗

測驗您對樣式表單樣式的瞭解程度

資源

• 瞭解 CSS
• CSS 版面配置方法
• 設計焦點指標
• 還原 <button> 的預設樣式。