HTML5写的简单登录页面

整体效果图：

主要代码：


<!DOCTYPE html>
<html lang="en" class="no-js"><head><meta charset="utf-8"><title>欢迎来到登录界面</title> <meta name="viewport"content="width=device-width,initial-scale=1.0"><meta name="description"content=""><meta name="author"content=""><!---CSS--><link rel="stylesheet" type="text/css" href="css/supersized.css"><link rel="stylesheet" type="text/css" href="css/login.css"><link rel="stylesheet" href="css/bootstrap.min.css"><script src="js/jquery-1.8.2.min.js"></script><script type="text/javascript"src="js/jquery.form.js"></script><script type="text/javascript"src="js/tooltips.js"></script><script type="text/javascript"src="js/login.js"></script>
<body><div class="page-container"><div class="main_box"><div class="login_box"><div class="login_logo"><label for="j_loginname"class="t"><h2><font color="red">欢迎使用登录系统</font></h2></label></div><div class="login_form"><form action="index.html"id="login_form"method="post"><div class="form-group"><label for="j_username" class="t">邮　箱：</label> <input id="email" value="" name="email" type="text" class="form-control x319 in" autocomplete="off"></div><div class="form-group"><label for="j_password" class="t">密　码：</label> <input id="password" value="" name="password" type="password" class="password form-control x319 in"></div><div class="form-group"><label for="j_captcha" class="t">验证码：</label><input id="j_captcha" name="j_captcha" type="text" class="form-control x164 in"><img id="captcha_img" alt="点击更换" title="点击更换" src="data:images/captcha.jpeg" class="m"></div><div class="form-group"><label class="t"></label><label for="j_remember" class="m"><input id="j_remember" type="checkbox" value="true">&nbsp;记住登陆账号!</label></div></div><div class="form-group space"><label class="t"></label>　　　<button type="button"id="submit_btn" class="btn btn-primary btn-lg">&nbsp;登&nbsp;录&nbsp </button><input type="reset" value="&nbsp;&nbsp;&nbsp;&nbsp;重&nbsp;置&nbsp;" class="btn btn-default btn-lg"></div></form></div>  </div></div></div>
<script src="js/supersized.3.2.7.min.js"></script>
<script src="js/supersized-init.js"></script>
<script src="js/scripts.js"></script>
<div style="text-align:center;">
<p>来源:<a href="http://www.mycodes.net/" target="_blank"></a></p>
</div>    </body>
</head>
</html>

javasript中的代码

// JavaScript Document
//支持Enter键登录document.onkeydown = function(e){if($(".bac").length==0){if(!e) e = window.event;if((e.keyCode || e.which) == 13){var obtnLogin=document.getElementById("submit_btn")obtnLogin.focus();}}}$(function(){//提交表单$('#submit_btn').click(function(){show_loading();var myReg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; //邮件正则if($('#email').val() == ''){show_err_msg('邮箱还没填呢！');  $('#email').focus();}else if(!myReg.test($('#email').val())){show_err_msg('您的邮箱格式错咯！');$('#email').focus();}else if($('#password').val() == ''){show_err_msg('密码还没填呢！');$('#password').focus();}else{//ajax提交表单，#login_form为表单的ID。 如：$('#login_form').ajaxSubmit(function(data) { ... });//show_msg('登录成功咯！  正在为您跳转...','/');    }});});

源码demo下载地址：http://pan.baidu.com/s/1kTREtxl

HTML5写的简单登录页面相关推荐

用dcloud 的h5+实现APP简单登录页面
# 简单介绍最近接到公司一个移动APP项目开发任务,公司决定采用跨端技术来实现一套代码同时兼容安卓和苹果端手机,于是我评估了一下最后决定采用dcloud平台提供mui和htlm5+技术来实现,其实现 ...
一步一步理解 python web 框架，才不会从入门到放弃 -- 简单登录页面
上一节,我们基本了解了 Django 的一些配置,这一节,我们将通过一个简单的登录页面,进一步学习 Django 的使用. 新建项目首先,新建一个 Django 项目,记得别弄错了哦. settin ...
web前端页面——移动端简单登录页面、下拉菜单（代码详细注释）
今天跟着专业老师复习了一下前端,感觉好多都已经忘记了,我将今天复习的一些重点整理出来. https://blog.csdn.net/hanhanwanghaha宝藏女孩欢迎您的关注! 欢迎关注微 ...
用php mui ajax注册登录页面,ajax实现简单登录页面
本文实例为大家分享了ajax实现简单登录页面的具体代码,供大家参考,具体内容如下一.什么是ajax Ajax是一种无需重新加载整个网页,能够更新部分网页的技术. 二.ajax的工作原理 Ajax工作 ...
php的登录页面怎么弄,php登录界面_php简单登录页面
摘要腾兴网为您分享:php简单登录页面,一起成长,携程,小米社区,享家等软件知识,以及音频转文字,化学实验模拟软件,给力么,甘肃扶贫信息网,qq群成员提取工具,初中文言文全解,crossword英文 ...
html简单登录页面制作
html简单登录页面制作 <!DOCTYPE html> <html><head><meta charset="utf-8">< ...
jsp+servlet实现简单登录页面功能Demo
小白新路历程-1 实现功能: 模拟简单登录功能,登录成功跳转新页面,登录失败在原登录界面提示登录失败信息开发环境: eclipse Tomcat-8.0 预备知识: HTML标签,Servlet相关 ...
HTML基础：用表单写一个简易登录页面
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 < ...
使用bootstrap框架实现简单登录页面
实现思路:从上到下,从左到右一开始没想到怎么实现的是验证码和图片那里,实现验证码和图片那一块的布局还是一个input控件和一张图片,使用bootstrap里的input控件默认情况下,是占一行的. ...
用php和mysql写一个注册登录页面
前端0基础,草草看了一天的HTML和php的相关知识,写了个大致功能实现的可以实现注册登录的页面.下面就是代码了: <!DOCTYPE html> <html> <hea ...

HTML5写的简单登录页面

HTML5写的简单登录页面相关推荐

最新文章

热门文章