html+css+js实现简单登陆注册页面
Posted 肖薇
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html+css+js实现简单登陆注册页面相关的知识，希望对你有一定的参考价值。
先看一下最终效果，登陆和注册
背景图片：
附源码：
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>login</title>
<style>
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
width: 100%;
overflow: hidden;
margin: 0;
padding: 0;
background: url(Desert.jpg) no-repeat 0px 0px;
background-repeat: no-repeat;
background-size: 100% 100%;
-moz-background-size: 100% 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
#loginDiv {
width: 37%;
display: flex;
justify-content: center;
align-items: center;
height: 300px;
background-color: rgba(75, 81, 95, 0.3);
box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
border-radius: 5px;
}
#name_trip {
margin-left: 50px;
color: red;
}
p {
margin-top: 30px;
margin-left: 20px;
color: azure;
}
input {
margin-left: 15px;
border-radius: 5px;
border-style: hidden;
height: 30px;
width: 140px;
background-color: rgba(216, 191, 216, 0.5);
outline: none;
color: #f0edf3;
padding-left: 10px;
}
.button {
border-color: cornsilk;
background-color: rgba(100, 149, 237, .7);
color: aliceblue;
border-style: hidden;
border-radius: 5px;
width: 100px;
height: 31px;
font-size: 16px;
}
</style>
</head>
<body>
<div id="loginDiv">
<form action="" id="form">
<h1 style="text-align: center;color: aliceblue;">LOGIN IN</h1>
<p>User Name:<input id="userNname" type="text"><label id="name_trip"></label></p>
<p>Password: <input id="password" type="password"><label id="password_trip"></label></p>
<div style="text-align: center;margin-top: 30px;">
<input type="submit" class="button" value="login up">
<input type="reset" class="button" value="reset">
</div>
</form>
</div>
</body>
</html>
register.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>register</title> 7 <style> 8 * { 9 margin: 0; 10 padding: 0; 11 } 12 13 html { 14 height: 100%; 15 width: 100%; 16 overflow: hidden; 17 margin: 0; 18 padding: 0; 19 background: url(Desert.jpg) no-repeat 0px 0px; 20 background-repeat: no-repeat; 21 background-size: 100% 100%; 22 -moz-background-size: 100% 100%; 23 } 24 25 body { 26 display: flex; 27 align-items: center; 28 justify-content: center; 29 height: 100%; 30 } 31 32 #loginDiv { 33 width: 37%; 34 display: flex; 35 justify-content: center; 36 align-items: center; 37 height: 650px; 38 background-color: rgba(75, 81, 95, 0.3); 39 box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5); 40 border-radius: 5px; 41 } 42 43 #name_trip { 44 margin-left: 50px; 45 color: red; 46 } 47 48 p, 49 .sexDiv { 50 margin-top: 10px; 51 margin-left: 20px; 52 color: azure; 53 } 54 55 .sexDiv>input, 56 .hobby>input { 57 width: 30px; 58 height: 17px; 59 } 60 61 input, 62 select { 63 margin-left: 15px; 64 border-radius: 5px; 65 border-style: hidden; 66 height: 30px; 67 width: 140px; 68 background-color: rgba(216, 191, 216, 0.5); 69 outline: none; 70 color: #f0edf3; 71 padding-left: 10px; 72 } 73 74 .button { 75 border-color: cornsilk; 76 background-color: rgba(100, 149, 237, .7); 77 color: aliceblue; 78 border-style: hidden; 79 border-radius: 5px; 80 width: 100px; 81 height: 31px; 82 font-size: 16px; 83 } 84 85 .introduce { 86 margin-left: 110px; 87 } 88 89 .introduce>textarea { 90 background-color: rgba(216, 191, 216, 0.5); 91 border-style: hidden; 92 outline: none; 93 border-radius: 5px; 94 } 95 96 h1 { 97 text-align: center; 98 margin-bottom: 20px; 99 margin-top: 20px; 100 color: #f0edf3; 101 } 102 103 b { 104 margin-left: 50px; 105 color: #FFEB3B; 106 font-size: 10px; 107 font-weight: initial; 108 } 109 </style> 110 </head> 111 112 <body> 113 <div id="loginDiv"> 114 <form action=""> 115 <h1>REGESTER</h1> 116 <p>用户姓名:<input id="userNname" type="text" autofocus required><label id="name_trip"></label></p> 117 118 <p>用户密码:<input id="password" type="password" required><label id="password_trip"></label></p> 119 120 <p>确认密码:<input id="surePassword" type="password" required><label id="surePassword_trip"></label></p> 121 122 <p> 123 用户类型: 124 <select name="type" id="userType"> 125 <option value="0">请选择</option> 126 <option value="1">普通类型</option> 127 <option value="2">VIP类型</option> 128 </select> 129 <label id="type_trip"></label> 130 </p> 131 132 <div class="sexDiv"> 133 用户性别: 134 <input class="userSex" name="sex" value="boy" type="radio">男 135 <input class="userSex" name="sex" value="girl" type="radio">女 136 <label id="sex_trip"></label> 137 </div> 138 139 <p> 140 出生日期: 141 <input id="birthday" type="date"> 142 <label id="birthday_trip"></label> 143 </p> 144 145 <p class="hobby"> 146 兴趣爱好: 147 <input type="checkbox" name="hobby" value="read">阅读 148 <input type="checkbox" name="hobby" value="music">音乐 149 <input type="checkbox" name="hobby" value="sport">运动 150 <label id="hobby_trip"></label> 151 </p> 152 153 <p> 154 电子邮件: 155 <input id="email" type="email" required> 156 <label id="emil_trip"></label> 157 </p> 158 159 160 <p> 自我介绍:</p> 161 <div class="introduce"> 162 <textarea name="introduce" cols="30" id="introduceText" required rows="10"></textarea> 163 <label id="introduce_trip"></label> 164 </div> 165 166 <p style="text-align: center;"> 167 <input type="submit" class="button" onblur="checkForm()" onclick="return submitT()" value="提交"> 168 <input type="reset" class="button" value="重置"> 169 </p> 170 </form> 171 </div> 172 173 </body> 174 <script type="text/javascript"> 175 function trip(obj, trip) { 176 document.getElementById(obj).innerHTML = "<b>" + trip + "</b>"; 177 } 178 179 function checkSex() { 180 var sexNum = document.getElementsByName("sex"); 181 var sex = ""; 182 for (let i = 0; i < sexNum.length; ++i) { 183 if (sexNum[i].checked) { 184 sex = sexNum[i]; 185 } 186 187 } 188 if (sex == "") { 189 trip("sex_trip", "ERROR!!"); 190 return false; 191 } else { 192 trip("sex_trip", "OK!!"); 193 } 194 } 195 196 function checkHobby() { 197 var hobbyNum = document.getElementsByName("hobby"); 198 var hobby 动态html页面。用html实现注册和登录的一些问题。