我不知道我的标记出了什么问题,但是文本区域的占位符不会出现。它似乎可以用一些空白和制表符来掩盖。当您将焦点放在文本区域并从光标放置的位置删除,然后离开文本区域时,合适的占位符就会出现。

<!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>

当前回答

从技术上讲,它不必在同一行上,只要开始标记的结尾“>”和结束标记的开头“<”之间没有字符。这就是你的结尾 ...></textarea>,示例如下:

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

其他回答

我也遇到了同样的问题,只是使用了.pug文件(类似于.jade)。我意识到这也是一个空格问题,在我的右括号后面。在我的例子中,你需要高亮后面的文本(占位符="YOUR MESSAGE")来查看:

之前:

form.form-horizontal(method='POST')
  .form-group
    textarea.form-control(placeholder="YOUR MESSAGE") 
  .form-group  
    button.btn.btn-primary(type='submit') SUBMIT

后:

form.form-horizontal(method='POST')
  .form-group
    textarea.form-control(placeholder="YOUR MESSAGE")
  .form-group  
    button.btn.btn-primary(type='submit') SUBMIT

在我们的例子中,在开始和结束标签之间的textarea标签不应该是空格或换行符或任何文本(值)。

如果有空格,换行符或任何文本,它被认为是覆盖占位符的值。

    **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>

使用<textarea></textarea>而不是在开始和结束标签之间留下一个空格,如<textarea> textarea > < /

这一点一直困扰着我和很多人。简而言之,<textarea>元素的开始和结束标记必须在同一行上,否则换行符将占用它。占位符因此不会显示,因为输入区域包含内容(从技术上讲,换行符是有效的内容)。

好:

<textarea></textarea>

Bad:

<textarea>
</textarea>

更新(2020)

根据HTML5解析规范,这不再是正确的:

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.)

但是,如果编辑坚持用CRLF结束行,您可能仍然会遇到麻烦。

这是因为在某个地方有一个空间。我使用的是jsfiddle,标签后面有一个空格。在我删除空间后,它开始工作