資料結構
網路
關係資料庫管理系統(RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用HTML和CSS在影像上新增登入表單？
許多網站上都可以看到在影像上顯示登入表單。例如，組織特殊活動的機構可能在其網站上使用活動圖片並嵌入登入表單；餐廳也可能在其網站上使用餐廳圖片。
在這種情況下，我們使用影像來建立登入或註冊介面。與標準的登入或登錄檔單相比，這種佈局使網站更具吸引力。要在圖片上建立登入表單，我們只需要HTML和CSS。在深入瞭解本文之前，讓我們快速回顧一下HTML 的<img>標籤和登入表單。
在影像上建立登入表單的方法
這種方法我們將建立一個表單，並將該表單放置在影像上。然後，我們將裝飾表單並根據我們的要求調整對齊方式。要在影像上建立表單，請按照以下步驟操作。
- 步驟1：正如我們所說的，我們將建立一個HTML表單，並將該表單放置在影像上。
- 步驟2：建立表單後，我們將使用內聯CSS來設計我們的表單。
建立HTML表單結構
要在影像上建立表單，我們需要一個帶有背景影像的容器。要了解如何建立HTML表單，您可以檢視我們的HTML表單文章。
<!DOCTYPE html>
<html>
<body>
<div class="backgroundimage">
<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" >
<button type="button" class="cancelbtn">Cancel</button>
<span class="pass">Forgot <a href>Password?</a></span>
</div>
</form>
</div>
</body>
</html>
樣式化HTML表單
在這裡，我們為表單元素設定樣式，並新增影像。
- 為了將影像新增到父div，我們使用了CSS 的background-image屬性，並使用background-cover屬性來正確設定影像。
- 我們使用了其他CSS屬性來根據我們的需要設定表單元素的樣式，您也可以建立自己的設計，但儘量使表單始終保持響應式。
<style>
.backgroundimage {
background-image: url(
"https://tutorialspoint.tw/assets/questions/media/1039321-1719921284.jpg");
height: 520px;
background-size: cover;
}
form {
width: 35%;
padding: 2%;
}
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: 16px;
}
label {
font-size: 18px;
color: white;
}
button {
font-weight: bold;
font-family: monospace, sans-serif, serif;
font-size: 16px;
background-color: #4caf50;
color: white;
padding: 8px 12px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
.cancelbtn {
width: auto;
padding: 8px 12px;
background-color: #f44336;
}
.profilePic {
text-align: center;
margin: 24px 0 12px 0;
}
img.avatar {
width: 100px;
height: 100px;
border-radius: 50%;
}
.formFields {
padding: 12px;
color: white;
}
span.pass {
float: right;
padding-top: 16px;
text-decoration: none;
}
</style>
完整的示例程式碼
在下面的示例中，我們將上述步驟的虛擬碼組合成完整的程式碼，以在影像上建立表單。
<!DOCTYPE html>
<html>
<head>
<style>
.backgroundimage {
background-image: url(
"https://tutorialspoint.tw/assets/questions/media/1039321-1719921284.jpg");
height: 520px;
background-size: cover;
}
form {
width: 35%;
padding: 2%;
}
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: 16px;
}
label {
font-size: 18px;
color: white;
}
button {
font-weight: bold;
font-family: monospace, sans-serif, serif;
font-size: 16px;
background-color: #4caf50;
color: white;
padding: 8px 12px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
.cancelbtn {
width: auto;
padding: 8px 12px;
background-color: #f44336;
}
.profilePic {
text-align: center;
margin: 24px 0 12px 0;
}
img.avatar {
width: 100px;
height: 100px;
border-radius: 50%;
}
.formFields {
padding: 12px;
color: white;
}
span.pass {
padding-top: 16px;
text-decoration: none;
}
</style>
</head>
<body>
<div class="backgroundimage">
<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" >
<button type="button" class="cancelbtn">Cancel</button>
<p>
<span class="pass">Forgot <a href>Password?</a></span>
</p>
</div>
</form>
</div>
</body>
</html>
執行上述程式碼後，它將生成一個輸出，其中包含登入表單以及用作登入表單背景的影像，這些都顯示在網頁上。
更新於：2024年7月2日
瀏覽量：1000+
廣告