时间戳

首页 > 解决方案 > PHP 回显输出低于背景图像

html - PHP 回显输出低于背景图像

问题描述

你好，我搜索了很多，但找不到这个问题的答案。我有一个可以正常工作的 php 注册表单。唯一的问题是，在我添加背景图像后，任何未正确填写字段的错误消息甚至成功消息都会出现在背景图像的底部，因此会掉出屏幕。我无法理解为什么......我试着给 div 一个 Id 并用 CSS 格式化它，如下所示：

#regConfirm {
    text-align:center;
    top: 50%;
}

但它不会工作。我觉得我错过了什么……

<?php # DISPLAY COMPLETE REGISTRATION PAGE.

# Set page title and display header section.
$page_title = 'Register' ;
include ( 'includes/log_reg_header.html' ) ;

# Check form submitted.
if ( $_SERVER[ 'REQUEST_METHOD' ] == 'POST' )
{
  # Connect to the database.
    require ('..\connect_db.php');

  # Initialize an error array.
  $errors = array();

  # Add title
  $ti = $_POST[ 'Title' ];

  # Check for a first name.
  if ( empty( $_POST[ 'first_name' ] ) ){ 
      $errors[] = 'Enter your first name' ; }
  else
  { $fn = mysqli_real_escape_string( $dbc, trim( $_POST[ 'first_name' ] ) ) ; }

  # Check for a last name.
  if (empty( $_POST[ 'last_name' ] ) )
  { $errors[] = 'Enter your last name' ; }
  else
  { $ln = mysqli_real_escape_string( $dbc, trim( $_POST[ 'last_name' ] ) ) ; }

  # Check for the address.
  if (empty( $_POST[ 'street_address' ] ) )
  { $errors[] = 'Enter your street address' ; }
  else
  { $sa = mysqli_real_escape_string( $dbc, trim( $_POST[ 'street_address' ] ) ) ; }

  # Check for the post code.
  if (empty( $_POST[ 'post_code' ] ) )
  { $errors[] = 'Enter your post code' ; }
  else
  { $pc = mysqli_real_escape_string( $dbc, trim( $_POST[ 'post_code' ] ) ) ; }

  # Check for the State.
  if (empty( $_POST[ 'State' ] ) )
  { $errors[] = 'Enter your State' ; }
  else
  { $st = mysqli_real_escape_string( $dbc, trim( $_POST[ 'State' ] ) ) ; }

  # Check for the Country.
  if (empty( $_POST[ 'Country' ] ) )
  { $errors[] = 'Enter your Country' ; }
  else
  { $co = mysqli_real_escape_string( $dbc, trim( $_POST[ 'Country' ] ) ) ; }

  # Check for an email address:
  if ( empty( $_POST[ 'email' ] ) )
  { $errors[] = 'Enter your email address'; }
  else
  { $e = mysqli_real_escape_string( $dbc, trim( $_POST[ 'email' ] ) ) ; }

  # Insert birth date:
  $bd = $_POST[ 'birth_date' ];

  # Check for a password and matching input passwords.
  if ( !empty($_POST[ 'pass1' ] ) )
  {
    if ( $_POST[ 'pass1' ] != $_POST[ 'pass2' ] )
    { $errors[] = 'Passwords do not match' ; }
    else
    { $p = mysqli_real_escape_string( $dbc, trim( $_POST[ 'pass1' ] ) ) ; }
  }
  else { $errors[] = 'Enter your password' ; }

  # Check if email address already registered.
  if ( empty( $errors ) )
  {
    $q = "SELECT user_id FROM users WHERE email='$e'" ;
    $r = @mysqli_query ( $dbc, $q ) ;
    if ( mysqli_num_rows( $r ) != 0 ) $errors[] = 'Email address already registered. <a href="login.php">Login</a>' ;
  }

  # On success register user inserting into 'users' database table.
  if ( empty( $errors ) ) 
  {
    $q = "INSERT INTO users (Title, first_name, last_name, street_address, post_code, State, Country, email, birth_date, pass, reg_date) VALUES ('$ti', '$fn', '$ln', '$sa', '$pc', '$st', '$co', '$e', '$bd', SHA1('$p'), NOW() )";
    $r = @mysqli_query ( $dbc, $q ) ;
    if ($r){ ?> 
        <section id="regConfirm"><h2>Registered!</h2><p>You can now <a href="login.php">Login</a></p></section>
    <?php ; }
    # Close database connection.
    mysqli_close($dbc); 

    exit();
  }
  # Or report errors.
  else 
  {
    echo '<h1>Error!</h1><p id="err_msg">The following error(s) occurred:<br>' ;
    foreach ( $errors as $msg )
    { echo " - $msg<br>" ; }
    echo 'Please fill in details again.</p>';
    # Close database connection.
    mysqli_close( $dbc );
  }  
}
?>
<!-- Display body section with sticky form. -->
<div id="login"><h3 style="color:#2C1E04";>Register</h3>
<form id="loginx" action="register.php" method="POST">
    <select name="Title"> 
        <option value="Mr">Mr</option>
        <option value="Ms">Ms</option>   
    </select><br>
    <?php if (isset($_POST['Title'])) echo $_POST['Title']; ?>
    <label>First Name:</label> <input type="text" name="first_name" size="54" placeholder="First name" value="
<?php if (isset($_POST['first_name'])) echo $_POST['first_name']; ?>" required><br>
    <label>Last Name:</label> <input type="text" name="last_name" size="54" placeholder="Last name" value="
<?php if (isset($_POST['last_name'])) echo $_POST['last_name'];?>" required><br>
    <label>Birth date:</label> <input type="date" name="birth_date" value="
<?php if (isset($_POST['birth_date'])) echo $_POST['birth_date']; ?>" required><br>
    <label>Street Address:</label> <input type="text" name="street_address" size="25" placeholder="Street Address" value="
<?php if (isset($_POST['street_address'])) echo $_POST['street_address']; ?>" required> <br>
    <label>Post Code:</label> <input type="text" name="post_code" size="25" placeholder="Post Code" value="
<?php if (isset($_POST['post_code'])) echo $_POST['post_code'];?>" required><br>
    <label>State:</label> <input type="text" name="State" size="25" placeholder="State" value="
<?php if (isset($_POST['State'])) echo $_POST['State'];?>" required><br>
    <label>Country:</label> <input type="text" name="Country" size="25" placeholder="Country" value="
<?php if (isset($_POST['Country'])) echo $_POST['Country'];?>" required><br>    
    <label>Email Address:</label> <input type="email" name="email" size="54" placeholder="Enter a valid email address" value="
<?php if (isset($_POST['email'])) echo $_POST['email']; ?>" required><br><br>
    <label>Password:</label> <input type="password" name="pass1" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,15}" title="Must contain 8 to 15 characters, lowercase and uppercase letters, numbers and special characters" size="15" placeholder="Your password" value="
<?php if (isset($_POST['pass1'])) echo $_POST['pass1']; ?>" required>
    <label>Retype Password:</label> <input type="password" name="pass2" size="16" placeholder="Re-type your password" value="
<?php if (isset($_POST['pass2'])) echo $_POST['pass2']; ?>" required><br>

    <input type="submit" value="Register">
</form></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script type="text/javascript" src="js/bootstrap.min.js" charset="utf-8"></script>
</body>

</html>

标签： htmlcss

解决方案

尝试将其添加到您的 css 中：position: absolute;

推荐阅读