表單樣式(Form Style) | CSS

CSS 表單樣式通常會出現在用戶登入或是輸入資料的地方，對於用戶的使用體驗有很高的影響性。本篇文章將會跟你介紹 HTML&CSS 中表單的樣式設計。

See the Pen 表單樣式(Form Style) | CSS by lenrich (@lenrich) on CodePen.

CSS表單樣式技巧:

  1. 輸入字段: 對輸入字段應用一致的填充、邊框樣式和邊框半徑，以確保統一且精緻的外觀。
  2. 按鈕: 使用背景顏色、文字顏色、填充和邊框半徑為按鈕樣式，使其呈現引人入勝且可點擊的外觀。
  3. 表單布局: 使用CSS控制整體表單布局，設置最大寬度並將表單居中於頁面，實現視覺上吸引人的設計。

範例程式碼:

/* 樣式化輸入字段 */
input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-bottom: 15px;
}

/* 樣式化按鈕 */
button {
  background-color: #4caf50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

/* 增強表單布局 */
form {
  max-width: 400px;
  margin: 0 auto;
}

通過CSS提升網頁表單的樣式不僅提高了美感，還提高了用戶對於品牌的好感度。