HTML实现登录页面

PHP中文网

2023-06-07 帮助8人

学新通技术网

这是一个简单的静态的html页面登录图片，之前写的，验证码方面没有搞懂，这里我重新参考了这里，但是部分功能还没有完善。仅供参考

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>静态页面登录测试</title> 
 
 <script language="javascript">
 window.onload = function() {
  createCode()
 }
 var code; //在全局定义验证码 
 function createCode() {
  code = "";
  var codeLength = 4; //验证码的长度 
  var checkCode = document.getElementById("code");
  var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
   'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); //随机数 
  for(var i = 0; i < codeLength; i  ) { //循环操作 
  var index = Math.floor(Math.random() * 36); //取得随机数的索引（0~35） 
   code  = random[index]; //根据索引取得随机数加到code上 
  }
  checkCode.value = code; //把code值赋给验证码 
 }
 //校验验证码 
function validateLogin(){
    var sUserName = document.frmLogin.username.value ;
    var sPassword = document.frmLogin.password.value ;
    var inputCode = document.frmLogin.text_code.value;
    /*var sinputCode =document.frmLogin.inputcode.value ;  */
    if ((sUserName.length <= 0) || (sUserName=="")){
     alert("请输入用户名!");
     return false ;
    }
     
    if ((sPassword.length <= 0) || (sPassword=="")){
     alert("请输入密码!");
     return false ;
    }
    if ((inputCode.length<= 0) || (inputCode==NULL)){
        alert("请输入验证码!");
        return false ;
       }
   } 
  </script>
</head>
<body >
<fieldset>
<table background="images\e.jpg "   height="412">
 <tr height="170">
 <td width="570px"> </td>
 <td> </td>
 </tr> 
 <tr>
<td> </td>        
<td><table>
<form method ="POST" action="http://localhost:8080/test/hello.html?login=��¼" name="frmLogin"  >
 <tr>
 <td><label for="username">用户名：</label></td>
 <td><input type="text" name="username"    placeholder="input your name" size="20" maxlength="20" /></td>
 <td > </td>
 <td> </td>
 </tr>
 <tr>
 <td><label for="password">密  码：</label></td>
 <td><input type="password" name="password"   placeholder="input your password" size="20" maxlength="20" )  this.value='';" /></td>
 <td> </td>
 <td> </td>
 </tr>
 <tr>
 <td><label for="text_code">验证码:</label></td>
 <td><input type="text" size="" name="text_code"   /></td>
 <td><input type="button"   onclick="createCode()" name=""></td>
 </tr>
 <tr>
 <td><input type="checkbox" name="zlogin" value="1">自动登录</td>
 </tr>
 </table>
 </td>
  <tr>
  <td> </td>   
  <td><table>
   <tr>
  <td><input type="submit" name="login" value="登录" onClick="return validateLogin()"/></td>
  <td><input type="reset" name="rs" value="重置"></td>
  <td><input type="button" name="button" value="注册" onclick="window.location.href='https://www.w3school.com.cn/jsref/event_onfocus.asp'"></td>
  </tr>
 </tr>
 </table>
 </td>
 </table>
</fieldset>
</form>
 
</body>
</html>

执行后如图

学新通技术网

这篇好文章是转载于：学新通技术网

HTML实现登录页面

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

怎样阻止微信小程序自动打开

TikTok加速器哪个好免费的TK加速器推荐