如何 - 登錄檔單
瞭解如何使用 CSS 建立登錄檔單。
如何建立登錄檔單
步驟 1) 新增 HTML
使用 <form> 元素來處理輸入。您可以在我們的PHP教程中瞭解更多關於這方面的資訊。然後為每個欄位新增輸入（帶有匹配的標籤）
示例
<form action="action_page.php">
<div class="container">
<h1>註冊</h1>
<p>請填寫此表單以建立賬戶。</p>
<hr>
<label for="email"><b>郵箱</b></label>
<input type="text" placeholder="輸入郵箱" name="email" id="email" required>
<label for="psw"><b>密碼</b></label>
<input type="password" placeholder="輸入密碼" name="psw" id="psw" required>
<label for="psw-repeat"><b>重複密碼</b></label>
<input type="password" placeholder="重複密碼" name="psw-repeat" id="psw-repeat" required>
<hr>
<p>建立賬戶即表示您同意我們的 <a href="#">條款與隱私</a>。</p>
<button type="submit" class="registerbtn">註冊</button>
</div>
<div class="container signin">
<p>已有賬戶？ <a href="#">登入</a>。</p>
</div>
</form>
步驟 2) 新增 CSS
示例
* {box-sizing: border-box}
/* 為容器新增填充 */
.container {
padding: 16px;
}
/* 全寬度輸入欄位 */
input[type=text], input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
input[type=text]:focus, input[type=password]:focus {
background-color: #ddd;
outline: none;
}
/* 覆蓋 hr 的預設樣式 */
hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
/* 設定提交/註冊按鈕的樣式 */
.registerbtn {
background-color: #04AA6D;
color: white;
padding: 16px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
.registerbtn:hover {
opacity:1;
}
/* 為連結新增藍色文字顏色 */
a {
color: dodgerblue;
}
/* 設定“登入”部分的灰色背景顏色並居中文字 */
.signin {
background-color: #f1f1f1;
text-align: center;
}
自己動手試一試 »
提示：前往我們的 HTML 表單教程 瞭解更多關於 HTML 表單的資訊。
提示：前往我們的 CSS 表單教程 瞭解更多關於如何設定表單元素樣式的資訊。
