简易版登录表单练习
Posted 小智RE0
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了简易版登录表单练习相关的知识，希望对你有一定的参考价值。
最终效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录首页</title>
<!-- 样式表修饰 -->
<style type="text/css">
/* 先取掉浏览器的默认效果 */
*{
margin: 0px;
padding: 0px;
}
/* 去除超链接下划线 */
a{
text-decoration: none;
}
/* 图片转块标签 */
img{
display: block;
}
/* 背景图 */
body{
background: url(./img/bz.png) repeat fixed center;
}
/* 注册栏的大盒子 */
#outbox{
/* 基本要素 宽,高,背景 */
width: 480px;
height: 350px;
background-color: #F1F0F3;
/* 边框设置 */
border-radius: 30px;
/* 设置透明度 */
opacity: 0.8;
/* 开启绝对定位 */
position: absolute;
top: 50%;
left: 50%;
/* 设置外边距 使得居中 */
margin-top: -175px;
margin-left: -240px;
}
/* 修饰欢迎登录字体 */
#outbox_welcome{
width: 480px;
height: 50px;
/* 使得文字居中 */
text-align: center;
line-height: 50px;
font-size: 30px;
font-weight: bold;
}
/* 欢迎登录字体移入有效果 */
#outbox_welcome:hover{
color: #FF8000;
}
/* 表单整体修饰 */
#outbox_form{
width: 480px;
height: 250px;
}
/* 账户框,密码框以及提示信息弹出位置 */
#outbox_form_account,#outbox_form_password{
width: 480px;
height: 100px;
/* 开相对定位 */
position:relative;
}
/* 账号,密码文字 的位置 */
#outbox_form_account_char,#outbox_form_password_char{
width: 80px;
height: 50px;
/* 使得字体居中 */
text-align: center;
line-height: 50px;
font-size: 20px;
/* 开绝对定位 */
position: absolute;
left: 30px;
}
/* 输入框,密码框的位置 */
#outbox_form_account_in,#outbox_form_password_in{
width: 400px;
height: 50px;
/* 开绝对定位 */
position: absolute;
left: 150px;
line-height: 50px;
}
/* 输入框,密码框 */
#accountId,#passwordId{
width: 250px;
height: 40px;
font-size: 20px;
/* 边框修饰 */
border: skyblue solid 3px;
border-radius: 5px;
/* 清除浏览器的默认边框 */
outline: none;
}
/* 输入框,密码框聚焦事件 */
#accountId:focus{
border-color: greenyellow;
}
#passwordId:focus{
border-color: greenyellow;
}
/* 弹出信息框修饰 */
#outbox_form_account_error,#outbox_form_password_error{
width: 250px;
height: 50px;
/* 文字居中 */
line-height: 50px;
font-size: 20px;
/* 定位 */
position: absolute;
top: 50px;
left: 150px;
}
/* 登录按钮盒子设置 */
#outbox_form_loginbtn{
width: 480px;
height: 50px;
line-height: 50px;
text-align: center;
/* 开启相对定位 */
position: relative;
}
/* 登录按钮 */
#loginbtn{
width: 300px;
height: 40px;
border-radius:20px;
font-size: 20px;
background-color: aqua;
/* 绝对定位 */
position: absolute;
left: 90px;
}
/* 底部跳转的小盒子 */
#outbox_bottom{
width: 480px;
height: 50px;
/* 开相对定位 */
position: relative;
}
/* 提示信息文字 */
#outbox_bottom_char{
width: 120px;
height: 40px;
font-size: 20px;
/* 开绝对定位 */
position: absolute;
top: 10px;
left: 120px;
}
/* 跳转链接修饰 */
#outbox_bottom_toresign{
width: 120px;
height: 40px;
font-size: 20px;
/* 绝对定位 */
position: absolute;
top: 10px;
left: 240px;
}
</style>
<!-- JS事件 -->
<script type="text/javascript">
function toLogin(){
/* 先取到账户框和密码框的值 */
var accontVal = document.getElementById("accountId").value;
var passwordVal = document.getElementById("passwordId").value;
if(accontVal.length==0){
document.getElementById("outbox_form_account_error").innerHTML="用户名不能为空!";
return false;
}
else if(passwordVal.length==0 || passwordVal.length>6){
document.getElementById("outbox_form_password_error").innerHTML="密码不能为空!";
return false;
}
else{
return true;
}
}
/* 考虑到提示信息持久性的不能消失;就让输入框,密码框的聚焦事件去清除 */
function reAcErr(){
document.getElementById("outbox_form_account_error").innerHTML="";
}
function rePassErr(){
document.getElementById("outbox_form_password_error").innerHTML="";
}
</script>
</head>
<body>
<!-- 包裹注册栏的大盒子 -->
<div id="outbox">
<div id="outbox_welcome">
欢迎登录
</div>
<!-- 填写的表单 -->
<div id="outbox_form">
<form action="提交.html">
<!-- 账户框以及提示信息弹出位置 -->
<div id="outbox_form_account">
<div id="outbox_form_account_char">账户:</div>
<div id="outbox_form_account_in">
<input id="accountId" type="text" name="account" placeholder="请输入账户名:" onfocus="reAcErr()"/>
</div>
<!-- 提示信息框,在页面中配合javascript事件使用 -->
<div id="outbox_form_account_error"></div>
</div>
<!-- 密码框以及提示信息弹出位置 -->
<div id="outbox_form_password">
<div id="outbox_form_password_char">密码:</div>
<div id="outbox_form_password_in" >
<input id="passwordId" type="password" name="password" placeholder="请输入密码:" onfocus="rePassErr()"/>
</div>
<!-- 提示信息框,在页面中配合javascript事件使用 -->
<div id="outbox_form_password_error"></div>
</div>
<!-- 登录按钮位置 -->
<div id="outbox_form_loginbtn">
<input id="loginbtn" type="button" value="登录" onclick="toLogin()" />
</div>
</form>
</div>
<!-- 跳转注册 -->
<div id="outbox_bottom">
<div id="outbox_bottom_char">还没有账号?</div>
<div id="outbox_bottom_toresign"><a href="">立即注册</a></div>
</div>
</div>
</body>
</html>
以上是关于简易版登录表单练习的主要内容，如果未能解决你的问题，请参考以下文章