PHP-更改自定义登录页面中回显文本的位置


PHP - Change position of echoed text from custom login page

我使用的是以下代码:

<!DOCTYPE html>
<html>  
<head>
    <title>TechBuzz-Incredible Saurav</title>
        <meta charset="utf-8">
        <link href="css/style.css" rel='stylesheet' type='text/css' />
        <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<?php
session_start();
if (ISSET($_GET['login'])) {
    if ($_POST ['password'] ==  'iamgreat' ) {
        $_SESSION['loggedin'] = 1;
        header("Location:redirect.php");
        exit;
    } 
else echo "Wrong details" ;     
}
?>
<body bgcolor="black">
                 <!-----start-main---->
                <div class="login-form">
                    <div class="head">
                        <img src="images/mem2.jpg" alt=""/>
                    </div>
                <form action= "?login=1" method="post">
                <font face="comic sans ms" color=grey size="5px"> <b> Please Login to TechBuzz: </b> </font><br><br>
                    <li>
                        <input type="password" name="password""><a href="#" class=" icon lock" /></a>
                    </li>
                    <div class="p-container">
                                <label class="checkbox"><input type="checkbox" name="checkbox" checked><i></i>Remember Me</label>
                                <input type="submit" />
                            <div class="clear"> </div>
                    </div>
        </form>
            </div>
</body>
</html>

当我运行此程序并输入错误的密码时,页面顶部会显示"错误的详细信息"。我想改变这个else echo "Wrong details";的位置。有人能帮我吗?我是个初学者。

如何设置2个密码?

这确实是一项非常简单的任务。你所需要做的就是设置一个变量,并在下面回显它。

在任何需要回显错误的位置使用<?php echo $error; ?>。else语句将值设置为$error;否则,它是一个空白字符串,因此即使在被呼应时也不会显示任何内容。

此外,您应该将php移到页面的顶部。这是完整的代码:

<?php
session_start();
$error = ""; // set blank string to start with
if (isset($_GET['login'])) {
    if ($_POST['password'] == 'iamgreat') {
        $_SESSION['loggedin'] = 1;
        header("Location:redirect.php");
        exit;
    }
    else $error = "<div style='color: red;'>Wrong Details</div>";
}
?>
<!DOCTYPE html>
<html>  
<head>
    <title>TechBuzz-Incredible Saurav</title>
        <meta charset="utf-8">
        <link href="css/style.css" rel='stylesheet' type='text/css' />
        <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body bgcolor="black">
                 <!-----start-main---->
                <div class="login-form">
                    <div class="head">
                        <img src="images/mem2.jpg" alt=""/>
                    </div>
                <form action= "?login=1" method="post">
                <font face="comic sans ms" color=grey size="5px"> <b> Please Login to TechBuzz: </b> </font><br><br>
<?php echo $error; ?>
                    <li>
                        <input type="password" name="password" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Password';}"><a href="#" class=" icon lock" /></a>
                    </li>
                    <div class="p-container">
                                <label class="checkbox"><input type="checkbox" name="checkbox" checked><i></i>Remember Me</label>
                                <input type="submit" />
                            <div class="clear"> </div>
                    </div>
        </form>
            </div>
</body>
</html>

正如您的评论所示,您需要在页面底部显示该错误。我在提交按钮之前添加那个错误&密码后字段。这样用户就可以很容易地看到按钮附近的错误。

<!DOCTYPE html>
<html>  
<head>
    <title>TechBuzz-Incredible Saurav</title>
        <meta charset="utf-8">
        <link href="css/style.css" rel='stylesheet' type='text/css' />
        <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<?php
session_start();
if (ISSET($_GET['login'])) {
    if ($_POST ['password'] ==  'iamgreat' ) {
        $_SESSION['loggedin'] = 1;
        header("Location:redirect.php");
        exit;
    } 
else $msg="Wrong details" ;     
}
?>
<body bgcolor="black">
                 <!-----start-main---->
                <div class="login-form">
                    <div class="head">
                        <img src="images/mem2.jpg" alt=""/>
                    </div>
                <form action= "?login=1" method="post">
                <font face="comic sans ms" color=grey size="5px"> <b> Please Login to TechBuzz: </b> </font><br><br>
                    <li>
                        <input type="password" name="password""><a href="#" class=" icon lock" /></a>
                    </li><br /> <font size="3" color="red"><?php echo $msg; ?></font>
                    <div class="p-container">
                                <label class="checkbox"><input type="checkbox" name="checkbox" checked><i></i>Remember Me</label>
                                <input type="submit" />
                            <div class="clear"> </div>
                    </div>
        </form>
            </div>
</body>
</html>

正如我在评论中提到的。将header()等向上移动到顶部,然后设置一个变量,如$error。稍后在页面和echo上检查您想要的位置:

<?php
session_start();
if(isset($_GET['login'])) {
    if($_POST['password'] ==  'iamgreat' ) {
            $_SESSION['loggedin'] = 1;
            header("Location:redirect.php");
            exit;
        } 
    // You don't really need an else here
    // seeings as it will either exit or error
    $error = true;     
} ?><!DOCTYPE html>
<html>  
<head>
<title>TechBuzz-Incredible Saurav</title>
<meta charset="utf-8">
<link href="css/style.css" rel='stylesheet' type='text/css' />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body bgcolor="black">
<!-----start-main---->
    <div class="login-form">
        <div class="head">
            <img src="images/mem2.jpg" alt=""/>
        </div>
        <!-- Here you can either echo the text, or show a block of html:
        Option 1
        <?php if(isset($error)) echo "Wrong details"; ?>
        -->
        <!-- Option 2 -->
        <?php if(isset($error)) { ?>
        <h2>Wrong details</h2><?php } ?>
        <form action="?login=1" method="post">
            <font face="comic sans ms" color=grey size="5px"><b>Please Login to TechBuzz: </b></font><br><br>
            <!-- You have no <ul> or <ol> -->
                <li><input type="password" name="password""><a href="#" class=" icon lock" /></a></li>
                <div class="p-container">
                <label class="checkbox"><input type="checkbox" name="checkbox" checked><i></i>Remember Me</label>
                <input type="submit" />
                <div class="clear"></div>
            </div>
        </form>
    </div>
</body>
</html>

在下面的答案中,我将向您展示一种简单的javascript方法,但如果您使用JQUERY,那么处理这样的事情就非常简单了------学习JQUERY,它将帮助您进行高级web开发。

        <!DOCTYPE html>
        <html>  
        <head>
            <title>TechBuzz-Incredible Saurav</title>
                <meta charset="utf-8">
                <link href="css/style.css" rel='stylesheet' type='text/css' />
                <meta name="viewport" content="width=device-width, initial-scale=1">
        <?php
         session_start();
         if (ISSET($_GET['login'])) {
             if ($_POST ['password'] ==  'iamgreat' ) {
                 $_SESSION['loggedin'] = 1;
                 header("Location:redirect.php");
                 exit;
             } 
         else echo "<script>document.getElementById("errorMsg").style.display = "visible";</script>" ;     
         }
        ?>
        </head>
        <body bgcolor="black">
                         <!-----start-main---->
                        <div class="login-form">
                            <div class="head">
                                <img src="images/mem2.jpg" alt=""/>
                            </div>
<!-----Put this DIV where you want to show message---->
                        <div id="errorMsg" style="display:none">Wrong Details</div>
                        <form action= "?login=1" method="post">
                        <font face="comic sans ms" color=grey size="5px"> <b> Please Login to TechBuzz: </b> </font><br><br>
                            <li>
                                <input type="password" name="password" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Password';}"><a href="#" class=" icon lock" /></a>
                            </li>
                            <div class="p-container">
                                        <label class="checkbox"><input type="checkbox" name="checkbox" checked><i></i>Remember Me</label>
                                        <input type="submit" />
                                    <div class="clear"> </div>
                            </div>
                </form>
                    </div>
        </body>
        </html>