HTML5登陸界面源代碼
以下是一個簡單的HTML5登陸界面的源代碼示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登陸</title>
<style>
/* 樣式表 */
form {
padding: 10px;
border: 2px solid #ccc;
border-radius: 5px;
margin: 0 auto;
max-width: 500px;
}
label, input, button {
display: block;
width: 100%;
margin-bottom: 10px;
}
label {
font-weight: bold;
}
input[type="text"], input[type="password"] {
padding: 5px;
border: 1px solid #ccc;
border-radius: 3px;
}
button {
padding: 5px;
border: none;
border-radius: 3px;
background-color: #0077cc;
color: #fff;
cursor: pointer;
transition: background-color 0.3s ease-in-out;
}
button:hover {
background-color: #005fa3;
}
</style>
</head>
<body>
<form>
<h2>登陸</h2>
<p>請填寫下列表單以登陸：</p>
<label for="username">用戶名：</label>
<input type="text" id="username" name="username" required>
<label for="password">密碼：</label>
<input type="password" id="password" name="password" required>
<button type="submit">登陸</button>
</form>
</body>
</html>以上是一個典型的HTML5登陸界面的源代碼示例。代碼中包括HTML5文檔類型，元數據、樣式表，表單控件，以及提交按鈕等組件。該代碼使用了一些CSS樣式來為頁面元素添加樣式和布局。其中最重要的是表單元素，包括用戶名和密碼的輸入框以及登陸按鈕。這些元素使用了必需屬性以確保用戶輸入正確的用戶名和密碼才能進入系統。上一篇pdh_css