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.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<body>
<form action="message.php" method="post" id="message_form">
<fieldset>
<input type="email" name="email" id="email" title="Email address"
maxlength="40"
placeholder="Email Address"
autocomplete="off" required />
<br />
<input type="text"
name="subject"
id="subject" title="Subject"
maxlength="60" placeholder="Subject" autocomplete="off" required />
<br />
<textarea name="message"
id="message"
title="Message"
cols="30"
rows="5"
maxlength="100"
placeholder="Message" required>
</textarea>
<br />
<input type="submit" value="Send" id="submit"/>
</fieldset>
</form>
</body>
<script>
$(document).ready(function() {
$('#message_form').html5form({
allBrowsers : true,
responseDiv : '#response',
messages: 'en',
messages: 'es',
method : 'GET',
colorOn :'#d2d2d2',
colorOff :'#000'
}
);
});
</script>
</html>
This question is related to
jquery
forms
html
textarea
placeholder
The answer is
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.
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>
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
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>
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
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
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**
<textarea placeholder="Am Default Message"></textarea>
**PlaceHolder Doesn't Appear**
<textarea placeholder="Am Default Message"> </textarea>
<textarea placeholder="Am Default Message">
</textarea>
<textarea placeholder="Am Default Message">Something</textarea>
Source: Stackoverflow.com