資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 CSS 建立響應式登入表單？
在一個網頁上，登入表單包含使用者名稱和密碼欄位。此外，還為使用者建立了一個登入按鈕，使用者可以點選該按鈕進行登入。還放置了一個忘記密碼連結，供忘記帳戶密碼的使用者使用。“記住我”複選框也已設定，因此使用者可以選擇它並允許瀏覽器記住密碼，以避免反覆輸入密碼。讓我們使用 CSS 建立一個響應式登入表單。
設定表單頭像影像
我們在開頭使用<img>放置了一個頭像圖片：
<div class="profilePic"> <img src="https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_960_720.png" alt="Avatar" class="avatar" /> </div>
設定頭像影像的高度和寬度。將其放置在中心：
.profilePic {
text-align: center;
margin: 24px 0 12px 0;
}
img.avatar {
width: 200px;
height: 200px;
border-radius: 50%;
}
建立表單
我們在這裡建立了一個表單，其中包含使用者名稱和密碼輸入欄位。佔位符使用 placeholder 屬性設定。還使用<button>元素建立了一個提交按鈕：
<div class="formFields">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required />
<label for="pass"><b>Password</b></label>
<input
type="password"
placeholder="Enter Password"
name="pass"
required
/>
<button type="submit">Login</button>
<label> <input type="checkbox" checked="checked" name="remember" /> Remember me</label>
</div>
輸入型別文字和密碼欄位的樣式如下所示。為了定位和顯示，我們設定了display屬性的inline-block值：
input[type="text"],
input[type="password"] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
font-size: 30px;
}
設定“記住我”複選框
使用 input type checkbox 建立“記住我”複選框：
<label> <input type="checkbox" checked="checked" name="remember" /> Remember me </label>
設定忘記密碼連結
還為忘記密碼並希望恢復密碼的使用者建立了一個忘記密碼連結：
<span class="pass">Forgot <a href="#">password?</a></span>
將忘記密碼連結浮動到右側：
span.pass {
float: right;
padding-top: 16px;
}
設定響應式
使用媒體查詢來設定響應式。當螢幕尺寸小於 300 畫素時，span 的 display 屬性設定為 block 值：
@media screen and (max-width: 300px) {
span.pass {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
示例
以下是使用 CSS 建立響應式登入表單的程式碼：
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
background-color: rgb(189, 189, 255);
}
form {
border: 3px solid #f1f1f1;
background-color: rgb(228, 228, 228);
margin: 20px;
}
h1 {
text-align: center;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
font-size: 30px;
}
label {
font-size: 30px;
}
button {
font-weight: bold;
font-family: monospace, sans-serif, serif;
font-size: 25px;
background-color: #4caf50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
.profilePic {
text-align: center;
margin: 24px 0 12px 0;
}
img.avatar {
width: 200px;
height: 200px;
border-radius: 50%;
}
.formFields {
padding: 16px;
}
span.pass {
float: right;
padding-top: 16px;
}
/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
span.pass {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
</style>
</head>
<body>
<h1>Responsive Login Form Example</h1>
<form>
<div class="profilePic">
<img src="https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_960_720.png" alt="Avatar" class="avatar" />
</div>
<div class="formFields">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required />
<label for="pass"><b>Password</b></label>
<input
type="password"
placeholder="Enter Password"
name="pass"
required
/>
<button type="submit">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember" /> Remember me
</label>
</div>
<div class="formFields" style="background-color:#f1f1f1">
<button type="button" class="cancelbtn">Cancel</button>
<span class="pass">Forgot <a href="#">password?</a></span>
</div>
</form>
</body>
</html>
更新於：2023年12月14日
2K+ 次檢視
廣告