表單是網(wǎng)頁設計中常用的元素之一，它可以讓用戶輸入信息，互動性強，常常用來實現(xiàn)注冊、登錄等功能。但是，一般的表單元素缺少美觀程度，不夠時髦，缺乏親和力。因此，在設計表單時，添加一些圖標和其他裝飾元素可以有效提高其吸引力和實用性。本文將介紹如何使用CSS為表單添加圖標。 首先，我們先創(chuàng)建一個簡單的表單。代碼如下(pre標簽內(nèi))：

<form action="#" method="post">
<label for="name">姓名:</label>
<input type="text" name="name" id="name" required>
<label for="email">郵箱:</label>
<input type="email" name="email" id="email" required>
<input type="submit" value="提交">
</form>

如上所示，我們創(chuàng)建了兩個input元素，分別用于用戶輸入姓名和郵箱。我們可以在標簽前添加圖標，以提高表單的美觀性和實用性。下面是添加圖標的CSS樣式（pre標簽內(nèi)）：

form label::before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background: url("icon.png") no-repeat;
background-size: contain;
margin-right: 5px;
}

上述代碼使用了before偽元素創(chuàng)建一個空的內(nèi)容，并將其作為標簽的前綴。我們設置了偽元素的寬高、背景，以及距離標簽的間距，其中背景使用了一個名為icon.png的圖片。需要注意的是，我們需要將圖片路徑改為我們想要使用的圖標的路徑。 最后，我們在label標簽上設置了一個偽類:focus，并為其設置了樣式，這樣，在用戶聚焦到input元素時，偽類才會生效，從而使得圖標更加顯眼。

form label:focus::before {
opacity: 0.7;
transform: translateX(-3px);
}

總之，通過添加圖標和其他裝飾，可以為表單添加美觀度和實用性。通過CSS控制，我們可以非常簡單地實現(xiàn)這些效果。