<HTML>简单登录页面代码

<HTML>简单登录页面代码简单登录HTML

大家好,又见面了,我是你们的朋友全栈君。

这是一个简单的静态的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 " width="933" 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=%B5%C7%C2%BC" name="frmLogin"  >
 <tr>
 <td><label for="username">用户名:</label></td>
 <td><input type="text" name="username"  id="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" id="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" id="text_code" /></td>
 <td><input type="button" id="code" 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>简单登录页面代码

 

 

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/130670.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • .net的winform中DialogResult属性的使用「建议收藏」

    .net的winform中DialogResult属性的使用「建议收藏」在winform项目开发时,我们常会遇到一种情况,在主窗口中需要打开窗口进行数据的增加或修改,关闭子窗口时需要刷新主窗口数据。此时就用到DialogResult这个属性。下面用一个简单例子说明DialogResult这个属性的使用方法。要实现下图中的功能,点击form1的跳转按钮,跳转至界面JumpForm,点击JumpForm界面的保存按…

  • 正确使用AWS S3的方式之打造自己的https图床「建议收藏」

    正确使用AWS S3的方式之打造自己的https图床

  • blob对象介绍[通俗易懂]

    blob对象介绍[通俗易懂]一个Blob对象表示一个不可变的,原始数据的类似文件对象。Blob表示的数据不一定是一个JavaScript原生格式blob对象本质上是js中的一个对象,里面可以储存大量的二进制编码格式的数据。创建blob对象创建blob对象本质上和创建一个其他对象的方式是一样的,都是使用Blob()的构造函数来进行创建。构造函数接受两个参数:第一个参数为一个数据

    2022年10月30日
  • Linux更改文件权限命令「建议收藏」

    Linux更改文件权限命令「建议收藏」chmod命令1、格式:chmod【-cfvR】【–help】【–version】modefile2、参数1)必要参数-c当发送改变时,报告处理信息-f错误信息不输出-R处理指定目录以及其子目录下的所有文件-v运行时显示详细处理信息2)选择参数–reference=<目录或者文件>:设置成具有指定目录或文件具有相同的权限–version:显示版本信息<权限范围>+<权限设置>:使权限范围内的目录或文件具有指定的权限<

  • 补充排序函数(更快速)

    补充排序函数(更快速)

  • idea 2021 3 激活码【在线破解激活】

    idea 2021 3 激活码【在线破解激活】,https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号