Blueprint by Tiny
Return to Tiny.cloud
Return to Tiny.cloudTry TinyMCE for Free
Search by

How to add placeholder text to a textarea

Ben Long

May 5th, 2021

Written by

Ben Long

Category

How-tos & Tutorials

Placeholder text is text that is positioned inside a textarea or input field as a means of prompting users to provide information. It is commonly used in online applications to reduce clutter and provide a cleaner interface for users.

For example, placeholder text is sometimes used as...

A label:

Placeholder text saying

A prompt:

Placeholder text saying

Or to show an example of the expected input:

Placeholder text suggesting a mobile number

Before jumping straight in and using placeholder text, there are a few things to look out for. Some designers like to use placeholder text exclusively (with no other labeling text), as it can create a cleaner look. But disappearing placeholder text (especially when it disappears as soon as the user clicks inside the field to start typing) can lead to confusion if there’s nothing else labeling your fields. There are also concerns around accessibility requirements such as color contrast, and how sometimes the user has to delete the placeholder text before they type, which can be really annoying.

Fortunately, with the solutions we’re proposing in this article, the placeholder text remains until the user starts entering text, and the color contrast is AA compliant against Web Content Accessibility Guidelines 2.0.

Add placeholder text to a textarea

You can add placeholder text to a textarea by using the HTML placeholder attribute; for example:

<textarea placeholder="Describe yourself here..."></textarea>

The above HTML code renders the following textarea:

Text area saying

Using placeholder text with our rich text editor

If you’re building an application that requires users to enter text, you’ll most likely be taking advantage of a rich text editor like TinyMCE. TinyMCE is used as the text entry component in over 100M+ products worldwide. It’s trusted by millions of developers who are creating the next generation of productivity and collaboration applications - check out examples of 9 products you can build with TinyMCE.

Get started with TinyMCE

Create a file with the following HTML and open it in a web browser, replacing no-api-key with your own Tiny API Key. (If you don’t yet have one, you can get a free API Key now.)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
    <script>
      tinymce.init({
        selector: "textarea"
      });
    </script>
  </head>
  <body>
      <textarea></textarea>
  </body>
</html>

Open the HTML file in a browser, and the editor will be initialized on the page:

TinyMCE with the default configuration.

NOTE: You will be presented with a warning notification - This domain is not registered with Tiny Cloud - if you are running TinyMCE on your local machine outside of a web server, or if the domain on which you’re running TinyMCE is not registered against your account. To remove the notification, open it on localhost (which is already an approved domain by default), or register your domain as an approved domain in your account.

Add placeholder text to TinyMCE

To add placeholder text, add the placeholder option to the TinyMCE initialization script along with the text you want to display. For example:

tinymce.init({
  selector: "textarea",
  placeholder: "Ask a question or post an update...",
});

Live example

Here’s an example on CodePen with additional customizations made to the editor. Click in the box to get started.

What’s next?

Speaking of customization…check out these blog posts for more information about configuring TinyMCE to enhance the overall UX of your apps:

placeholder text UX
byBen Long

Computer scientist, storyteller, teacher, and an advocate of TinyMCE. Reminisces about programming on the MicroBee. Writes picture books for kids. Also the wearer of rad shoes. “Science isn’t finished until you share the story.”

Related Articles

  • How-tos & Tutorials

    Is your domain registered with Tiny Cloud?

    by Joe Robinson in How-tos & Tutorials
Subscribe for the latest insights served straight to your inbox every month.

Deploy TinyMCE in just 6 lines of code

Built to scale. Developed in open source. Designed to innovate.

Begin with your FREE API Key
Tiny Editor
Tiny logo
Privacy Policy - Terms of Use© 2021 Tiny Technologies Inc.TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.

Products

  • TinyMCE
  • Tiny Drive
  • Customer Stories
  • Pricing