CSS - 表單：初学者的全面指南

你好，有抱負的網頁設計師們！今天，我們將深入探索 CSS 表單的奇妙世界。作為你們親切鄰居的電腦老師，我非常高興能夠帶領你們進行這次旅程。相信我，在這個教程結束時，你們將會像專業人士一樣設計表單！

CSS 表單 - 字體和文字樣式

我們從基礎開始。就像我們在不同的場合穿著不同的衣服一樣，我們可以用不同的字體和文字樣式來裝扮我們的表單元素。這樣做：

input[type="text"] {
font-family: Arial, sans-serif;
font-size: 16px;
color: #333;
}

這段代碼告訴瀏覽器對文字輸入使用 Arial 字體，設置字體大小為 16 像素，並將文字顏色設為深灰色（#333）。這就像給你的表單穿上一套好看的、易於閱讀的衣裳！

CSS 表單 - 設計元素邊框和背景

接下來，讓我們為我們的表單元素添加一些花絮，加上邊框和背景：

input[type="text"] {
border: 2px solid #4CAF50;
border-radius: 4px;
background-color: #f8f8f8;
}

這段代碼為我們的文本輸入添加了綠色邊框，稍微圓滑的角，以及淺灰色背景。這就像為你的表單元素加上一個漂亮的框架！

CSS 表單 - 使用內距和外距

現在，讓我們給我們的表單元素一點空間：

input[type="text"] {
padding: 10px;
margin-bottom: 15px;
}

這樣做在輸入框內部（內距）和下方（外距）添加了一些空間。這就像給你的表單元素它們自己的個人空間氣泡！

CSS 表單 - 焦點樣式

當用戶點擊輸入框時，我們想要突出它。這樣做：

input[type="text"]:focus {
outline: none;
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
}

這會移除默認的轮廓並在輸入框聚焦時添加一個柔和的藍色光暈。這就像對用戶說“嘿，看著我！”。

CSS 表單 - 按鈕樣式

按鈕是表單中的行動英雄。讓我們讓它們看起來像樣：

button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
border: none;
cursor: pointer;
}

button:hover {
background-color: #45a049;
}

這會創造一個綠色按鈕，當滑鼠悬停時會變暗。這就像給你的按鈕一套酷炫的超級英雄服裝！

CSS 表單 - 勾選框和單選按鈕樣式

設計勾選框和單選按鈕可能會有些棘手。這裡有一個簡單的開始方法：

input[type="checkbox"], input[type="radio"] {
width: 20px;
height: 20px;
}

這會使你的勾選框和單選按鈕變得大一點，更容易點擊。這就像給它們一個生長高峰！

CSS 表單 - 表單佈局

現在，讓我們組織我們的表單元素：

form {
width: 300px;
margin: 0 auto;
}

label {
display: block;
margin-bottom: 5px;
}

這會將我們的表單居中並將每個標籤放在自己的行上。這就像整理你的房間 - 每樣東西都有它自己的位置！

範例

讓我們把所有東西合起來：

<form>
<label for="name">名稱：</label>
<input type="text" id="name" name="name">

<label for="email">電子郵件：</label>
<input type="email" id="email" name="email">

<button type="submit">提交</button>
</form>

form {
width: 300px;
margin: 0 auto;
}

label {
display: block;
margin-bottom: 5px;
}

input[type="text"], input[type="email"] {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 2px solid #4CAF50;
border-radius: 4px;
background-color: #f8f8f8;
}

button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
border: none;
cursor: pointer;
width: 100%;
}

button:hover {
background-color: #45a049;
}

這會創造一個簡單的、經過設計的表單。這就像把拼圖放在一起 - 所有部件都完美地契合！

CSS 表單 - 盒模型

這裡有一個專業提示：使用 box-sizing: border-box 來讓你的生活更輕鬆：

* {
box-sizing: border-box;
}

這樣可以確保內距和邊框包括在元素的總寬度和高度內。這就像魔法 - 沒有意外溢出的問題！

CSS 表單 - 領域集和圖例

領域集和圖例可以幫助你組織表單：

fieldset {
border: 1px solid #ddd;
padding: 20px;
margin-bottom: 20px;
}

legend {
font-weight: bold;
padding: 0 10px;
}

這會在相關的表單元素周圍創造一個好看的邊框並帶有一個標題。這就像在表單的故事中創造章節！

CSS 表單 - 全寬度輸入

有時候，你希望你的輸入框佔滿所有可用空間：

input[type="text"] {
width: 100%;
}

這會使你的輸入框伸展以填滿其容器。這就像給你的輸入一個大伸展！

CSS 表單 - 带颜色的輸入

讓我們為我們的輸入框添加一些顏色：

input[type="text"] {
background-color: #e6f3ff;
color: #00366d;
}

這會給我們的輸入框一個淺藍色背景和深藍色文字。這就像為你的表單塗上一個酷炫的顏色方案！

CSS 表單 - 在輸入中添加圖片

你甚至可以在你的輸入框中添加圖片：

input[type="text"] {
background-image: url('search-icon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
}

這會在輸入框的左側添加一個搜索图标。這就像給你的輸入框一個小頭像！

CSS 表單 - 带动画的輸入

讓我們為我們的輸入框添加一些動作：

input[type="text"] {
transition: all 0.3s ease-in-out;
}

input[type="text"]:focus {
transform: scale(1.05);
}

這會在聚焦時使輸入框稍微變大。這就像給你的輸入一個小舞蹈動作！

CSS 表單 - 文本區域樣式

不要忘了文本區域：

textarea {
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
resize: vertical;
}

這會設計你的文本區域並允許垂直調整大小。這就像給你的用戶一個伸縮自如的記事本！

CSS 表單 - 下拉菜單樣式

下拉菜單也需要愛護：

select {
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}

這會創造一個乾淨的下拉菜單。這就像給你的用戶一個時尚的自動售貨機選項！

响應式表單佈局

最後，讓我們使表單響應式：

@media screen and (max-width: 600px) {
form {
width: 100%;
}
}

這會在較小的屏幕上使表單全屏寬度。這就像給你的表單一個變形超能力！

至此，你已經學會了如何使用 CSS 設計表單。記住，熟能生巧，所以不要害怕嘗試這些樣式。快樂編程！

Credits: Image by storyset