CSS如何添加表單域

表單是網站中必不可少的組件，它允許用戶輸入信息并將其提交到服務器。對于表單設計，CSS樣式是一個非常重要的因素。通過CSS，我們可以美化表單，使其看起來更專業和好看。

下面是如何使用CSS添加表單域的步驟：

步驟一：添加HTML表單標記

<form action="submit.php" method="post">
<label for="name">名稱:</label>
<input type="text" id="name" name="name">
<br>
<label for="email">郵箱:</label>
<input type="email" id="email" name="email">
<br>
<label for="message">消息:</label>
<textarea id="message" name="message"></textarea>
<br>
<input type="submit" value="提交">
</form>

以上是一個基本的HTML表單，其中包括名稱、郵箱和消息三個字段。

步驟二：CSS樣式

input[type="text"],
input[type="email"],
textarea {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #45a049;
}
label {
display: inline-block;
width: 100px;
margin-bottom: 10px;
}

上述樣式中，我們定義了輸入框和文本域的大小、邊框、顏色等，而提交按鈕則有不同的顏色和效果。此外，我們還為標簽定義了一些樣式，使其更易于閱讀。

通過添加CSS樣式，我們可以創建一個美觀且易于使用的表單，從而提供更好的用戶體驗。