PHP login registration front-end layout
Let’s look at the following login registration, as shown in the figure below:
First we create a login.php file
The code is as follows:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php 登錄與注冊 </title> </head> <body> <div id="div"> <h3>歡迎登陸后臺管理系統(tǒng)</h3> <div id="cnt"> <form method="post" action="main.php"> 用戶名：<input type="text" placeholder="請輸入用戶名" name="username"> <br><br> 密 碼：<input type="password" placeholder="請輸入用戶名" name="password"> <br><br> <input type="submit" value="登錄" class="sub"> <input type="button" value="注冊" class="sub" id="sub"> </form> </div> </div> </body> </html>
Such a page looks a bit unsightly, so we have to write css
css can be placed externally or internally
Let’s create a style.css file, this file stores our css code:
The code is as follows:
*{margin: 0px;padding: 0px;}
body{
background-image:url(image/4.jpg);
}
#div{width:300px;height:400px;
background:#B1FEF9;margin:0 auto;margin-top:150px;
border-radius:20px;
}
h3{margin-left:48px;padding-top:60px;}
h4{margin-left:120px;padding-top:60px;font-size: 18px;}
#cnt{width:280px;height:370px;margin-left:33px;padding-top:60px;}
.sub{width:70px;height:30px;border:1px solid #fff;background:#eee;
margin-left:28px;margin-top:20px;}
.sub1{
width:70px;height:30px;border:1px solid #fff;
background:#eee;margin-left:150px;margin-top:20px;
}When we create the css file, our login.php file needs to introduce the style
<link rel="stylesheet" type="text/css" href="style.css">
Look at our login.php file below, click the login button to jump Go to main.php But there is no response when you click the button, because we need script events to achieve the desired effect on the button button. Let's look at the following script code. First, introduce the jQuery file
< script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
Then let’s write the jquery code
<script>
$("#sub").click(function(){
location.href="reg.php";
});
</script>This code is also very simple. When the button click event occurs, it jumps to the reg page, so that we can jump to the registered page
Through the above code, we achieve the effect:
Click on the registration page and jump to reg.php
The code is as follows:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php 登錄與注冊 </title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="div"> <h4>會員注冊</h4> <div id="cnt"> <form method="post" action="regin.php"> 用戶名：<input type="text" placeholder="請輸入用戶名" name="username"> <br><br> 密碼：<input type="password" placeholder="請輸入密碼" name="password"> <br><br> <input type="submit" value="注冊" class="sub1"> </form> </div> </div> </body> </html>
The reg.php page is as shown below
We will operate the database in the next chapter
