html怎么登陆了才能阅读,HTML如何实现简单登录页面

本篇文章给大家介绍HTML实现简单登录页面的方式。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

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

静态页面登录测试

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 ;

}

}

	用户名： 密 码： 验证码: 自动登录

执行后如图