網頁登錄界面
阿新 • • 發佈：2017-05-17
spa 字母 align char wid ext center class col
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用戶登錄</title>
<style type="text/css">
#div0{
width: 600px;
height: 250px;
position: absolute;
}
#div1{
width: 320px;
height: 250px;
position: absolute;
left: 600px;
}
/*判斷是否輸入*/
#div2{
width: 300px;
height: 30px;
position: absolute;
left: 920px;
top:70px;
}
</style>
<script type="text/javascript">
/*判斷用戶名*/
function judge(){
var div2 = document.getElementById("div2");
div2.style.fontSize="15px";
var userName = document.getElementById("userName").value;
var rule = /^[a-zA-Z]{3}/; /*前三個字符為字母*/
if(rule.test(userName)){
div2.style.color="green";
div2.innerHTML="格式正確";
}else{
div2.style.color="red";
div2.innerHTML="前三個字符必須為字母";
}
}
function subm(name){
var rule = /^[a-zA-Z]{3}/;
if(rule.test(name.value)){
return true;
}else{
return false;
}
}
</script>
</head>
<body>
<div id="all">
<div id="div0">
</div>
<div id="div1">
<form action="http://www.baidu.com" method="get" onsubmit="return subm(this.userName)">
<table align="center" width="300px">
<tr align="center">
<td colspan="2">
<span style="font-size: 20px;">論壇用戶帳號登錄</span><hr />
</td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td>
<span style="font-size: 18px;">用戶名：</span>
</td>
<td>
<input type="text" name="userName" id="userName" onblur="judge()" style="height: 30px;width: 220px;font-size: 20px;"/>
</td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td>
<span style="font-size: 18px;">密 碼：</span>
</td>
<td>
<input type="password" name="password" style="height: 30px;width: 220px;font-size: 20px;"/>
</td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr align="right">
<td colspan="2">
<a href="toRegister.do?opt=toRegister" id="a_1">立即註冊</a>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="登 錄" style="background-color: #2894FF;color: white;width: 300px;height: 50px;font-size: 20px;"/>
</td>
</tr>
</table>
</form>
</div>
<div id="div2">
</div>
</div>
</body>
</html>
網頁登錄界面