我如何使用HTML, CSS, JS为我的网站制作登录/注册代码



我正在尝试为阿拉斯加钓鱼报告制作一个多用户网站。我要找来自不同城镇、村庄/城市的人写关于他们所在地区的报告,供其他人学习。我想知道如何使一个系统,可以保持所有的用户名与密码相关联。我已经把登录系统弄好了。下面是HTML:

<!DOCTYPE html>
<html>
<head>  
<title> LOGIN Form</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<rel='stylesheet' type='text/css'>
<style>
body{
margin:0;
padding:0;
background:url("log.jpg");
background-size: cover;
font-family: sans-serif;
}
.log{  width:1366px;
height:696px;

}
.loginbox{  width: 320px;
height: 450px;
background: #000;
color: #fff;
top:20%;
left:36%;
position:absolute;
transform: translate{-50%,-50%}
box-sizing: border-box;
padding: 70px 30px;
opacity:.7;
}
.avatar{  width: 100px;
height: 100px;
border-radius:50%;
position:absolute;
top:-14%;
left:calc(50% - 50px);
}
h1{    margin:0;
padding: 0 0 20px;
text-align: center;
font-size: 30px;
font-family:AR JULIAN;
color:red;
}    
.loginbox p{  margin:0;
padding: 0;
font-weight:bold;
}
.loginbox input{width: 100%;
margin-bottom:20px;
}
.loginbox input[type="text"], input[type="password"]{
border: none;
border-bottom: 1px solid #fff;
background: transparent;
outline:none;
height:40px;
color:#fff;
font-size:16px;
}
.loginbox input[type="submit"]{
border: none;
outline:none;
height:40px;
background:#fb2525;
color: #fff;
font-size:18px;
border-radius:20px;
}
.loginbox input[type="submit"]:hover
{    cursor:pointer;
background:#ffc107;
color:#000;
}
.loginbox a{   
text-decoration:none;
font-size:12px;
line-height:20px;
color: darkgrey;
}
.loginbox a:hover
{  
color:#ffc107;
}
.active{
color:#fff;
background:#e02626;
border-radius:4px;
}
</style>
</head>
<body>
<img class="log">
<div class="loginbox">
<img src="avatar1.jpg" class="avatar">
<h1>Login to Alaska Fishing Reports</h1>
<form>
<p> Username</p>
<input type="text" name="" placeholder="Enter Username">
<p> Password</p>
<input type="password" name="" placeholder="Enter Password"><br>
<input type="submit" name="" value="Login">
<a href="#">Lost your password?</a><br>
<a href="#">Don't have an acoount?</a>
</form>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/ajax-utils.js"></script>
<script src="js/script.js"></script>

要创建登录页面,您必须学习服务器端编程,如PHP和MySQL。这可能有点复杂,而且仅使用HTML、CSS和JS无法创建功能齐全的登录页面。您还应该为您的客户端设置安全性。

最新更新