如何操作 - 聯絡表單
瞭解如何使用 CSS 建立聯絡表單。
如何建立聯絡表單
步驟 1) 新增 HTML
使用 <form> 元素來處理輸入。您可以在我們的PHP教程中瞭解更多關於這方面的資訊。然後為每個欄位新增輸入（帶有匹配的標籤）
示例
<div class="container">
<form action="action_page.php">
<label for="fname">名字</label>
<input type="text" id="fname" name="firstname" placeholder="您的名字..">
<label for="lname">姓氏</label>
<input type="text" id="lname" name="lastname" placeholder="您的姓氏..">
<label for="country">國家</label>
<select id="country" name="country">
<option value="australia">澳大利亞</option>
<option value="canada">加拿大</option>
<option value="usa">美國</option>
</select>
<label for="subject">主題</label>
<textarea id="subject" name="subject" placeholder="寫點什麼.." style="height:200px"></textarea>
<input type="submit" value="提交">
</form>
</div>
步驟 2) 新增 CSS
示例
/* 樣式型別為 "text" 的輸入框、select 元素和 textarea */
input[type=text], select, textarea {
width: 100%; /* 寬度 100% */
padding: 12px; /* 一些內邊距 */
border: 1px solid #ccc; /* 灰色邊框 */
border-radius: 4px; /* 圓角邊框 */
box-sizing: border-box; /* 確保內邊距和寬度保持不變 */
margin-top: 6px; /* 新增頂部邊距 */
margin-bottom: 16px; /* 底部邊距 */
resize: vertical /* 允許使用者垂直調整 textarea 的大小（而不是水平）*/
}
/* 樣式提交按鈕，設定特定的背景顏色等 */
input[type=submit] {
background-color: #04AA6D;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* 當滑鼠懸停在提交按鈕上時，新增更深的綠色 */
input[type=submit]:hover {
background-color: #45a049;
}
/* 為表單新增背景顏色和一些內邊距 */
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
自己動手試一試 »
提示：前往我們的 HTML 表單教程 瞭解更多關於 HTML 表單的資訊。
提示：前往我們的 CSS 表單教程 瞭解更多關於如何設定表單元素樣式的資訊。
