<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>ログイン</title>
<link rel="STYLESHEET" href="tm.css" type="text/css">
<script type="text/javascript" src="login.js">
</script>
</head>
<body onload="fieldChanged();">
<p align="center">
<input border="0" src="title.files/title.jpg" name="I1" width="740" height="149" type="image"></p>
<br>
<br>
<h1 align="center">タイトル</h1>
<br>
<br>
<hr>
<div align="center">
<table border="0">
<!-- <form name="tm" action="release/menu.html"> -->：
<form>
<tr>
<th class="login_field">
ユーザID
</th>
<td class="login_field">
<input type="text" name="user_id" value=""
size="24" id="user_id"
onkeyup="fieldChanged();"
onchange="fieldChanged();">
</td>
</tr>
<tr>
<th class="login_field">
パスワード
</th>
<td class="login_field">
<input type="password" name="password" value=""
size="24" id="password"
onkeyup="fieldChanged();"
onchange="fieldChanged();">
</td>
</tr>
<tr>
<td colspan="2" class="login_button">
<!-- <input type="submit" value="ログイン" id="login"> -->
<input type="submit" value="ログイン" id="login" onclick="return passwdCheck();">
</td>
</tr>
</form>
</table>
</div>
</body>
</html>
【login.js】
function fieldChanged(){
var userId = getField("user_id");
var password = getField("password");
var disabled = true;
if (userId.value.length > 0 && password.value.length > 0) {
disabled = false;
}
var login = getField("login");
if (disabled) {
login.setAttribute("disabled", "disabled");
}
else {
login.removeAttribute("disabled");
}
}
function getField(fieldName){
var field = document.getElementById(fieldName);
if (field == undefined) {
throw new Error("要素が見つかりません: " + fieldName);
}
return field;
}
function passwdCheck(){
var userId = getField("user_id");
var pw = getField("password");
var disabled = true;
var caId = "ID";
var caPw = "password";
//alert( "PasswdCheckが呼ばれました");
if( userId.value != caId ){
alert("ユーザIDが登録されていません");
disabled = false;
}else{
if( pw.value != caPw ){
alert("パスワードが違います");
disabled = false;
}else{
//alert("認証をクリアしました");
location.href="release/"+pw.value+".html";
}
}
var login = getField("login");
if (disabled) {
login.setAttribute("disabled", "disabled");
}
else {
login.removeAttribute("disabled");
}
return false;
}
【tm.css】
h1 {
font-size: 32px;
margin: 0px;
padding: 4px;
color: #222288;
}
hr {
margin-top: 8px;
margin-bottom: 8px;
}
th.login_field {
font-size: 14px;
width: 140px;
text-align: left;
padding: 8px;
color: #ffffff;
background-color: #223366;
}
td.login_field {
padding: 8px;
}
td.login_button {
text-align: center;
padding: 8px;
}
table.toolbar {
margin-top: 16px;
margin-bottom: 32px;
}
table.list th {
width: 150px;
text-align: left;
padding: 8px;
color: #ffffff;
background-color: #5555aa;
}
table.list td {
background-color: #bbbbff;
padding: 8px;
}
th.add_field {
width: 150px;
text-align: left;
padding: 8px;
color: #ffffff;
background-color: #aaaaff;
}
td.add_field {
padding: 8px;
}
td.add_button {
text-align: center;
padding: 8px;
}
0 件のコメント:
コメントを投稿