設定表單樣式

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

為確保表單盡可能開放更多人存取，請使用 工作：<input>、<textarea>、<select> 和 <button>。這是可用表單的基準。

預設的瀏覽器樣式看起來沒有問題！接著來改變權限。

注意： 漸進式強化是一種策略，盡可能讓更多使用者瞭解基本內容和功能。能盡可能為新式瀏覽器使用者提供最佳體驗。首先是內容，請使用語意 HTML，新增符合未來趨勢的 CSS，最後一步就是新增完善的 JavaScript。

確保所有人都能讀取表單控制項

在多數瀏覽器中，表單控制項的預設字型大小太小。 為確保表單控制項清晰易讀，請透過 CSS 變更字型大小：

調高 font-size 和 line-height 以提升可讀性。

.form-element {
  font-size: 1.3rem;
  line-height: 1.2;
}

敬上

注意： 如果是 font-size，請使用相對單位，例如 em (相對於元素父項的基本大小) 或 rem (相對於文件基礎大小)，確保大小符合使用者的偏好。使用者可以變更基本 font-size，且所有具有相對 font-size 的元素都會自動調整。如果是 line-height，請使用無單位值 (例如 1.5)，讓行高與字型大小保持相對的高度。進一步瞭解 CSS 中的像素與相對單位。

協助使用者瀏覽表單

接下來，請變更表單元素的版面配置、增加表單元素之間的間距。 協助使用者瞭解哪些元素屬於同一群組。

margin CSS 屬性會增加元素之間的空間。 padding 屬性則會增加元素內容周圍的空間。

如果是一般版面配置，請使用 Flexbox 或 Grid。 進一步瞭解 CSS 版面配置方法。

確保表單控制項看起來像表單控制項

為表單控制項採用清楚易懂的樣式，方便使用者填寫表單。 舉例來說，您可以使用實線設定 <input> 元素樣式。

注意： 在許多瀏覽器中，預設的 <input> 邊框顏色過亮。缺乏對比可能會導致元素難以辨識，特別是在行動裝置上。如要查看預設樣式，請在 Android 版 Chrome 中開啟這個示範模式。

input,
textarea {
  border: 1px solid;
}

協助使用者提交表單

考慮在 <button> 中使用 background，配合網站樣式。 以及覆寫或移除預設的 border 樣式

注意： 在新版瀏覽器中，您可以像任何其他元素一樣設定 <button> 的樣式，因此請一律使用語意 <button> 或 <input type="submit">。使用專為工作設計的元素提供許多內建可用性和無障礙功能優點，這些優點是指使用一般元素 (例如 <div>) 時無法獲得的這些優勢。您將瞭解其他模組的內建功能。進一步瞭解如何還原 <button> 的預設樣式。

協助使用者瞭解當前狀態

瀏覽器會為 :focus 套用預設樣式。 您可以覆寫 :focus 的樣式，配合品牌的顏色。

button:focus {
    outline: 4px solid green;
}

敬上

注意： 請只在也新增其他適當焦點樣式的情況下，移除 :focus 上的 outline，以確保預設和焦點樣式可區分。進一步瞭解如何設計焦點指標。

隨堂測驗

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

為什麼要針對「font-size」使用相對單位？

確保廣告尺寸能回應使用者的偏好。

🎉

確保大小回應上一個元素。

請再試一次！

確保大小能回應深色模式。

請再試一次！

確保大小能回應媒體查詢。

請再試一次！

如何提高表單控制項之間的間距？

使用 padding CSS 屬性。

請再試一次！

使用 spacer CSS 屬性。

請再試一次！

使用 margin CSS 屬性。

🎉

使用 boundary CSS 屬性。

請再試一次！

資源

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