css代码

*{margin: 0;padding: 0;}body{*text-align: center;}/*登陆表单*/.login_form{width: 220px;margin: 0 auto;background-color: #F2F7FA;padding: 20px;}/*输入的用户名、密码框*/.ipt_txt{width: 220px;height: 30px;line-height: 30px;vertical-align: middle;border: 1px solid #C7C7C7 ;outline: none;padding-left: 10px;}/*登陆按钮*/.btn_login{width: 220px;height: 45px;line-height: 45px;background-color: #67C53C;color: #ffffff;outline: none;border: none;font-size: 18px;cursor: pointer;}.btn_login:hover{background-color:#26B20E;}/*每个div相距*/.txt{margin-bottom: 10px;}/*checkbox居中对齐问题*/.align{font-size:12px;*display: table}.pos{vertical-align: top;*display: table-cell;*vertical-align: middle;}.poschk{*margin-left: -6px;}.pos_forget_psd{margin-left: 25px;*margin-left: 30px;}/*用户名、密码提示文字信息*/.txtTip{position: absolute;left: 0;top:0;_top:2px;display: block;height: 30px;line-height: 30px;font-size: 12px;padding-left: 10px;opacity:0.5;text-align: left;/*   background-color: green;*/}/*登陆失败提示信息*/.login_err_msg{color: red;font-size: 12px;width: 220px;height: 24px;line-height: 24px;text-align: left;padding-left: 10px;}

html代码

<form name='user_login' action="post" class="login_form" onsubmit="login_submit();return false;"><div id="showmsg" class="login_err_msg"></div><div style="position: relative" class="txt"><input type="text" name="username" class="ipt_txt" autocomplete="off" maxlength="50"onblur="blurecheck(this)" onfocus="getcheck(this)"><span class="txtTip" onclick="tipshow(this)" style="display: block">用户名</span></div><div style="position: relative" class="txt"><input type="password" name="password" class="ipt_txt" autocomplete="off" maxlength="20"onblur="blurecheck(this)" onfocus="getcheck(this)"><span class="txtTip" onclick="tipshow(this)" style="display: block">密码</span></div><div class="txt align"><input type="checkbox" id="chk" class="pos poschk"/><label class="pos" for="chk">下次自动登陆</label><a class="pos pos_forget_psd" href="">忘记密码</a></div><div class="txt"><input type="submit" class="btn_login" value="登陆"onmouseover="btn_login_color_change(this,'in')"onmouseout="btn_login_color_change(this,'out')"></div>
</form>

js代码

var showmsgdiv = document.getElementById("showmsg");//显示的提示信息 点击事件function tipshow(obj){//当前节点的上一个兄弟节点  注意空格也是文本节点var tempObj = obj.previousSibling;tempObj.focus();tempObj.style.borderColor="#2684C2";obj.style.display="none"}//得到焦点时候function getcheck(obj){//得到焦点时候边框颜色发生变化obj.style.borderColor="#2684C2";if(obj.value==''||obj.value==null){/*提示的文本文字隐藏*/obj.nextSibling.style.display="none";}}// 失去焦点时候function blurecheck(obj){/*失去焦点时候颜色变化*/obj.style.borderColor="#C7C7C7"if(obj.value==''||obj.value==null){/*提示文本显示*/obj.nextSibling.style.display="block";}}/*提交表单*/function login_submit(){var oform = document.forms["user_login"]var ouser = oform[0].value;var opsd = oform[1].value;if(ouser==''){showmsgdiv.innerHTML="请输入您的账号";}else if(opsd==''){showmsgdiv.innerHTML="请输入您的密码";}else {showmsgdiv.innerHTML="帐号或密码有误";}return false;}//解决提交按钮 hover 颜色变化  ie6不支持hoverfunction btn_login_color_change(obj,flag){var color = flag=='in'?"#26B20E":"#67C53C";obj.style.backgroundColor=color;}