One of the nice enhancement in HTML5 web form is being able to add placeholder text to input fields. Placeholder attribute allows you to display text in a form input when it is empty and when it is not focused (it clears the field on focus). This is a nifty feature, but it is not supported by all browsers yet. This tutorial will show you how to use Modernizr to detect if placeholder is supported, or else use jQuery to display the fallback placeholder text dynamically.

Demo HTML5 Placeholder

Download Demo Zip

Old School Javascript Way

Before we had the placeholder attribute, we relied on Javascript to fake the placeholder text. Below is an example. The text is inserted in the value attribute. On focus, it checks if the value is "search" and returns empty to clear the field. If the value is empty, it returns "search." As you can see, this way is not an efficient way because each field has to be checked.

<input type="text" value="Search" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}">

jQuery Placeholder Text (Demo)

Now with HTML5 placeholder, it is more semantic to use placeholder than value attribute. However, placeholder text is not supported by all browsers. To make it cross-browser, Modernizr and jQuery come in handy here.

Modernizr is used here to check if placeholder is supported. If placeholder is not supported, the jQuery code will run. It finds all elements with placeholder attribute and stores in a variable. It then compares the input value with the placeholder attribute. If the input value is empty, it will display the placeholder text and add a "placeholder" class to the input field. View Demo.

To use this on your site, download a copy of Modernizr and jQuery and paste the following code any where in your html page (be sure the jquery.js and modernizr.js file is in correct path).

<script src="jquery.js"></script>
<script src="modernizr.js"></script>

<script>
$(document).ready(function(){

if(!Modernizr.input.placeholder){

	$('[placeholder]').focus(function() {
	  var input = $(this);
	  if (input.val() == input.attr('placeholder')) {
		input.val('');
		input.removeClass('placeholder');
	  }
	}).blur(function() {
	  var input = $(this);
	  if (input.val() == '' || input.val() == input.attr('placeholder')) {
		input.addClass('placeholder');
		input.val(input.attr('placeholder'));
	  }
	}).blur();
	$('[placeholder]').parents('form').submit(function() {
	  $(this).find('[placeholder]').each(function() {
		var input = $(this);
		if (input.val() == input.attr('placeholder')) {
		  input.val('');
		}
	  })
	});

}

</script>

Remove Webkit Search Input Styles

Webkit browsers add extra styling to the search input field. To remove them, add the following CSS code:

input[type=search] {
-webkit-appearance: none;
} input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { display: none; }
webkit search input

Credit

The jQuery code is found at Nico Hagenburger.

109 Comments

Dave Sparks
Mar 28, 2011 at 11:29 am

I posted something similar a while ago on my own blog
http://www.kamikazemusic.com/quick-tips/jquery-html5-placeholder-fix/

There were concerns raised in the comments about the accessibility of injecting text into the val attribute, personally I think used sensibly and as long as the text is injected with JavaScript then it should be fine, maybe some readers here have a different view?

René
Mar 28, 2011 at 11:34 am

I read your post Dave, but I think it’s fine to use it. Only thing I could think of is if you don’t have a seperate label, an older browser, and no Javascript enabled. You don’t see any hints about the field. But hey, who doesn’t have Javascript these days.
But I think it’s just great to use this new feature.

KF
Mar 29, 2011 at 4:33 pm

Regarding JavaScript: I am looking at the demo code and see jQuery, Modernizr, and a ton of extra markup, when all of the above could have been taken care of by jQuery alone. Just a thought :)

René
Mar 28, 2011 at 11:31 am

That’s a great feature. Last week I made something like that, but than for Mootools cause I like it better:

http://codeviewer.org/view/code:18cf

But it’s a powerfull css feature

John Catterfeld
Mar 28, 2011 at 11:43 am

This is a useful resource for seeing what attributes are supported by the modern browsers when styling the placeholder.

http://blog.ajcw.com/2011/02/styling-the-html5-placeholder/

It’s not possible to style the placeholder at all in IE9, Opera 10 (and below) or Firefox 3.6, and the rest also have mixed support.

Doug Neiner
Mar 28, 2011 at 11:44 am

Though my comment here doesn’t change the *technical* aspect of the post (providing a fallback for placeholder), I think there is a large problem with the use case of the placeholder.

There is a difference between the HTML5 placeholder, and what I call an in-field label (What you are actually showing in this post). The placeholder is supposed to show *how* the user should input data. An in-field label serves the same purpose as a real label, only it appears in (or over) the field.

Here are some examples of the difference:

Label: Email
Placeholder: you@yourname.com

Label: Phone number
Placeholder: 413-123-4567

Just because the HTML5 placeholder looks like in-field labels we see around, it doesn’t serve the same purpose. If you plan to use the placeholder attribute, you should probably also provide a label.

Dave Sparks
Mar 28, 2011 at 12:01 pm

That’s a debate I’ve had with a few people, too many treat it like a label where as a placeholder should simply show the format of an input and not be it’s label.

Jonathan
Mar 28, 2011 at 12:17 pm

I think it’s fine to use placeholders as a replacement of labels, it’s cleaner and more condensed. It’s not apart of yesterdays semantic web, but i think tomorrow it should be.

René
Mar 28, 2011 at 12:24 pm

Well Jonathan, I think that’s different with every person.
Personally I really really hate it when my label is gone on focus. Because I tab all my forms, I don’t see what type of input is needed in the next inputfield.
So I have to make 2 extra tabs, to see what inputfield I have when there is no seperate label.
But hey, that’s me of course

Dave Long
Mar 29, 2011 at 8:48 am

I agree with Rene. For people who tab through forms, which is gaining popularity as forms grow more on the web, not being able to see what type of input is required is just bad coding. That being said, I think it is perfectly acceptable, and I do this all the time, to use placeholders as labels on text inputs that are easy to discern the required data. For example a search form on a website could use a placeholder. They are usually only one field and the submit button will actually help act as a label because it will say something search or just be a search icon.

Doug Neiner
Mar 28, 2011 at 12:36 pm

Jonathan, but they serve completely different needs. Even though the HTML5 spec isn’t finalized, the goal of a placeholder is quite different than a label. A label also provides screen-readers with essential information about the field. I am not sure how they do with placeholders. Even though web standards have been widely adopted, mis-using an attribute or element is just as bad as it ever was.

Nick La
Mar 28, 2011 at 3:28 pm

I agree with Doug Neiner here, I think label is still required in web form. Label and placeholder serve two different purposes. Placeholder is not equal to label.

The entire point of my demo is just to show placeholder (not web standard form). Hence I didn’t even put a submit button in the form.

Joe
Mar 28, 2011 at 3:03 pm

You might be interested in “Formalize CSS”
http://formalize.me/

It also removes the placeholder text, if you submit the formular, so there is no wrong data submitted.

john
Mar 28, 2011 at 6:41 pm

I fail to see how this is better than value.

Jon
Mar 29, 2011 at 10:44 am

2 reasons:
1) Value serves a different purpose. It can be used as the default form submission value when the visitor doesn’t input one, whereas placeholder text is meant to be replaced, and will not return a value if the visitor doesn’t supply one.

2) Without javascript, value doesn’t disappear when the input is clicked. The user has to manually delete it.

john
Mar 29, 2011 at 5:11 pm

I see your point and it is cool but as Jake pointed out in a comment below : “That’s all very well, but why not just use the jQuery code and not bother with the HTML5? This would mean you don’t have to add modernizr to your page load”. Plus your form validation would catch the default value out before submitting the form.

ethan
Mar 28, 2011 at 11:36 pm

what about password input?

Michel Kuik
Mar 29, 2011 at 12:58 am

Thanks for the helpfull article.
I believe it’s quite common to remove the ‘Chrome’ borders of input boxes with outline:none (on the :focus) state. What’s the difference between this method and input[type=”search”]::-webkit-search-decoration?

Robert
Mar 30, 2011 at 4:55 pm

You’re not styling the element, you’re styling the “Shadow DOM.” http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/

meodai
Mar 29, 2011 at 2:42 am

The JS could be better. In general, avoid to select twice the same DOM elements. Store stuff in variables if nesseserly. And you should use ‘===’ instead of ‘==’ and i wonder why you need a second .blur() after the .blur()…

Jake
Mar 29, 2011 at 2:51 am

That’s all very well, but why not just use the jQuery code and not bother with the HTML5? This would mean you don’t have to add modernizr to your page load.

James A. Rosen
Mar 29, 2011 at 9:43 am

Be *very* careful when doing this. It interacts very poorly with other jQuery plugins because they can’t tell whether the input’s value is legitimate or not. For example, this completely breaks most autocomplete and combobox plugins.

Юрий
Mar 29, 2011 at 11:20 am

Печать конвертов-в этой области есть ли применение.

Robert
Mar 30, 2011 at 1:40 pm

So, we’re importing two libraries to do something that was formally one line of JavaScript? I think that’s a bad idea. If you’re already using jQuery and Modernizr, thats OK. If you’re not and this is all you want to do, save all the extra HTTP requests / downloads, and roll your own. It’s not that hard to detect placeholder support and use the “old school” way (even though the jQuery is doing almost the exact same thing).

Adrian
Mar 31, 2011 at 3:42 pm

hey, i have a problem to see the demo, please put the right link please.
thanks.

chenchen
Apr 1, 2011 at 11:49 pm

Good,I like it,that is good way to placehold text!

Roberto
Apr 2, 2011 at 10:22 pm

If you wanna test just placeholder support you can use this instead Modernizr:
function placeholderSupport(){
return ‘placeholder’ in document.createElement(‘input’);
}

Derek
Apr 3, 2011 at 3:04 am

Cool HTML5, I will learn it (http://myfavorpages.com)

Mathias Bynens
Apr 3, 2011 at 9:48 am

For a more robust solution, feel free to use my placeholder plugin for jQuery. It works for password inputs, textareas, and detects placeholder support for inputs and textareas separately.

Matt Hinchliffe
Apr 3, 2011 at 11:47 am

If you’re not using jQuery and don’t need to test a bunch of features then you could try my standalone version in good old-fashioned Javascript: https://github.com/i-like-robots/Placeholder-Labels

Ltpy
Apr 3, 2011 at 11:49 am

Oh! My God! IT’ S very complexif and pepfull I was going to take when I need the instruction.Who it works?

html languages code
Apr 3, 2011 at 1:17 pm

gr8

Christian Krammer
Apr 4, 2011 at 1:44 am

Thanks for the inspiration. I didn’t know about this specific Webkit properties.

I handle the placeholder text a bit different at my site (www.css3files.com).
I use both the placeholder property and a normal . For modern browsers the label is set to display: none with the help of CSS browser selector (http://rafael.adm.br/css_browser_selector/).

Ben Ellis
Apr 4, 2011 at 5:45 am

Your focus() callback should apply the same check (check whether input.val() is empty or equal to placeholder value, not simply check whether equal to placeholder value) used in the blur() callback. Otherwise IE8 winds up never removing the placeholder class from the input.

Html Codes Dude
Apr 5, 2011 at 3:23 am

This is good but I think it’s a little bit of over kill. My personal opinion is the placeholder should be used as an enhancement if the browser supports it if not then leave it.

Theo Hubenet
Apr 5, 2011 at 4:18 am

Nice one Dude, I agree on the overkill part, but if I use a placeholder, I want all my users to enjoy it.

Gleenk
Apr 5, 2011 at 1:32 pm

What is the advantage of writing all these code instead of old method? I think it’s too early to introduce this new html5 tag. Isn’t it?

bardakta mısır
Apr 6, 2011 at 6:39 pm

thank you This is good but I think it’s a little bit of over kill

Web Design Nottingham
Apr 8, 2011 at 7:47 am

@Gleenk it can;t be too early… especially as most browsers now support HTML5

Great share.

Daniel Weinand
Apr 8, 2011 at 4:44 pm

It would be great if the input field would not remove the placeholder text on focus but rather as soon as a key event happens. That way you will still know what to type in the input field. The problem comes when you use [tab] to cycle through your input fields; there is a chance that without a label you won’t know what you’re supposed to fill in.

For our signup page (at shopify.com), we’re using transparent input fields with labels that emulate that functionality – even though not HTML5 – are more user friendly.

website designer uk
Apr 11, 2011 at 3:51 am

That is great post. It’s very nice. Thanks for shearing your ideas.

pandora uk
Apr 11, 2011 at 9:05 pm

good post !Thanks very much for sharing

Website Design Lonon
Apr 12, 2011 at 9:17 am

I want to take this moment to say that your post is really useful for the people who are working on HTMl5. I really like the work that has gone into making the post.

Jesse case
Apr 16, 2011 at 6:14 am

its a good language where any person can understand easily.web designer can modify but the person can also care the language and modify. skygatemedia is our site if any person have want to make web design then contact us

addfrog
Apr 14, 2011 at 3:59 pm

AddFrog.com is a free classifieds site to post ads to buy and sell products and services online. Post free classifieds for sale, purchase, rentals and services related to jobs, real estate, education, automotive, pets, travel, matrimonial, electronics, home appliances, health, machines etc. Find local classified advertisement ads for used and new products at best price in India.

Sunny Singh
Apr 16, 2011 at 9:26 am

I love the fact that you clear the input fields of the placeholder text when the form is submitted. This was one big advantage to using the HTML5 placeholder, and it’s great to see an exact implementation in JavaScript.

Clã Celestial Blog
Apr 16, 2011 at 11:27 pm

This is the future.

dexx
Apr 17, 2011 at 1:03 pm

Recent surveys, children of depressed mothers’ negative patterns of activity occurring in different brain reveals. This is for children of mothers who take more risks in the future is going to have depression.

Seo India Company
Apr 19, 2011 at 3:04 am

Unique Internet Marketing Services – the Marketing division of Uniqueweb Technologies in India. Explore the sections of SEO, PPC, Social media and avail the best services for your business now.

dan
Apr 20, 2011 at 11:46 pm

http://crab-tree.com is now a worldwide web design services website

banhawi
Apr 25, 2011 at 8:37 am

placeholder is a very nice addition to html , saves alot of js usage .

Empregada Doméstica Sorocaba
Apr 25, 2011 at 1:15 pm

This is really useful HTML5 trick. Tks jQuery, tks Nick!

thedevelopertuts
Apr 27, 2011 at 6:07 pm

You make posts that are really interesting. Thanks webdesignerwall!

Web Design Sheffield
May 3, 2011 at 2:58 am

This is most certainly useful for HTML5 beginners and refreshers. This even helped me out.

Carl Doppler
May 17, 2011 at 9:10 pm

I find your Website Blog interesting and full of ideas. If you want to read another related site. You can find this Web Developer Site helpful http://pmadesk.com/ Thank You!

cipro
May 22, 2011 at 6:39 pm

Wow amazing. Thanks for the great tutorial.cipro

Small Business Logo Design
May 27, 2011 at 3:31 am

One thing is sure that HTML5 will really ease the pressure on css coders. You can code fast and make more money.

xinyo
May 27, 2011 at 11:06 pm

It`s do work in IE9

fantazi ayakkabı
May 28, 2011 at 3:44 am

This is the future.

koçluk
Jun 1, 2011 at 3:15 am

This is the future.

Mont Blanc Pen
Jun 13, 2011 at 9:35 pm

What is friendship?Mont Blanc PenWhy do we call a person our friend? When do we call someone a very good friend?

mal
Jun 16, 2011 at 11:38 am

I just tried to tab through this page to get to the link to your demo (I cannot use a pointing device) and got taken straight to the comment form. Since I’m here…

That is a major nuisance to say the least and there is no good reason to mess about with the tab order in this case (or, indeed, in any but a very few specific cases). And aside from the form elements, there are no focus styles, so I cannot see where the focus is without constantly moving my attention between the page content and the browser’s status bar. That is another nuisance.

Still, the part of the article that I got to read, before being dumped down to the bottom of the page, was quite good…

London Car Rental
Jun 22, 2011 at 4:56 am

It gets worse when you start mixing the charsets.

barn
Jun 27, 2011 at 5:02 pm

Nice tip! Thank you!

orhanbt
Jul 15, 2011 at 4:12 pm

This is verry good.

David William
Jul 19, 2011 at 7:45 pm

Great tutorial, I translate this post for portuguese here http://www.frontendbrasil.com.br/tutoriais/cross-browser-html5-placeholder-em-todos-navegadores/

Web Design
Jul 24, 2011 at 9:03 am

It’s easy to resent punctuation. Its purpose is to clarify sentences, so why are the rules governing it so complicated? There are so many exceptions, so many exceptions to exceptions — it’s enough to make you want forego punctuation altogether. Well, back when it was alive and kicking, the Latin language did just that — and it didn’t stop there. Written Latin also omitted spaces between words or lowercase letters.

john
Jul 30, 2011 at 3:49 am

I was searching this kind of blog on internet, after finding you my search has been finished. I have learnt many new ideas from this blog, which are very beneficial for me. Thanks for the nice information.

Web Design
Jul 31, 2011 at 11:51 am

Part two of last week’s examination of the personality of punctuation. Click here to read Part 1. Em Dash and Hyphen Em dashes and hyphens are sisters, and whenever they go out together, they get stopped by strangers. “Are you twins? You all look so much alike!” At this, they roll their eyes. Sure, they look similar, but it’s obvious — to them, at least — that they’re each completely unique.

Rafael Fiori
Aug 4, 2011 at 3:04 pm

Its look like theres a issue with passwords fields

DishonestMan
Aug 5, 2011 at 3:23 am

Man enough of coding & stuff just use a form builder like http://www.jotform.com/

Web Design Staffordshire
Aug 14, 2011 at 8:49 am

I think the best advantage of using HTML 5 is the fact that is can be rendered correctly very easily in multiple browsers which renders the need for different versions of a site to be no longer necessary.

Daniel Cob
Aug 17, 2011 at 7:09 am

You can use cross-browser JS scripts like Placeholder.js (http://widgetulous.com/placeholderjs).

Matthew James Taylor
Sep 17, 2011 at 5:37 am

Unfortunately you can’t simply make the value of a password field equal to ‘password’ because it will be obfuscated to ******* so the only reliable way is to have a background graphic of the word ‘Password’ instead.

Personally, I prefer to use the proper HTML5 placeholder text and leave nothing for passwords. If people can’t update their browsers, poor them! ;)

Tom
Dec 15, 2011 at 2:20 pm

another method is cloning the entirely, but changing the type before appending it to the DOM, thereby circumventing the jQuery protection as well as the bug in older versions of IE. this is how we’ve solved it in our plugin: https://github.com/aplusldesign/jquery-defacto

Andres Roberto
May 16, 2012 at 3:50 pm

Well, you can use a label and absolutely position it over the password input and then change its display state via JS. When user focus in the input and it’s empty, the label (false placeholder) will appear and so it will if the user focus out and the input is empty. If user press a key when focus in the input and value is null, then display it. If input is not empty in any of these cases, the false placeholder will disappear.

Andres Roberto
May 16, 2012 at 4:16 pm

You have to use ID and FOR attributes so input will get focused when clicking the label.

Jon Raasch
Jun 7, 2012 at 5:46 pm

I tweaked it to fix this issue, by cloning the input as a text input and hiding the old. Then removing the new one / switching focus to the old one on focus:
https://gist.github.com/2892148

Beth
Aug 17, 2012 at 9:24 am

I believe you are wrong, Matthew. If you use js to change the HTML5 input type from “password” to “text” when the user has not entered text, it will be displayed in plaintext while the password is obscured properly when entered.

Peter Schreiner
Sep 17, 2011 at 10:02 am

Thanks for another great tip!

Mesothelioma
Sep 24, 2011 at 4:26 am

Your HTML5 might totally different. feature really clean and useful they are very exacting addition to my browsing list. Thank for sharing

j_hatfield
Sep 25, 2011 at 6:30 pm

Great tips, thanks for sharing. I just found this blog as well about cross-browser testing in general:

http://www.back40design.com/news/m.blog/22/cross-browser-testing-why-it-s-important

jsadfasd
Oct 3, 2011 at 3:38 am

what a nice tips it well help me

mybookmart
Oct 3, 2011 at 3:41 am

what a nice tips it well help me!!!!!

Greg
Oct 14, 2011 at 10:17 am

I’m having an issue with IE8. I’m loading in forms through ajax and in IE8 all I get is empty inputs with no placeholders. Every other browser seems to handle this OK, and if the inputs are on the page initially, they work in IE8 too.

Thoughts?

Jason Merino
Nov 4, 2011 at 7:04 pm

Not sure why this is only a problem only in IE8, but to be sure that all your events are firing in the correct order you might want to place Nick’s code into a function then execute that function with a callback after you have loaded the form.

Or, as a second thought just hit me, you might want to change the .focus and .blur to .live(‘focus’ … and .live(‘blur’ … to make sure those events are bound to elements that get injected into the DOM after the .ready event fires.

Good luck, hope that helps. :)

Pieno
Jan 15, 2012 at 2:04 pm

Me like HTML 5 a lot, a whole lot!

2012 in social media
Jan 20, 2012 at 2:44 am

One thing is that one of the most popular incentives for utilizing your card is a cash-back and also rebate present. Generally, you will get 1-5% back upon various expenditures. Depending on the credit card, you may get 1% in return on most expenses, and 5% again on expenses made at convenience stores, filling stations, grocery stores plus ‘member merchants’.

Henry London
Feb 1, 2012 at 7:30 am

Thinking about where this could be used – perhaps the comment form wouldn’t be a good place. If for example you used the placeholder text “enter your website” for the website input field and the commenter decided not to enter a website – thereby leaving the placeholder text along – then “enter your website” would be submitted with the comments as the web address. This would basically mean lots of links to “enter your website” which would of course be a broken link.

gfd
Feb 9, 2012 at 10:15 am

fgd

ucuz tatil
Apr 5, 2012 at 5:14 am

thanks for tuts.. I like java and jquery.. good luck..

katalog tasarımı
Apr 5, 2012 at 5:16 am

nice sharing.. thank you..

Tiffany
Apr 9, 2012 at 10:12 am

Thank you, this helped me! Simple, easy solution.

Tayler
Apr 26, 2012 at 10:46 am

Thanks for the tips.. it’s a big help for my web design

magazin
May 2, 2012 at 11:15 am

The closing date is May 2012 right ?

Steve Roberts
Jul 11, 2012 at 8:45 am

Erm… just downloaded the demo, opened it in Multiple IEs (6, 7, 8, or 9) and it doesn’t work.

Am I missing something here?

Yates en Ibiza
Jul 30, 2012 at 11:41 am

just downloaded the demo, opened it in Multiple IEs (6, 7, 8, or 9) and it doesn’t work.

xD
Aug 2, 2012 at 3:54 am

Nice

officer
Sep 5, 2012 at 11:05 pm

I do not know if it’s just me or if everybody else encountering issues with your website. It seems like some of the written text in your posts are running off the screen. Can someone else please comment and let me know if this is happening to them too? This may be a issue with my web browser because I’ve had
this happen before. Appreciate it

george
Sep 20, 2012 at 2:42 am

nice

Kasio99
Sep 20, 2012 at 3:38 am

Toooooo easyy!

Jared Christensen
Nov 12, 2012 at 4:38 pm

What Modernizr test does this require if I’m doing a production build?

Mandeep Singh
Nov 14, 2012 at 11:32 pm

I didn’t want to install Modernizr so, here is a fix I wrote: http://www.sciencestudioz.com/input-element-placeholder-attribute-in-ie
Hope it helps!

Kattie
Dec 3, 2012 at 11:51 pm

I’m amazed, I have to admit. Seldom do I come across a blog that’s equally educative and entertaining, and
let me tell you, you have hit the nail on the head. The issue is something that not enough men and women
are speaking intelligently about. Now i’m very happy I came across this in my hunt for something concerning this.

Nathan
Mar 17, 2013 at 9:39 pm

This is so good. It’s good when things work.

Dymo L
May 24, 2013 at 3:24 pm

Excellent post. I think that HTMl5 is one of the best lanaguage and we can change and do many things with it.
Thanks

metys
May 28, 2013 at 3:15 am

usefull,
thx

Post Comment or Questions

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.