制作表單是網站設計中經常用到的一個元素,通過使用CSS樣式,可以使表單看起來更美觀、更易用。本文將介紹如何制作一個簡單的表單CSS。
1. 首先,我們創建一個基本的HTML表單代碼。例如:
<form> <label for="name">姓名:</label> <input type="text" id="name" name="name"> <label for="email">郵箱:</label> <input type="email" id="email" name="email"> <label for="password">密碼:</label> <input type="password" id="password" name="password"> <input type="submit" value="提交"> </form>
2. 接著,我們為表單添加CSS樣式。我們可以為整個表單添加一個樣式:
form { background-color: #f2f2f2; padding: 20px; border: 1px solid #ddd; border-radius: 5px; }
這個樣式將使表單有一個淺灰色的背景,帶有一個1像素的灰色邊框并圓角邊框。
3. 然后,我們為標簽添加樣式:
label { display: block; margin-bottom: 10px; font-weight: bold; }
這個樣式將使標簽以塊級元素顯示,具有10像素的底邊距和加粗字體。
4. 最后,我們為文本字段添加樣式:
input[type="text"], input[type="email"], input[type="password"] { width: 100%; padding: 10px; margin-bottom: 20px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; }
這個樣式將使所有文本字段的寬度為100%,具有10像素的內邊距和20像素的底邊距,以及一個1像素的灰色邊框和圓角邊框。此外,這個樣式還將使框模型的計算包括邊框和內邊距。
綜上所述,我們可以通過這些CSS樣式來使一個簡單的表單擁有良好的視覺效果和用戶體驗。