HTML5 textarea placeholder not appearing

Question

I cannot figure out what is wrong with my markup  but the placeholder for the text area will not appear  It seems as though it may be covered up with some blank spaces and tabs  When you focus on the text area and delete from where the cursor puts itself  then leave the text area  the proper placeholder then appears    lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 01  EN   http   www w3 org TR html4 strict dtd  gt    lt html gt       lt head gt       lt  head gt        lt body gt        lt form action  message php  method  post  id  message form  gt           lt fieldset gt                lt input type  email  name  email  id  email  title  Email address                  maxlength  40                  placeholder  Email Address                   autocomplete  off  required   gt               lt br   gt               lt input type  text                   name  subject                   id  subject  title  Subject                  maxlength  60  placeholder  Subject  autocomplete  off  required   gt               lt br   gt               lt textarea name  message                   id  message                   title  Message                   cols  30                   rows  5                   maxlength  100                   placeholder  Message  required gt               lt  textarea gt               lt br   gt               lt input type  submit  value  Send  id  submit   gt            lt  fieldset gt       lt  form gt   lt  body gt    lt script gt     document  ready function                     message form   html5form           allBrowsers   true          responseDiv     response           messages   en           messages   es           method    GET           colorOn    d2d2d2           colorOff    000                 lt  script gt    lt  html gt

User · Answer

Well  technically it does not have to be on the same line as long as there is no character between the ending     from start tag and the starting   lt   from the closing tag   That is you need to end with      gt  lt  textarea gt  as in the example below    lt p gt  lt label gt Comments  lt br gt          lt textarea id    comments  rows    4  cols    36               placeholder    Enter comments here              class    valid  gt  lt  textarea gt       lt  label gt   lt  p gt

User · Answer

Between the opening and closing tag in our case textarea tag shouldn t be space or newline character or any text value    If there s space  newline character or any text  it s considered as value which overrides placeholder         PlaceHolder Appears        lt textarea placeholder  Am Default Message  gt  lt  textarea gt         PlaceHolder Doesn t Appear         lt textarea placeholder  Am Default Message  gt    lt  textarea gt      lt textarea placeholder  Am Default Message  gt       lt  textarea gt      lt textarea placeholder  Am Default Message  gt Something lt  textarea gt

User · Answer

use  lt textarea gt  lt  textarea gt  instead of leaving a space between the opening and closing tags as  lt textarea gt   lt  textarea gt

User · Answer

I had the same issue  only using a  pug file  similar to  jade   I realized that it was also a space issue  following the end of my closing parentheses  In my example  you need to highlight the text after  placeholder  YOUR MESSAGE   to see    BEFORE   form form-horizontal method  POST      form-group     textarea form-control placeholder  YOUR MESSAGE       form-group       button btn btn-primary type  submit   SUBMIT   AFTER   form form-horizontal method  POST      form-group     textarea form-control placeholder  YOUR MESSAGE      form-group       button btn btn-primary type  submit   SUBMIT

User · Answer

Delete all spaces and line breaks between  lt textarea gt  opening and closing  lt  textarea gt  tags     lt textarea placeholder  YOUR TEXT  gt  lt  textarea gt      Correct one   lt textarea placeholder  YOUR TEXT  gt   lt  textarea gt      Bad one It s treats as a value so browser won t display the Placeholder value   lt textarea placeholder  YOUR TEXT  gt    lt  textarea gt      Bad one

User · Answer

its because there is a space somewhere  I was using jsfiddle and there was a space after the  tag  After I deleted the space it started working

User · Answer

This one has always been a gotcha for me and many others   In short  the opening and closing tags for the  lt textarea gt  element must be on the same line  otherwise a newline character occupies it   The placeholder will therefore not be displayed since the input area contains content  a newline character is  technically  valid content   Good   lt textarea gt  lt  textarea gt   Bad   lt textarea gt   lt  textarea gt   Update  2020  This is not true anymore  according to the HTML5 parsing spec  If the next token is a U 000A LINE FEED  LF  character token   then ignore that token and move on to the next one   Newlines  at the start of textarea elements are ignored as an authoring  convenience    You might still have trouble if you editor insists on ending lines with CRLF  though

User · Answer

So  the question now is how do we prefill the textarea element   XYZ  you ll get   The main problem is that in the textarea element we re unintentionally prefilling the element by white space

User · Answer

I know this post has been  very well  answered by  Aquarelle but just in case somebody is having this issue with other tag forms with no text such as inputs i ll leave this here   If you have an input in your form and placeholder is not showing because a white space at the beginning  this may be caused for you  value  attribute  In case you are using variables to fill the value of an input check that there are no white spaces between the commas and the variables    example using twig for php framework symfony     lt input type  text  name  subject  value     subject     placeholder  hello    gt         lt -- this is ok  lt input type  text  name  subject  value     subject      placeholder  hello    gt        lt -- this will not show placeholder    In this case the tag between       is the variable  just make sure you are not leaving spaces between the commas because white space is also a valid character

[jquery] HTML5 textarea placeholder not appearing

Examples related to jquery

Examples related to forms

Examples related to html

Examples related to textarea

Examples related to placeholder