Question

我有这个登录表单，如下所示：

当我输入错误的信息时，它看起来像这样：

现在的问题是，当我收到错误时，它会移动我的登录表单。

无论如何，当我收到错误消息时，我可以阻止表单移动吗？也许我可以把错误信息放在表单下面，但我不知道如何，我尝试回应表单下面的错误，但它没有用。

这是我的PHP：

<?php
/*********************************************************************
* This script has been released with the aim that it will be useful.
* Written by Vasplus Programming Blog
* Website: www.vasplus.info
* Email: info@vasplus.info
* All Copy Rights Reserved by Vasplus Programming Blog
***********************************************************************/
session_start();
ob_start();

//Include the database connection file
include "database_connection.php";

//Check to see if the submit button has been clicked to process data
if(isset($_POST["submitted"]) && $_POST["submitted"] == "yes")
{
    //Variables Assignment
    $username = trim(strip_tags($_POST['username']));
    $user_password = trim(strip_tags($_POST['passwd']));


    $validate_user_information = mysql_query("select * from `signup_and_login_users_table` where `username` = '".mysql_real_escape_string($username)."' and `password` = '".mysql_real_escape_string($user_password)."'");

    //Validate against empty fields
    if($username == "" || $user_password == "")
    {
        $error = '<br><div class="info">Sorry, all fields are required to log into your account. Thanks.</div><br>';
    }
    elseif(mysql_num_rows($validate_user_information) == 1) //Check if the information of the user are valid or not
    {
        //The submitted info of the user are valid therefore, grant the user access to the system by creating a valid session for this user and redirect this user to the welcome page
        $get_user_information = mysql_fetch_array($validate_user_information);
        $_SESSION["VALID_USER_ID"] = $username;
        $_SESSION["USER_FULLNAME"] = strip_tags($get_user_information["fullname"]);
        header("location: home.php");
    }
    else
    {
        //The submitted info the user are invalid therefore, display an error message on the screen to the user
        $error = '<div class="info" style="color: red; text-align: center;">You have entered an invalid username or password</div>';
        echo $error;
    }

}
?>

这是我的HTML：

body {
  background-image: url(img/hero.jpg);
  background-size: cover;
  font-family: Montserrat;
}

.logo {
  width: 400px;
  height: 200px;
  background-image: url(img/corelogo.png);
  background-size: cover;
  margin: -20px auto;
}

.login-block {
  width: 320px;
  padding: 20px;
  background: transparent;
  border-radius: 5px;
  border-top: 5px solid #011f4b;
  margin: 0 auto;
  font-family: Questrial;
}

.login-block h1 {
  text-align: center;
  color: #000;
  font-size: 18px;
  text-transform: capitalize;
  letter-spacing: 2px;
  margin-top: 0;
  margin-bottom: 20px;
}

.login-block input {
  width: 100%;
  height: 42px;
  box-sizing: border-box;
  border-radius: 5px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
  font-size: 14px;
  font-family: Questrial;
  letter-spacing: 2px;
  padding: 0 20px 0 50px;
  outline: none;
}

.login-block input#username {
  background: #fff url('http://i.imgur.com/u0XmBmv.png') 20px top no-repeat;
  background-size: 16px 80px;
}

.login-block input#username:focus {
  background: #fff url('http://i.imgur.com/u0XmBmv.png') 20px bottom no-repeat;
  background-size: 16px 80px;
}

.login-block input#password {
  background: #fff url('http://i.imgur.com/Qf83FTt.png') 20px top no-repeat;
  background-size: 16px 80px;
}

.login-block input#password:focus {
  background: #fff url('http://i.imgur.com/Qf83FTt.png') 20px bottom no-repeat;
  background-size: 16px 80px;
}

.login-block input:active,
.login-block input:focus {
  border: 1px solid #011f4b;
}

.login-block button {
  width: 100%;
  height: 40px;
  background: #011f4b;
  box-sizing: border-box;
  border-radius: 5px;
  border: 0px solid #1293e1;
  color: #fff;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 14px;
  font-family: Questrial;
  letter-spacing: 2px;
  outline: none;
  cursor: pointer;
  margin-bottom: 10px;
}

.login-block button:hover {
  background: #1293e1;
}

<link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


<center>
  <div style="font-family:Questrial, sans-serif; font-size:24px;"></div><br clear="all" /><br clear="all" />


  <!-- Code Begins -->

  <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
  <div class="logo"></div>
  <div class="login-block">
    <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
      <h1>Employee Login</h1>
      <input type="text" value="" placeholder="Username" id="username" name="username" required />
      <input type="password" value="" placeholder="Password" id="password" name="passwd" required />
      <input type="hidden" name="submitted" id="submitted" value="yes">
      <button type="submit" name="submit" class="btn btn-primary btn-block btn-large">Login</button>
    </form>
    <a href="index.php"><button>Back</button></a>
  </div>

  <!-- Code Ends -->

Answer 1

基本上试试这个：

.info {position: absolute; }

Answer 2

首先删除代码中的echo $error：

 $error = '<div class="info" style="color: red; text-align: center;">You have entered an invalid username or password</div>';
    //echo $error;

第2步将此代码添加到html

中的表单标记的顶部

<?php
if(isset($error) && isset($_POST['submit'])){

echo $error;

}

?>

<?php
/*********************************************************************
* This script has been released with the aim that it will be useful.
* Written by Vasplus Programming Blog
* Website: www.vasplus.info
* Email: info@vasplus.info
* All Copy Rights Reserved by Vasplus Programming Blog
***********************************************************************/
session_start();
ob_start();

//Include the database connection file
include "database_connection.php";

//Check to see if the submit button has been clicked to process data
if(isset($_POST["submitted"]) && $_POST["submitted"] == "yes")
{
  //Variables Assignment
  $username = trim(strip_tags($_POST['username']));
  $user_password = trim(strip_tags($_POST['passwd']));


  $validate_user_information = mysql_query("select * from `signup_and_login_users_table` where `username` = '".mysql_real_escape_string($username)."' and `password` = '".mysql_real_escape_string($user_password)."'");

  //Validate against empty fields
  if($username == "" || $user_password == "")
  {
    $error = '<br><div class="info">Sorry, all fields are required to log into your account. Thanks.</div><br>';
  }
  elseif(mysql_num_rows($validate_user_information) == 1) //Check if the information of the user are valid or not
  {
    //The submitted info of the user are valid therefore, grant the user access to the system by creating a valid session for this user and redirect this user to the welcome page
    $get_user_information = mysql_fetch_array($validate_user_information);
    $_SESSION["VALID_USER_ID"] = $username;
    $_SESSION["USER_FULLNAME"] = strip_tags($get_user_information["fullname"]);
    header("location: home.php");
  }
  else
  {
    //The submitted info the user are invalid therefore, display an error message on the screen to the user
    $error = '<div class="info" style="color: red; text-align: center;">You have entered an invalid username or password</div>';
    //echo $error;
  }

}
?>


<!DOCTYPE html>
<html>
<head>

  <link rel="shortcut icon" href="img/favicon.ico" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>CORE INTRANET</title>

  <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet">
  <!-- Required header file -->
  <link href="css/style.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">




</head>
<style>

  body {
    background-image: url(img/hero.jpg);
    background-size: cover;
    font-family: Montserrat;
  }

  .logo {
    width: 400px;
    height: 200px;
    background-image: url(img/corelogo.png);
    background-size: cover;
    margin: -20px auto;
  }

  .login-block {
    width: 320px;
    padding: 20px;
    background: transparent;
    border-radius: 5px;
    border-top: 5px solid #011f4b;
    margin: 0 auto;
    font-family: Questrial;
  }

  .login-block h1 {
    text-align: center;
    color: #000;
    font-size: 18px;
    text-transform: capitalize;
    letter-spacing: 2px;
    margin-top: 0;
    margin-bottom: 20px;
  }

  .login-block input {
    width: 100%;
    height: 42px;
    box-sizing: border-box;
    border-radius: 5px;
    border: 1px solid #ccc;
    margin-bottom: 20px;
    font-size: 14px;
    font-family: Questrial;
    letter-spacing: 2px;
    padding: 0 20px 0 50px;
    outline: none;
  }

  .login-block input#username {
    background: #fff url('http://i.imgur.com/u0XmBmv.png') 20px top no-repeat;
    background-size: 16px 80px;
  }

  .login-block input#username:focus {
    background: #fff url('http://i.imgur.com/u0XmBmv.png') 20px bottom no-repeat;
    background-size: 16px 80px;
  }

  .login-block input#password {
    background: #fff url('http://i.imgur.com/Qf83FTt.png') 20px top no-repeat;
    background-size: 16px 80px;
  }

  .login-block input#password:focus {
    background: #fff url('http://i.imgur.com/Qf83FTt.png') 20px bottom no-repeat;
    background-size: 16px 80px;
  }

  .login-block input:active, .login-block input:focus {
    border: 1px solid #011f4b;
  }

  .login-block button {
    width: 100%;
    height: 40px;
    background: #011f4b;
    box-sizing: border-box;
    border-radius: 5px;
    border: 0px solid #1293e1;
    color: #fff;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 14px;
    font-family: Questrial;
    letter-spacing: 2px;
    outline: none;
    cursor: pointer;
    margin-bottom: 10px;
  }

  .login-block button:hover {
    background: #1293e1;
  }

</style>
<body>
<center>
<div style="font-family:Questrial, sans-serif; font-size:24px;"></div><br clear="all" /><br clear="all" />


<!-- Code Begins -->

<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<div class="logo"></div>
<div class="login-block">

<?php
if(isset($error) && isset($_POST['submit'])){

echo $error;

}

?>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
    <h1>Employee Login</h1>
    <input type="text" value="" placeholder="Username" id="username" name="username" required />
    <input type="password" value="" placeholder="Password" id="password" name="passwd" required />
  <input type="hidden" name="submitted" id="submitted" value="yes">
    <button type="submit" name="submit" class="btn btn-primary btn-block btn-large">Login</button>
</form>
  <a href="index.php"><button>Back</button></a>
</div>

<!-- Code Ends -->



</center>
</body>
</html>

定位验证错误消息

2 个答案: