預覽效果：
源碼演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login</title>
<script>
function valid(){
var pwd1 = document.getElementById("pwd").value;
var pwd2 = "123456";
var acc1 = document.getElementById("acc").value;
var acc2 = "Mark";
// 已被設置的賬號與密碼的驗證
if (pwd1 == pwd2 && acc1 == acc2)
{
document.getElementById("tishi").innerHTML="<font color = 'green'>登錄成功</font>"
document.getElementById("button").disabled = false;
}
else {
document.getElementById("tishi").innerHTML="<font color = 'red'>登錄失敗</font>"
document.getElementById("button").disabled = true;
}
}
</script>
</head>
<body>
<div class="form">
<label>賬號</label>
<div>
<input type="text" class="form_1" name="acc" id="acc" placeholder="賬號">
</div>
</div>
<div class="form">
<label>請輸入密碼</label>
<div>
<input type="password" class="form_1" name="pwd" id="pwd" placeholder="密碼">
</div>
</div>
<input type="button" value="登錄" onclick="valid()">
<p id="tishi"></p>
</body>
</html>