表單 (form) 是網頁中非常常見的一種元素,它可以用來收集用戶的信息,發送到后臺進行處理。
為了美化表單的樣式,我們可以使用 CSS (層疊樣式表) 來為表單添加樣式。
/* 示例代碼 */ form { width: 300px; /* 表單寬度 */ margin: 20px auto; /* 居中對齊 */ padding: 10px 20px; /* 內邊距 */ background-color: #f0f0f0; /* 背景顏色 */ border-radius: 4px; /* 圓角邊框 */ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* 陰影效果 */ font-family: Arial, sans-serif; /* 字體樣式 */ } input[type="text"], textarea { width: 100%; /* 輸入框寬度 */ padding: 10px; /* 輸入框內邊距 */ margin-bottom: 20px; /* 輸入框間距 */ border: none; /* 去除邊框 */ background-color: #fff; /* 背景顏色 */ border-radius: 4px; /* 圓角邊框 */ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* 陰影效果 */ font-size: 16px; /* 字體大小 */ } input[type="submit"] { background-color: #4CAF50; /* 按鈕背景色 */ color: #fff; /* 字體顏色 */ padding: 10px; /* 按鈕內邊距 */ border: none; /* 去除邊框 */ border-radius: 4px; /* 圓角邊框 */ cursor: pointer; /* 鼠標懸停樣式 */ } input[type="submit"]:hover { background-color: #3e8e41; /* 按鈕背景色 */ }
這是一個基本的表單樣式,通過修改 CSS 可以實現很多不同的效果。例如,可以添加動畫效果、修改字體顏色、調整輸入框大小等。
盡管 CSS 可以美化表單,但在實際項目中,我們也需要注意表單是否易用、可訪問和符合安全規范等問題。