Question

我需要一些帮助，在提交后在同一页面上显示错误消息。此时，提交后，它会从页面清除表单，然后在表单的位置显示任何内容。

PHP：

<?php
    $login_error_text="";
header('Content-type: text/html; charset=UTF-8');   
echo "<!DOCTYPE HTML>";
echo "<html>";
echo "<head>";
echo '    <link rel="stylesheet" href="t4.css">';
echo "</head>";
echo '<body>';
echo '<div class="login_form">';
echo '<p class="login_text">Please login to application</p>';
echo '  <form action="'.htmlspecialchars($_SERVER["PHP_SELF"]).'" method="post" name="auth_form">';
echo '    <input type="text" name="username" placeholder="Username" autocomplete="off">';
echo '    <input type="password" name="password" placeholder="Password" autocomplete="off">';
echo '    <p id="login_error">'.$login_error_text.'</p>';
echo '    <input type="submit" name="loginbutton" value="Login">';
echo "  </form>";
echo '</div>';

if (isset($_POST['loginbutton'])) {
    if (empty($_POST['username']) || empty($_POST['password'])) {

    echo '<div class="login_form">';
    echo     '<script>document.getElementById("login_error").style.visibility="visible";    </script>';
    $login_error_text="Empty username or password";
    echo '<p id="login_error">'.$login_error_text.'</p>';
    echo '</div>';
    }
} 
echo "</body>";
echo "</html>";
?>

CSS：

body 
{
   margin: 0px;
}

.login_form {
  float: left;
  position: absolute;
  top: 30%;
  left: 30%;
   padding: 40px;
  width: 400px;
  height: 300px;
  margin: auto;
  background-color: #efefef;
  border-radius: 5px;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 1);
  overflow: hidden;
}

.login_text {
   position: relative;re
   text-align: center;
    color: black;
    font-size: xx-large;
    font-weight: bold;
}

.login_form input[type=text] {
   position: relative;
  height: 45px;
  font-size: 16px;
  width: 100%;
  margin-bottom: 10px;
   background: #fff;
  border: 1px solid #d5d5d5;
  border-top: 1px solid #a0a0a0;
   padding: 0 8px;
  box-sizing: border-box;
}

.login_form input[type=password] {
   position: relative;
  height: 45px;
  font-size: 16px;
  width: 100%;
  margin-bottom: 10px;
   background: #fff;
  border: 1px solid #d5d5d5;
  border-top: 1px solid #a0a0a0;
  padding: 0 8px;
  box-sizing: border-box;
}

.login_form #login_error  {
   position: relative;
   font-size: 16px;
   visibility: hidden;
  height: 35px; 
 top: 140px;  
}

.login_form input[type=submit] {
  position: relative;
  width: 100%;
  color: #ffffff; 
  text-shadow: 0 1px rgba(0,0,0,0.5); 
  background-color: red;
  text-align: center;
  height: 36px;
  padding: 0 10px;
}

这是我的表单，我标记了我想要显示表单的位置：http://imgur.com/0QXuef8

但提交后，所有内容都消失了：http://imgur.com/SJVtlEu

你能帮我找一下这个问题吗？

Answer 1

所有问题仅适用于您的CSS！

您的表单因background-color: #efefef;将其删除而被删除 .login_form { css也是从visiblity hidden移除.login_form #login_error并将此{c}替换为login_form #login_error。

.login_form #login_error {
    color: red;
    font-size: 16px;
    height: 35px;
    position: relative;
    top: 212px;
    color: red;
}

看起来像这样。

希望它有所帮助！

在同一个css类

1 个答案: