Question

我的网站联系页面有一个小问题。每当我在表单上使用php时，表单上方会出现另一个大框，就好像那里有一组<p>标签;我不确定为什么会这种情况继续发生这是代码。

更新：我已经删除了盒子问题，但现在我必须弄清楚要更改的css，以便表单适合网页的其余部分，并自动;不起作用。

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>Cromika Web Designs - Contact</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script type="text/javascript">
function checkForm() {
    var theName = document.getElementById('name').value;
    var theEmail = document.getElementById('email').value;
    var theMessage = document.getElementById('message');
    var emailerr = document.getElementById('emailspan');
    var nameerr = document.getElementById('namespan');
    var messageerr = document.getElementById('messagespan');
    var message;
    var myregex = /\S+@\S+\.\S+/;
    if(theName==""){
        message = 'Name is required;';
        document.form1.name.focus();
        nameerr.innerHTML = message;
        return false;
    } else{
        nameerr.innerHTML ="";
    }
    if(theEmail=="") {
        message = 'Email is required;';
        document.form1.email.focus();
        emailerr.innerHTML = message;
        return false;
    } else if (!myregex.test(theEmail)){
        emailerr.innerHTML = "Your email entry is invalid;";
        document.form1.email.focus();
        return false;
    } else {
        emailer.innerHTML ="";
    }
    if(theMessage.value=="" || theMessage.value ==null || theMessage.value.indexOf('\n') > 0) {
        message = 'Please enter your message;';
        document.form1.message.focus();
        messageerr.innerHTML = message;
        return false;
    } else {
        messageerr.innerHTML = "";
    }
}
</script>

    </head>
    <body>
      <header><img src="images/simple-logo.png" alt=""</img> </header>
      <nav>
         <ul>
           <li><a href="index.html" class="current">Home</a></li>
           <li><a href="about.html" class="current">About</a></li>
           <li><a href="contact.php" class="current">Contact</a></li>
           <li><a href="gallery.html" class="current">Gallery</a></li>
         </ul>
      </nav>
     <h1> Contact me!</h1>
<?php
    if(isset($_POST['send_email'])){
        // collect the form values
        $name = $_POST['name'];
        $email = $_POST['email'];
        $message = $_POST['message'];
        // set the email properties
        $to = 'email@email.com';
        $subject = "Contact Form Submission";
        $from = $email;
        $headers = "From: $from";
        // attempt to send the mail, catch errors if they occur
        try {
            mail($to, $subject, $message, $headers);
            $msg = "<strong>Your mail was sent successfully!</strong>";
        } catch(Exception $e) {
            $msg = "An Exception was thrown: ".$e -> getMessage()."<br>";
        }
    }
?>

    <table align="left">
    <form name="form1" method="post" action="<?php $_SERVER['PHP_SELF']?>" onSubmit="return checkForm()">
    <tr><th>Name:</th>
        <td><input type="text" name="name" id="name" /><br><span style="color:red;" id="namespan"></span>
        </td>
    </tr>
    <tr><th>Email:</th>
        <td><input type="text" name="email" id="email" /><br><span style="color:red;" id="emailspan"></span>
        </td>
    </tr>
    <tr><th>Message:</th>
        <td><textarea name="message" id="message"></textarea><br><span style="color:red;" id="messagespan"></span>
        </td>
    </tr>
    <tr><td></td><td><input type="submit" name="send_email" value="Send Email Message" /></td></tr>
    </form>
    </table>


    <footer></footer>
   </body>

</html>

这是网站的CSS

    @charset "UTF-8";
    /* CSS Document */

    body{
        font-size:16px;
        cursor:default;
        font-family:Georgia, serif;
        background-color:#000000;
        color: white;
        }


    header {
            border-radius: 5px;
            text-align: center;
            margin-top: 12px;
            height: 71px;
        }
    nav { 
            border-radius: 5px;
            height: 20px;
            width: auto;
            display: block;
            text-align:center;
            padding-right: 35px;
            color: #ffffff;
            font-weight:bold;
            background-color:#8000aa;
            padding-top: .05px;
            padding-bottom: 20px;
            margin-top: 12px;
            margin-bottom: 12px;}

    nav li { 
            display: inline;
            float: center;
            }

    nav a {

        display: block, inline;
        width: 60px;

    }
    /*link styles*/
    a:link {
        text-decoration: none;

    }

    a:visited {
        text-decoration: underline;
        color: white;
    }

    a:hover {
        text-decoration: underline;
        color: blue;
    }

    a:active {
        text-decoration: underline;
    }
    /* end link styles */

    /* main content */

    h1 {
            border-radius: 5px;
            width: auto;
            margin: 0 auto;
            text-align: center;
            margin-bottom: 12px;
            background-color: #8000aa;}
    table {
        border-radius: 5px;
        width: 36px;
        height: 150px;
        margin: 0 auto;
        text-align: center;
        padding-top:12px;
        padding-bottom:12px;
        margin-bottom: 12px;
        background-color: #8000aa;
}
    p {
            border-radius: 5px;
            width: auto;
            height: auto;
            margin: 0 auto;
            text-align: center;
            padding-top:12px;
            padding-bottom:12px;
            margin-bottom: 12px;
            background-color: #8000aa;}

    p a {
        font-weight: bold;
        }

    /* end main content*/

    footer {
            border-radius: 5px;
            clear: both;
            text-align: center;
            padding-top:12px; 
            padding-bottom:12px;
            margin-bottom: 12px;
            font-weight:bold;
        background-color:#8000aa;}

感谢任何帮助！

Answer 1

尝试从您用于表单的表格周围删除<p>和</p>。在我的测试系统上，这并没有放置一个真正的盒子，它肯定会将页面部分推到页面下方。

仅供参考，我使用谷歌浏览器并右键单击并选择Inspect Element，它很快就出现了。

一个大盒子一直出现在表格上方

1 个答案: