I have a form which the client wants the labels inside the input box and I decided to use HTML 5's placeholder and Google's html5shiv, instead of the old javascript. My placeholders, however, don't seem to work properly in IE, which is what I was using the shiv for. Here is the code:
Doctype:
<!DOCTYPE html>
Shiv:
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->
Form:
<form method="post" enctype="multipart/form-data" name="contactForm" id="contactForm">
<input type="text" name="name" id="name" placeholder="Your Full Name..." />
<input type="text" name="telephone" id="telephone" placeholder="Your Telephone Number..." />
<input type="email" name="email" id="email" placeholder="Your Email Address..." />
<textarea name="enquiry" id="enquiry" placeholder="Your Enquiry or Comments..."></textarea>
<p class="midpadLeft green_Button_margin_2"><span class="green_Button_2"><a href="javascript: document.contactForm.submit();" target="_self" class="green_Button_2">Submit Enquiry <img src="images/mid-envelope.png" alt="Submit"/></a></span></p>
</form>
Any ideas as to why it's not working?
Revision:
Using code suggested in the comments below, I have changed my code to the following, but it is still not working.
Script including (the contents of that script was copied directly from here):
<script type="text/javascript" src="scripts/placeholders.js" charset="utf-8"></script>
DOM ready event listener:
<body onload="Placeholders.init(true);">
The HTML5 Shiv simply enables styling for previously unknown elements in IE. The most recent version does a few things extra, like patching document.createElement
, but other than that it doesn’t polyfill anything.
If you want to emulate placeholder
, use a placeholder polyfill. I’ve written one in jQuery plugin format, if you’re interested: http://mths.be/placeholder
Use it as follows:
$('input, textarea').placeholder();
Here’s a demo: http://mathiasbynens.be/demo/placeholder
Btw, you should be using <label>
instead of @placeholder
if the text is “Your Full Name” etc.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With