Example: http://www.giftsandcoupons.com/black-milk/dem-guts-swimsuit - This seems to work ok in Firefox, but in IE the placeholder text isn't visible above the submit part? Code: <input id="companyForm" class="placeholder" type="text" placeholder="Enter email" name="email" /> <input type="hidden" name="formsetID" value="150" /> <input class="form-sub" type="submit" value="Subscribe" /> Code (markup): But a site like Retailmenot solved the problem somehow with the coupon code form on the right: http://www.retailmenot.com/view/walmart.com
Browser support, IE10 only supports the new placeholder text (HTML5), to let it appear in older IE use a javascript such as this one listed, http://stackoverflow.com/questions/11296602/html-form-placeholder-not-working-in-ie-8 or https://github.com/mathiasbynens/jquery-placeholder or http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html
You are using placeholder "wrong" -- it's for example text, NOT your label. Again, "Placeholder is not a label" http://www.pardot.com/faqs/best-practices/placeholders-and-labels/ http://www.webaxe.org/placeholder-attribute-is-not-a-label/ http://www.456bereastreet.com/archi...te_is_not_a_substitute_for_the_label_element/ Or even, the SPECIFICATION ITSELF: http://www.w3.org/html/wg/drafts/html/master/forms.html#the-placeholder-attribute ... and I quote: Doesn't get much clearer than that. ... and no matter how many artsy fartsy types and scripttards try to use it as such, it just makes forms harder to use and is NOT how you should be building a form! See "false simplicity" http://baymard.com/blog/false-simplicity Get a LABEL pointing at that INPUT! If you don't have "room" for it in your arsty layout, MAKE ROOM. <form id="detailForm" method="post" action="/inc-newsletter.php"> <fieldset> <label for="companyForm">Enter E-Mail:</label> <input type="text" id="companyForm" name="email" /> <input type="hidden" name="formsetID" value="150" /> <input class="form-sub" type="submit" value="Subscribe" /> </fieldset> </form> Code (markup): Also wondering why you have a DIV around the form for nothing... DIV around your headings for nothing... You've got a lot of markup for nothing as if FORM and H3 aren't perfectly good block level containers unto themselves or something... NOT that you actually have H2 on the page for there to even BE H3 in the first place either.
Thanks guys with Label, is there a way to make it drop down in a new line - is it possible in CSS? For the DIV's around stuff, I think the div around the form is the one with the nice ribbon around it and then when it's resized it then stretches outwards, so I thought was useful. Yep you're right about h3, I'll change it soon - but I've made the changes suggested already in this thread.