如何操作 - 堆疊式表單
學習如何使用 CSS 建立堆疊式表單。
堆疊式表單
堆疊式表單（其中輸入框和標籤垂直堆疊，而不是並排顯示）
如何建立堆疊式表單
步驟 1) 新增 HTML
使用 <form> 元素來處理輸入。您可以在我們的 PHP 教程中瞭解更多關於此資訊。
為每個欄位新增輸入框（帶有匹配的標籤）
示例
<form action="/action_page.php">
<label for="fname">名字</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="lname">姓氏</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<label for="country">國家</label>
<select id="country" name="country">
<option value="australia">澳大利亞</option>
<option value="canada">加拿大</option>
<option value="usa">美國</option>
</select>
<input type="submit" value="提交">
</form>
步驟 2) 新增 CSS
示例
/* 樣式輸入框 */
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
/* 樣式提交按鈕 */
input[type=submit] {
width: 100%;
background-color: #04AA6D;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* 滑鼠懸停時為提交按鈕新增背景色 */
input[type=submit]:hover {
background-color: #45a049;
}
自己動手試一試 »
提示：前往我們的 HTML 表單教程 瞭解更多關於 HTML 表單的資訊。
提示：前往我們的 CSS 表單教程 瞭解更多關於如何設定表單元素樣式的資訊。
