网页登录界面
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了网页登录界面相关的知识,希望对你有一定的参考价值。
<!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>
以上是关于网页登录界面的主要内容,如果未能解决你的问题,请参考以下文章