PHP 개발 사용자 로그인 모듈 HTML 로그인 페이지

먼저 HTML+CSS 코드를 사용하여 간단한 제출 양식을 작성하세요

<!DOCTYPE html>
<html>
<head>
    <title>用户登录页面</title>
    <meta charset="UTF-8"/>
    <style type="text/css">
        *{margin:0px;padding:0px;}
        ul{
            width:400px;
            list-style:none;
            margin:50px auto;
        }
        li{
            padding:12px;
            position:relative;
        }
        label{
            width:80px;
            display:inline-block;
            float:left;
            line-height:30px;
        }
        input[type='text'],input[type='password']{
            height:30px;
        }
        img{
            margin-left:10px;
        }
        input[type="submit"]{
            margin-left:80px;
            padding:5px 10px;
        }
    </style>
</head>
<body>
<form action="logins.php" method="post">
    <ul>
        <li>
            <label>用户名：</label>
            <input type="text" name="username" placeholder="请输入登录账号"/>
        </li>
        <li>
            <label>密码：</label>
            <input type="password" name="password" placeholder="请输入密码" />
        </li>
        <li>
            <label>验证码：</label>
            <input type="text" name="code" size="4" style="float:left"/>
        </li>
        <li>
            <input type="submit" value="登录" />
        </li>
    </ul>
</form>
</body>

두 번째로 내부에 인증 코드 모듈을 표시하려면 JavaScript 문을 추가하고 외부 인증 코드를 도입해야 합니다. PHP 파일:

<body>
<li>
    <label>验证码：</label>
    <input type="text" name="code" size="4" style="float:left"/>
    <a href="javascript:;" onclick="document.getElementById('captcha_img').src='captcha.php?r='+Math.random()">
        <img id="captcha_img" border='1' src='captcha.php?r=echo rand(); ?>' style="width:100px; height:30px" />
    </a>
</li>
</body>

댓글:

captcha.php는 외부 인증코드 파일로, 자바스크립트의 onclick 이벤트를 통해 인증코드를 변경할 수 있습니다.

다음은 전체 로그인 페이지 login.html 파일 코드입니다.

<!DOCTYPE html>
<html>
<head>
    <title>用户登录页面</title>
    <meta charset="UTF-8"/>
    <style type="text/css">
        *{margin:0px;padding:0px;}
        ul{
            width:400px;
            list-style:none;
            margin:50px auto;
        }
        li{
            padding:12px;
            position:relative;
        }
        label{
            width:80px;
            display:inline-block;
            float:left;
            line-height:30px;
        }
        input[type='text'],input[type='password']{
            height:30px;
        }
        img{
            margin-left:10px;
        }
        input[type="submit"]{
            margin-left:80px;
            padding:5px 10px;
        }
    </style>
</head>
<body>
<form action="logins.php" method="post">
    <ul>
        <li>
            <label>用户名：</label>
            <input type="text" name="username" placeholder="请输入登录账号"/>
        </li>
        <li>
            <label>密码：</label>
            <input type="password" name="password" placeholder="请输入密码" />
        </li>
        <li>
            <label>验证码：</label>
            <input type="text" name="code" size="4" style="float:left"/>
            <a href="javascript:;" onclick="document.getElementById('captcha_img').src='captcha.php?r='+Math.random()">
                <img id="captcha_img" border='1' src='captcha.php?r=echo rand(); ?>' style="width:100px; height:30px" />
            </a>
        </li>
        <li>
            <input type="submit" value="登录" />
        </li>
    </ul>
</form>
</body>
</html>

표시 효과:

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <title>用户登录页面</title> <meta charset="UTF-8"/> <style type="text/css"> *{margin:0px;padding:0px;} ul{ width:400px; list-style:none; margin:50px auto; } li{ padding:12px; position:relative; } label{ width:80px; display:inline-block; float:left; line-height:30px; } input[type='text'],input[type='password']{ height:30px; } img{ margin-left:10px; } input[type="submit"]{ margin-left:80px; padding:5px 10px; } </style> </head> <body> <form action="logins.php" method="post"> <ul> <li> <label>用户名：</label> <input type="text" name="username" placeholder="请输入登录账号"/> </li> <li> <label>密码：</label> <input type="password" name="password" placeholder="请输入密码" /> </li> <li> <label>验证码：</label> <input type="text" name="code" size="4" style="float:left"/> <a href="javascript:;" onclick="document.getElementById('captcha_img').src='captcha.php?r='+Math.random()"> <img id="captcha_img" border='1' src='captcha.php?r=echo rand(); ?>' style="width:100px; height:30px" /> </a> </li> <li> <input type="submit" value="登录" /> </li> </ul> </form> </body> </html>

제출하다 코드 재설정

자동운전