php - 定位验证错误信息

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; }