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>欢迎登陆后台管理系统</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

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

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php 登录与注册 </title> <style> *{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; } </style> </head> <body> <div id="div"> <h3>欢迎登陆后台管理系统</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>

submit Reset Code

Automatic operation

PHP login registration front-end layout

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]