如何做 - 帶圖示的表單
瞭解如何建立帶圖示的表單。
註冊
如何建立帶圖示的表單
步驟 1) 新增 HTML
使用 <form> 元素來處理輸入。您可以在我們的 PHP 教程中瞭解更多關於此資訊。然後為每個欄位新增輸入框。
示例
<form action="/action_page.php">
<h2>登錄檔單</h2>
<div class="input-container">
<i class="fa fa-user icon"></i>
<input class="input-field" type="text" placeholder="使用者名稱" name="usrnm">
</div>
<div class="input-container">
<i class="fa fa-envelope icon"></i>
<input class="input-field" type="text" placeholder="電子郵件" name="email">
</div>
<div class="input-container">
<i class="fa fa-key icon"></i>
<input class="input-field" type="password" placeholder="密碼" name="psw">
</div>
<button type="submit" class="btn">註冊</button>
</form>
步驟 2) 新增 CSS
示例
* {box-sizing: border-box;}
/* 樣式輸入容器 */
.input-container {
display: flex;
width: 100%;
margin-bottom: 15px;
}
/* 樣式化表單圖示 */
.icon {
padding: 10px;
background: dodgerblue;
color: white;
min-width: 50px;
text-align: center;
}
/* 輸入欄位樣式 */
.input-field {
width: 100%;
padding: 10px;
outline: none;
}
.input-field:focus {
border: 2px solid dodgerblue;
}
/* 設定提交按鈕的樣式 */
.btn {
background-color: dodgerblue;
color: white;
padding: 15px 20px;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
.btn:hover {
opacity: 1;
}
自己動手試一試 »
提示：前往我們的 HTML 表單教程 瞭解更多關於 HTML 表單的資訊。
提示：前往我們的 CSS 表單教程 瞭解更多關於如何設定表單元素樣式的資訊。
提示: 前往我們的 CSS Flexbox 教程 瞭解更多關於彈性盒子佈局模組的知識。
