HTML 5 tag reference: How to display a hint or watermark in the textbox using HTML


In this article, I will show how you can display a hint, that look like a watermark in a textbox using simple html in HTML5.

Have you seen some of the websites displaying a watermark or a hint in a textbox in some of the websites? Such hints are useful to provide certain hints and tips to users regarding what kind of data to be entered in the specific textbox.

When you click on the textbox, the watermark will disappear. The watermark will appear again if you move out of the box without entering any text.

Here is a simple example of watermark in a textbox:




If you don't see a watermark in the textbox above, your browser does not support the specific tag in HTML5. You may want to try another browser. (I have tested and verified that this works in Google Chrome).

There was no support for such watermarks in HTML until HTML5. In prior versions, the same was achieved by CSS and Javascript.

HTML5 makes it very easy to display a hint in a textbox or textarea control as shown above.

Here is the HTML5 code for the sample shown above to display watermark/hint in the web page:

<input type="text" placeholder="Enter your name...">

The attribute "Placeholder" is used to specify the hint for the textbox.

I tested and confirmed that the following browsers support the Placeholder attribute:

  • Google Chrome

  • FireFox

  • Safari


  • I could not make it work on IE 9 and Opera. Looks like we may have to wait a while until those browsers extend support for the Placeholder attribute to display watermark in the textboxes.

    The placeholder attribute will work for the following controls in HTML:

    TEXTBOX
    TEXTAREA


    If you find any other controls supporting the "Placeholder" tag, please let me know by posting a response below.


    Article by Tony John
    Tony John is a professional blogger from India, who started his first Weblog in 1998 at Tripod.com. Tony switched to blogging as a passion blended business in the year 2000 and currently operates several popular web properties including IndiaStudyChannel.com, Techulator.com, dotnetspider.com and many more.

    Follow Tony John or read 638 articles authored by Tony John

    Related Articles

    HTML5 Form elements tutorial for HTML tags

    Are you searching a tutorial which gives you complete description about HTML5. Here in this tutorial of HTML5 you will read about the form elements generally used in webpages and their validation through HTML5.

    More articles: HTML 5 Tutorials HTML 5

    Comments

    Author: Nisam Nsm27 Feb 2017 Member Level: Bronze   Points : 0

    The method for doing this thing is just use the 'placeholder' attribute. See the image attached with:



  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: