80

I am using placeholders for all my form elements and it's showing up in them all apart from the textarea. Just looked at it in safari now, and have realised that my input of type="number" isn't showing the placeholder either.

The page is here and you need to click the 'book now' link at the top of the page.

My html:

<form id="booking" action="single-workshops.php">
    <input type="text" required="required" placeholder="name"/><br />
    <input type="text" required="required" placeholder="your phone number"/><br />
    <input type="email" required="required" placeholder="email"/><br />
    <input type="number" required="required" placeholder="how many in your party" /><br />
    <textarea rows="5" cols="30" placeholder="enter optional message">
    </textarea><br />
    <input type="button" value="submit"/>
</form>
Arslan Ali
  • 17,418
  • 8
  • 58
  • 76
Claire
  • 3,683
  • 13
  • 47
  • 74
  • Possible duplicate of [HTML5 textarea placeholder not appearing](http://stackoverflow.com/questions/10186913/html5-textarea-placeholder-not-appearing) – RBT May 20 '17 at 03:31

1 Answers1

202

Because you have something as text in your textarea with a linebreak in it.

<textarea rows="5" cols="30" placeholder="enter optional message">
        </textarea><br />

Should be:

<textarea rows="5" cols="30" placeholder="enter optional message"></textarea><br />
PeeHaa
  • 71,436
  • 58
  • 190
  • 262
  • 2
    Nice catch! I would never have thought of that, I'm actually surprised it works in other browsers considering that there technically is content. Adding a second line break does remove the placeholder in Firefox. – Wesley Murch May 14 '12 at 15:01
  • It doesn't work in other browsers. The number one does in chrome, not safari. Just looking for some sort of fix. – Claire May 14 '12 at 15:02
  • @Nicola: Did that fix it? I don't have Safari installed. – Wesley Murch May 14 '12 at 15:03
  • 1
    @WesleyMurch sorry I meant that it works for textarea if I remove the line break. What isn't working still is the input type="number" placeholder. – Claire May 14 '12 at 15:05
  • @peeHaa : not work proper in safari when placeholder content size long try placeholder="enter optional message with large data", placeholder shows only "enter optional message" other are hide like text overflow can you help please help me to show all data same as chrome?? – Jay Bhalodi Oct 08 '14 at 09:53
  • @radhe Not exactly sure what you mean, but it might be a limitation of safari. Could you set up a fiddle? – PeeHaa Oct 08 '14 at 13:50