Add watermark to textbox and password textbox using HTML5

If you need to add a watermark on your textboxes and wish to avoid ugly Javascript implementations, HTML5 is your friend.

Simply use the placeholder attribute with any input element of type text or password, as per the examples below:

<input id=”txtUsername” type=”text” placeholder=”Type your username” />
<input id=”txtPassword” type=”password” placeholder”Type your password” /></pre>

This works like a treat!

P.S This feature is only supported by the latest HTML5 browsers (IE10, Safari, Chrome, Firefox). Older browsers still require Javascript

Happy coding…


  • Share this post on