douhuibo5635
2015-12-05 06:18
浏览 160
已采纳

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

I have a small problem with my website's contact page. Whenever I use php for the form another large box appears above the form as if there was a additional set of <p> tags there; I am not sure why this keeps happening.
Here is the code.

Update: I have removed the box problem but now I have to figure out the css to change so that the form fits in with the rest of the webpage, and auto; doesn't work.

<!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('
') > 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> 

And here is the CSS for the site

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

Any help is appreciated!

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • duanjumie8753 2015-12-05 06:36
    已采纳

    Try removing the <p> and </p> from around the table you use for your form. While on my test system this didn't put an actual box, it certainly pushed the form part well down the page.

    FYI, I used Google Chrome and right click and select Inspect Element and it's showed up quite quickly.

    打赏 评论

相关推荐 更多相似问题