資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 HTML 和 CSS 建立登錄檔單？
在本文中，我們將瞭解**如何使用HTML和CSS建立登錄檔單**。登錄檔單允許訪問網站的任何新使用者進行註冊。它包括新增電子郵件 ID、密碼、重複密碼，以及點選“註冊”按鈕進行註冊。
要允許瀏覽器儲存密碼，請點選**記住我**。您還可以提供“條款與政策”連結，以便使用者先閱讀註冊條款。讓我們看看如何使用 HTML 和 CSS 建立登錄檔單。
建立登錄檔單的步驟
我們使用兩個步驟來使用 HTML 和 CSS 建立登錄檔單。第一步是使用 HTML 建立登錄檔單的結構。第二步是使用 CSS 樣式化登錄檔單。
步驟 1 - 新增 HTML
以下是建立登錄檔單的 HTML 程式碼。這是一個分步過程
- 為表單設定了一個div容器，並使用form元素建立表單。
- 我們為每個輸入欄位使用了標籤，並使用input型別文字設定電子郵件 ID 欄位。
- 密碼和重複密碼欄位使用 input 型別密碼設定。
- 我們使用了按鈕來建立註冊按鈕，並使用複選框來實現“記住我”功能。
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Sign-Up form with HTML and CSS
</title>
<link rel="stylesheet" href="form.css">
</head>
<body>
<form>
<div class="formContainer">
<h1>Sign Up Form</h1>
<hr>
<label for="email">
<strong>Email</strong>
</label>
<input type="text" placeholder="Enter Email"
name="email" required>
<label for="password">
<strong>Password</strong>
</label>
<input type="password"
placeholder="Enter Password"
name="password" required>
<label for="repeatPassword">
<strong>Repeat Password</strong>
</label>
<input type="password"
placeholder="Repeat Password"
name="repeatPassword" required>
<label>
<input type="checkbox" checked="checked"
name="remember" id="check">
Remember me
</label>
<p>
By creating an account you agree to our
<a href="#" style="color:dodgerblue">
Terms & Privacy</a>.
</p>
<div>
<button type="submit" class="signup">
Sign Up
</button>
</div>
</div>
</form>
</body>
</html>
步驟 2 - 新增 CSS
以下是樣式化登錄檔單的 CSS 程式碼。以下 CSS 檔案樣式化了輸入欄位、註冊按鈕，應用了填充、字型大小和背景顏色。
* {
box-sizing: border-box
}
body {
font-family: 'Segoe UI', Tahoma,
Geneva, Verdana, sans-serif;
}
/* Styling the form input fields */
input[type=text],
input[type=password] {
width: 100%;
font-size: 28px;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
label {
font-size: 15px;
}
input[type=text]:focus,
input[type=password]:focus {
background-color: #ddd;
outline: none;
}
hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
/* Style the Sign Up button */
button {
font-size: 18px;
font-weight: bold;
background-color: rgb(10, 119, 13);
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
/* To change opacity of button upon hovering */
button:hover {
opacity: 1;
}
.formContainer {
padding: 16px;
}
.formContainer p {
font-size: 28px;
}
#check {
margin-bottom: 15px;
}
完整示例程式碼
以下是完整的程式碼**使用 HTML 和 CSS 建立登錄檔單**。
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Sign-Up form with HTML and CSS
</title>
<style>
* {
box-sizing: border-box
}
body {
font-family: 'Segoe UI', Tahoma,
Geneva, Verdana, sans-serif;
}
input[type=text],
input[type=password] {
width: 100%;
font-size: 28px;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
label {
font-size: 15px;
}
input[type=text]:focus,
input[type=password]:focus {
background-color: #ddd;
outline: none;
}
hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
button {
font-size: 18px;
font-weight: bold;
background-color: rgb(10, 119, 13);
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
button:hover {
opacity: 1;
}
.formContainer {
padding: 16px;
}
.formContainer p {
font-size: 28px;
}
#check {
margin-bottom: 15px;
}
</style>
</head>
<body>
<form>
<div class="formContainer">
<h1>Sign Up Form</h1>
<hr>
<label for="email">
<strong>Email</strong>
</label>
<input type="text" placeholder="Enter Email"
name="email" required>
<label for="password">
<strong>Password</strong>
</label>
<input type="password"
placeholder="Enter Password"
name="password" required>
<label for="repeatPassword">
<strong>Repeat Password</strong>
</label>
<input type="password"
placeholder="Repeat Password"
name="repeatPassword" required>
<label>
<input type="checkbox" checked="checked"
name="remember" id="check">
Remember me
</label>
<p>
By creating an account you agree to our
<a href="#" style="color:dodgerblue">
Terms & Privacy</a>.
</p>
<div>
<button type="submit" class="signup">
Sign Up
</button>
</div>
</div>
</form>
</body>
</html>
更新於: 2024-07-19
15K+ 瀏覽量
廣告