PHP 개발 소규모 포럼 튜토리얼 로그인 HTML 페이지

저희 로그인 페이지는 레이아웃을 위해 <table> 테이블을 사용합니다.

몇 가지 간단한 CSS 스타일을 사용하면 최종 효과는 아래와 같습니다.

로그인 페이지에 대해 사용자 이름과 비밀번호에 대해 간단한 JS 판단을 했습니다. 존재하지 않음 로그인 양식을 작성하면 관련 프롬프트 정보가 제공됩니다

구체적인 코드는 다음과 같습니다

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆界面</title>
    <script type="text/javascript">
        function foo(){
            if(myform.username.value=="")
            {
                alert("请输入用户名");
                myform.username.focus();
                return false;
            }
            if (myform.password.value=="")
            {
                alert("请输入密码");
                myform.password.focus();
                return false;
            }
        }
    </script>
    <style type="text/css">
        table{
            height: 300px;
        }
        input{
            width: 190px;
            height: 25px;
        }
        .title{
            background-color:#B10707 ;
            color: white;
            border: none;
        }
        .but{
            width: 140px;
            height: 43px;
        }
        .spa{
            margin-left: 10px;
        }
    </style>
</head>
<body>
<form action="login.php"  method="post" onsubmit="return foo();" name="myform" >
    <table width="400px" border="1" cellpadding="12" cellspacing="1" align="center">
        <tr>
            <td colspan="2" class="title">会员登录<span class="spa">[<a style="color: white"  href="index.php">返回首页]</a></span></td>
        </tr>
        <tr>
            <td width="110px">会员ID</td>
            <td><input type="text" name="username"></td>
        </tr>
        <tr>
            <td width="110px">会员密码</td>
            <td><input type="password" name="password"></td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <button class="but" style="text-align: center">立即登录</button>
            </td>
        </tr>
    </table>
</form>
</body>
</html>
</body>
</html>

페이지에 입력한 정보를 login.php 페이지에 제출하여 처리하세요

지속적인 학습

새로운 파일

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户登录</title> </head> <body> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登陆界面</title> <script type="text/javascript"> function foo(){ if(myform.username.value=="") { alert("请输入用户名"); myform.username.focus(); return false; } if (myform.password.value=="") { alert("请输入密码"); myform.password.focus(); return false; } } </script> <style type="text/css"> table{ height: 300px; } input{ width: 190px; height: 25px; } .title{ background-color:#B10707 ; color: white; border: none; } .but{ width: 140px; height: 43px; } .spa{ margin-left: 10px; } </style> </head> <body> <form action="login.php" method="post" onsubmit="return foo();" name="myform" > <table width="400px" border="1" cellpadding="12" cellspacing="1" align="center"> <tr> <td colspan="2" class="title">会员登录<span class="spa">[<a style="color: white" href="index.php">返回首页]</a></span></td> </tr> <tr> <td width="110px">会员ID</td> <td><input type="text" name="username"></td> </tr> <tr> <td width="110px">会员密码</td> <td><input type="password" name="password"></td> </tr> <tr> <td colspan="2" align="center"> <button class="but" style="text-align: center">立即登录</button> </td> </tr> </table> </form> </body> </html> </body> </html>

제출하다 코드 재설정

자동운전