Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML5 textarea placeholder not appearing

People also ask

How can I put place holder in textarea?

The placeholder attribute of the <textarea> element is used to set a placeholder text in the textarea. A placeholder is considered as a hint, like “Enter you name”, “Enter mobile number”, “Write in 100 words”, etc. Above, text is the hint you want to set for the textarea as a placeholder text.

How do I display textarea content in HTML?

Use the <textarea> tag to show a text area. The HTML <textarea> tag is used within a form to declare a textarea element - a control that allows the user to input text over multiple rows. Specifies that on page load the text area should automatically get focus.

Is textarea available in HTML5?

HTML5 introduced a few new attributes which can be used with textarea elements. Here are some of the most important: form : Associates the textarea with a form. Use the ID attribute of the form as the value for the textarea form attributes.

What is textarea placeholder in HTML?

Definition and Usage The placeholder attribute specifies a short hint that describes the expected value of a text area. The short hint is displayed in the text area before the user enters a value.


This one has always been a gotcha for me and many others. In short, the opening and closing tags for the <textarea> 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:

<textarea></textarea>

Bad:

<textarea>
</textarea>

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.


Delete all spaces and line breaks between <textarea> opening and closing </textarea> tags.

<textarea placeholder="YOUR TEXT"></textarea>  ///Correct one

<textarea placeholder="YOUR TEXT"> </textarea>  ///Bad one It's treats as a value so browser won't display the Placeholder value

<textarea placeholder="YOUR TEXT"> 
</textarea>  ///Bad one 

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


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 "<" from the closing tag. That is you need to end with ...></textarea> as in the example below:

<p><label>Comments:<br>
       <textarea id = "comments" rows = "4" cols = "36" 
            placeholder = "Enter comments here"
            class = "valid"></textarea>
    </label>
</p>

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 :

<input type="text" name="subject" value="{{ subject }}" placeholder="hello" />       <-- this is ok
<input type="text" name="subject" value" {{ subject }} " placeholder="hello" />      <-- 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.


use <textarea></textarea> instead of leaving a space between the opening and closing tags as <textarea> </textarea>