HTML5動態網頁登錄代碼
在現在的互聯網世界中，動態網頁越來越受到歡迎。動態網頁能夠根據用戶的行為和輸入來動態的更改網頁內容。其中一個關鍵的功能就是登錄系統。HTML5提供了很多新的元素和API，可以讓我們更容易的實現登錄系統。
下面是一個使用HTML5實現的簡單的動態網頁登錄代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>動態網頁登錄</title>
<style>
form {
margin: 10px;
border: 1px solid black;
padding: 10px;
}
</style>
</head>
<body>
<form id="loginForm" method="post" action="">
<h2>用戶登錄</h2>
<label for="username">用戶名:</label>
<input type="text" name="username" id="username"><br>
<label for="password">密碼:</label>
<input type="password" name="password" id="password"><br>
<button type="submit">登錄</button>
</form>
<p id="message"></p>
<script>
var form = document.getElementById("loginForm");
form.addEventListener('submit', function(event) {
event.preventDefault();
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if (username === "admin" && password === "password") {
document.getElementById("message").innerHTML = "登錄成功";
} else {
document.getElementById("message").innerHTML = "登錄失敗";
}
});
</script>
</body>
</html>通過使用HTML5的form元素、input元素和button元素，我們創建了一個簡單的登錄表單。然后，我們使用JavaScript添加了登錄表單的事件監聽，當表單提交時，我們獲取了用戶名和密碼，并檢查它們的值是否與"admin"和"password"匹配。如果匹配成功，我們就顯示"登錄成功"的信息，否則顯示"登錄失敗"的信息。
HTML5的動態網頁登錄代碼非常簡單而且易于實現。這個例子只是一個簡單的演示，您可以根據您的實際需求進行修改和擴展。
上一篇html5動態心形代碼
下一篇html5動態矩形的代碼