Making forms easier to fill out using placeholder text


Placeholder is a HTML5 attribute that you add to input elements, it makes it easier for users to fill out your forms.

Demo view here Source on GitHub

It works for on regular input fields but also works on on password types. Of course the placeholder tag is not supported by every browser, but a great polyfill created by Amiel Martin exists which uses JavaScript to add support to unsupported browser.

Placeholder Example

You just need to add the scripts to your document:

<script src="http://blogs.msdn.com/scripts/jquery-1.5.1-vsdoc.js" type="text/javascript"></script>
<script src="html5support.js" type="text/javascript"></script>

Add a some script to initialise the library

 $(document).ready(function () {
            $.placeholder();
        });

Add some CSS to style the placeholder text

.placeholder
        {
            color: #888;
        }
Comments (2)

  1. Jim Woodford says:

    You are a Microsoft Web Developer Evangelist and it seems you are advocating the use of HTML5's Placeholder tag in my html.  Then I see the Javascript requirement come out.  Every time I use javascript / jquery all the webpages that have that code in them makes IE stop the scripts and produce a warning. I want to use plain html and css - avoiding scrips if possible.  IE doesn't seem to recognize the placeholder tag. Take a look at http://www.mtfschool.com/app.html and let me know what I'm doing wrong.

  2. Woody Woodford says:

    By the way, I've tried using id="f-name" value="First Name" etc... but it puts an actual value in that has to be erased by the user.

Skip to main content