HTML5 Form & Validation

kyhryt · 03-03-2013, 07:47 PM

I'm having trouble with my contact form not working properly.
The form won't email me.

I'm also trying to validate this page, but keep receiving the following error message: "The for attribute of the label element must refer to a form control."

Any help/suggestions?
Thanks.

Contact HTML Page below

Code:

<!DOCTYPE html>
<html lang="en">

<!-- Head Begins --> <head>

<!--[if lt IE 9]>
<script src="adjustForIE.js">
</script>
<![endif]-->

<meta charset="UTF-8">
<meta name="keywords" content="Architecture,London,Modern">
<meta name="description" content="The background of Modern Architecture in London">
<meta name="author" content="Kyhry Taylor">
<title>London's Modern Architecture Introduction</title>
<link rel="stylesheet" href="IMD110.css">
</head> <!-- Head Ends -->

<body>

<!-- Header Begins --> <header>
<div id="logo">
<a href="index.htm">
<img src="MAL_Logo.png" alt=" Modern London Architecture" />
</a>
</div>
</header> <!-- Header Ends -->

<div id="greybar"> </div>

<!-- Wrapper Begins --><div id="wrapper"> 

<!-- Nav Begins --> <nav>
<a href="index.htm">introduction</a>
<a href="buildings.html">buildings</a>
<a href="contactIMD.html">contact</a>
<a href="reply.html">reply</a>
<a href="sources.html">sources</a>
<a href="architects.html">architects</a>
<a href="exhibitions.html">exhibitions</a>
</nav> <!-- Nav Ends -->


<section id="contactbody" class="fontcolor">

             <h1>We'd love to hear from you</h1>

<!-- Contact Form Begins -->

    
    
    <form class="contact_form" action="a-comments.php" method="post" id="comments">


<br>
      
<label for="name" class="fontcolor">Your Name*</label>
<br><br>

<input type="text" placeholder="John Doe" required />
<br><br>

<label for="email" class="fontcolor">Your Email Address*</label> 
<br><br>

<input type="email" name="email" placeholder="john_doe@example.com" required />
<br> <br>
            
<label for="subject" class="fontcolor">Subject*</label>  
<br><br>

<input type="text"  placeholder="John Doe" required />
<br> <br>
 
<label for="message" class="fontcolor">Message*</label>
<br><br>

<textarea name="message" cols="60" rows="15" required ></textarea>
<br><br>
            
<label for="antispam" class="fontcolor">Anti-Spam (14 + 6)*</label>
<br><br>

<input type="text"  placeholder="14+6" required />
<br><br>

<button class="submit" type="submit">Send</button> 


  
</form><!-- Contact Form Ends -->
  
</section> 

<!-- Aside Begins --><aside id="rightmap">

<img src="QuestionsGraphics.png" alt=" Questions or Concerns" />

</aside> <!-- Aside Ends -->

</div><!-- Wrapper Ends -->

<!-- Footer Begins --><footer>

<div class="clearFloat"> </div>

&copy; 2013 Kyhry Taylor

</footer><!-- Footer Ends -->

</body>

</html>

a-comments php code

Code:

<?php
    $name = $_POST['name'];
    $email = $_POST['email'];
    $comments= $_POST['comments'];
	$headers = "From: $email \r\n";
  	$to = 'kyhry.taylor@gmail.com'; 
    $subject = 'IMD110 - Form';
    $addition = $_POST['addition'];
			
    $body = "From: $name\n E-Mail: $email\n Comments:\n $comments";
			
 if ($_POST['submit'] && $addition == '20') {				 
        if (mail ($to, $subject, $body, $headers)) { 
	   header( "Location:a-commentsReply.php" );
	
	} else { 
	    echo '<p>Something is incorrect, hit the back button and try again!</p>'; 
	} 
    } else if ($_POST['submit'] && $addition!= '20') {
	echo '<p>You answered the anti-spam question incorrectly hit the back button and try again!</p>';
    }
?>

felgall · 03-03-2013, 09:31 PM

You left out the id attributes in the input and textarea fields that the for attributes in the label tags are referring to.

Code:

<label for="name" class="fontcolor">Your Name*</label>
<br><br>

<input type="text" id="name" placeholder="John Doe" required />
<br><br>

kyhryt · 03-04-2013, 02:24 AM

felgall,

Thank you very much!