表单页面有问题，使整个页面成为一个链接

时间：2015-12-06 02:33:47

标签： php html css

我的表单页面有一个奇怪的问题我编写了它，现在每当我尝试链接我的社交媒体网站时，最后一个网站使整个表单链接到它我尝试更改网站的CSS但它不改变任何内容，如果我将表单下方的社交媒体链接到表单和社交媒体放在同一个框中，而不管使用<p>标记将它们分开。

这是我的代码

        <!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>
    <style>

    </style>
        </head>
        <body>
          <header><img src="images/simple-logo.png" alt="Cromika Web Designs logo"</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>
               <li><a href="resume.html" class="current">Resume</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 = 'matthewc57@yahoo.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>";
            }
        }
    ?>

     <p>
     Social Media Links!
     <a href="https://www.facebook.com/"><br>
     <img src="images/FB-f-Logo__blue_29.png"> 
    <a href="https://twitter.com/">
     <img src="images/TwitterLogo.png" width="29px" height="29px"><br>
     <a href="https://www.behance.net/">
     <img src="images/PbyBehance-vertical-60px.png"><br>
     </p>
        <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>
<p>
</p>

    <footer>Created by - for  on 11/13/2015</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: 100%;
        height: auto;
        margin: 0 auto;
        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;}

2 个答案:

答案 0 :(得分：0)

此问题通常发生在之前未正确关闭的标记中。您的问题是标题中的图片：

<header><img src="images/simple-logo.png" alt="Cromika Web Designs logo"</img> </header>

应该是：

<header><img src="images/simple-logo.png" alt="Cromika Web Designs logo"/> </header>

答案 1 :(得分：0)

您有几个损坏的链接，因为您必须忘记在</a>周围添加<img>以关闭链接。

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 = "";
  }
}
@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: 100%;
  height: auto;
  margin: 0 auto;
  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;
}
<title>Cromika Web Designs - Contact</title>

<body>
  <header>
    <img src="images/simple-logo.png">
  </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>
      <li><a href="resume.html" class="current">Resume</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='matthewc57@yahoo.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>"; } } ?>

  <p>
    Social Media Links!
    <a href="https://www.facebook.com/">
      <br>
      <img src="images/FB-f-Logo__blue_29.png">
      <a href="https://twitter.com/">
        <img src="images/TwitterLogo.png" width="29px" height="29px">
      </a>
      <br>
      <a href="https://www.behance.net/">
        <img src="images/PbyBehance-vertical-60px.png">
      </a>
  </p>
  <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>Created byfor MDD461 on 11/13/2015</footer>
</body>

相关问题
最新问题