資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 CSS 建立登錄檔單？
要使用 CSS 建立登錄檔單，我們將使用 HTML 表單。登錄檔單包含姓名、電子郵件、密碼、聯絡方式以及從使用者收集的其他型別的資訊。它包含輸入欄位、按鈕和其他表單元素，可以使用 form 標籤輕鬆建立。
在本文中，我們將討論並瞭解使用 CSS 建立登錄檔單的完整過程，包括分步說明和完整的示例程式碼。
使用 CSS 建立登錄檔單的步驟
我們將按照以下步驟使用 CSS 建立登錄檔單。
建立登錄檔單的結構
- 要建立表單，我們使用了 HTML 表單標籤。我們使用 input 標籤建立了多個輸入欄位，並使用 type 屬性指定所需的輸入欄位型別。
- 然後，我們使用 label 標籤建立標籤來定義每個輸入欄位。我們還使用 select 標籤建立下拉列表，並使用 option 標籤指定已建立下拉列表的列表項。
- 最後，我們使用了一個提交按鈕，該按鈕使用 button 標籤建立，用於提交表單。所有這些表單元素都包含在一個 div 容器中。
<h1>Registration Form</h1>
<div class="container">
<form>
<label for="name"><strong>Name</strong></label>
<input type="text" placeholder="Enter Name"
name="name" required>
<label for="email"><strong>Email</strong></label>
<input type="text" placeholder="Enter Email"
name="email" required>
<label for="Phone"><strong>Phone</strong></label>
<input type="tel" placeholder="Enter Number"
name="phone" required>
<label for="psw"><strong>Password</strong></label>
<input type="password" placeholder="Enter Password"
name="psw" required>
<label for="psw-confirm">
<strong>Confirm Password</strong>
</label>
<input type="password" placeholder="Confirm Password"
name="psw-confirm" required>
<label for="dob"><strong>D.O.B</strong></label>
<input type="date" placeholder="Enter DOB" name="dob"
required class="dob">
<label for="gender"><strong>Gender</strong></label>
<select id="gender" name="gender" required>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
<hr>
<p>By creating an account you agree to our
<a href="#">Terms & Privacy</a>.
</p>
<button type="submit" class="registerbtn">
Register
</button>
<div class="signin">
<p>Already have an account?
<a href="#">Sign in</a>.
</p>
</div>
</form>
</div>
使用 CSS 設計登錄檔單
- 我們使用通用 選擇器 來設定 HTML 文件的字型和字型大小，分別使用 CSS font-family 和 font-size 屬性。為了居中標題，我們使用了 text-align 屬性。
- 為了在 HTML 文件中居中表單，我們使用了 **container** 類。我們使用 display 屬性將其設為彈性容器，然後使用 justify-content 屬性將其水平居中。
- 為了設定表單元素的樣式，我們使用了 width 來設定表單的寬度，並設定表單的 padding 和 background-color。
- 我們使用 **input, select** 作為元素選擇器，透過設定其 margin 和 padding 來設定輸入欄位和下拉列表的樣式。我們使用 border 屬性刪除了邊框。
- 我們使用 :focus 偽類在輸入欄位處於焦點時刪除 outline。我們還分別將 **dob** 和下拉列表的 cursor 屬性值設定為 text 和 pointer。
- 為了設定提交按鈕的樣式，我們使用了 **registerbtn** 類。我們更改了其背景色和文字顏色，設定了 margin 和 padding，刪除了其邊框，將游標更改為指標，設定了 opacity 值並更改了字型大小。
- 我們對提交按鈕使用了 :hover 偽類，並在懸停時設定 opacity 值。最後，我們使用 text-decoration 屬性刪除了連結的下劃線。
* {
box-sizing: border-box;
font-family: Verdana, sans-serif;
font-size: large;
}
h1 {
text-align: center;
}
.container {
display: flex;
justify-content: center;
}
form {
padding: 16px;
width: 400px;
background-color: rgb(255, 254, 195);
}
input,select {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
}
input,select:focus {
outline: none;
}
.dob{
cursor: text;
}
select {
cursor: pointer;
}
hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
.registerbtn {
background-color: #04af2f;
color: white;
padding: 16px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
font-size: larger;
}
.registerbtn:hover {
opacity: 1;
}
a {
color: dodgerblue;
text-decoration: none;
}
.signin {
background-color: #f1f1f1;
text-align: center;
}
完整的示例程式碼
以下是實現上述步驟以使用 CSS 建立登錄檔單的完整示例程式碼。
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
font-family: Verdana, sans-serif;
font-size: large;
}
h1 {
text-align: center;
}
.container {
display: flex;
justify-content: center;
}
form {
padding: 16px;
width: 400px;
background-color: rgb(255, 254, 195);
}
input,select {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
}
input,select:focus {
outline: none;
}
.dob{
cursor: text;
}
select {
cursor: pointer;
}
hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
.registerbtn {
background-color: #04af2f;
color: white;
padding: 16px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
font-size: larger;
}
.registerbtn:hover {
opacity: 1;
}
a {
color: dodgerblue;
text-decoration: none;
}
.signin {
background-color: #f1f1f1;
text-align: center;
}
</style>
</head>
<body>
<h1>Registration Form</h1>
<div class="container">
<form>
<label for="name"><strong>Name</strong></label>
<input type="text" placeholder="Enter Name"
name="name" required>
<label for="email"><strong>Email</strong></label>
<input type="text" placeholder="Enter Email"
name="email" required>
<label for="Phone"><strong>Phone</strong></label>
<input type="tel" placeholder="Enter Number"
name="phone" required>
<label for="psw"><strong>Password</strong></label>
<input type="password" placeholder="Enter Password"
name="psw" required>
<label for="psw-confirm">
<strong>Confirm Password</strong>
</label>
<input type="password" placeholder="Confirm Password"
name="psw-confirm" required>
<label for="dob"><strong>D.O.B</strong></label>
<input type="date" placeholder="Enter DOB" name="dob"
required class="dob">
<label for="gender"><strong>Gender</strong></label>
<select id="gender" name="gender" required>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
<hr>
<p>By creating an account you agree to our
<a href="#">Terms & Privacy</a>.
</p>
<button type="submit" class="registerbtn">
Register
</button>
<div class="signin">
<p>Already have an account?
<a href="#">Sign in</a>.
</p>
</div>
</form>
</div>
</body>
</html>
結論
在本文中，我們瞭解瞭如何使用 CSS 建立登錄檔單，並對程式碼進行了分步解釋。我們使用了 HTML 表單以及表單元素來建立表單，並使用 CSS 來設定登錄檔單的樣式。
更新於: 2024-10-24
3K+ 瀏覽量
廣告