HTML5 textarea placeholder not appearing

Here, we are going to learn how to fix the issue "HTML5 textarea placeholder not appearing"?
Submitted by Pratishtha Saxena, on June 26, 2022

The HyperText Markup Language or HTML is the standard markup language for designing web pages to be displayed on web browsers. It is combined with technologies like Cascading Style Sheets (CSS) and scripting languages such as JavaScript.

What is a placeholder?

A placeholder is a small text that is specified in the input field in any form or textarea. It gives an idea to the user about the input field. It is visible only when the user does not click on the input field or starts typing. As soon as the user starts entering the text in the input field, the placeholder disappears. A placeholder is an attribute that can be specified in the <input> tag.

Syntax:

<textarea placeholder="text">

Now, an issue occurs when we apply a placeholder to a textarea. Sometimes even after specifying the placeholder, it is not visible. This can be because of a very simple writing format issue while writing or creating the input field.

Always make sure that the tag <textarea> </textarea> opens and closes on the same line. This may sound ridiculous as HTML doesn't get affected by indentation or something like this, but this is the only reason why the placeholder may not be visible even after specifying it.

Let's see an example of this,

Example 1:

HTML Code:

<!DOCTYPE html>

<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   </head>
   <body>
      <center>
         <h2 class="heading">Fill following Form</h2>
         <form class="myForm">
            <fieldset>
               <input type="email" id="email" title="Email address"
                  maxlength="40"
                  placeholder="Enter Email Address" required />
               <br /><br>
               <input type="text"
                  id="name" title="Name"
                  maxlength="60" placeholder="Enter Name" required />
               <br /><br>
               <textarea id="message" 
                  title="Message" 
                  cols="30" 
                  rows="5" 
                  maxlength="100" 
                  placeholder="Enter Message" 
                  required>
               </textarea>
               <br /><br>
               <input type="submit" id="submit"/>
            </fieldset>
         </form>
      </center>
   </body>
</html>

jQuery Function:

<script>
$(document).ready(function() {
    $(document).ready(function() {
        $(".heading").css(
            "background-color", "lightgrey");
        $(".myForm").css(
            "background-color", "skyblue");

    });
});
</script>

Output:

Example 2:

HTML Code:

<!DOCTYPE html>

<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   </head>
   <body>
      <center>
         <h2 class="heading">Fill following Form</h2>
         <form class="myForm">
            <fieldset>
               <input type="email" id="email" title="Email address"
                  maxlength="40"
                  placeholder="Enter Email Address" required />
               <br /><br>
               <input type="text"
                  id="name" title="Name"
                  maxlength="60" placeholder="Enter Name" required />
               <br /><br>
               <textarea id="message" title="Message" cols="30" rows="5" maxlength="100" placeholder="Enter Message" required></textarea>
               <br /><br>
               <input type="submit" id="submit"/>
            </fieldset>
         </form>
      </center>
   </body>
</html>

jQuery Function:

<script>
$(document).ready(function() {
    $(document).ready(function() {
        $(".heading").css(
            "background-color", "lightgrey");
        $(".myForm").css(
            "background-color", "skyblue");

    });
});
</script>

Output: