Last Updated: February 25, 2016
· foilking

Placeholders shouldn't be used for labels

I was recently working on a site with a few forms. The designers decided to put the labels in the input boxes, as it would look better on the page (this should have been a warning sign). I was working mostly on the back end for this project, so I wrote up the server code to validate the form and save it to the database.

The trouble started when I started doing the client side validation. I had discovered Parsely.js and thought it would be simple to just drop this in. Everything was working until testing with IE 7 & 8 started. Because the front end designer was using the placeholder attribute, the labels wouldn't be showing up the fields for these old browsers.

To fix this, I added a Placeholder JS library. However, because this added the placeholder values as the input values for the form, Parsely wouldn't work correctly. After some time browsing Parsely's documentation, I decided to add another validator to Parsely's extend file that would check to see if the field's value isn't the placeholder value.

defaultvalue: function (val, defVal) { return val !== defVal; }

However, there's still a small issue of the placeholder text not displaying once the form has been validated and failed in IE 7 & 8. The option we found best for this was to re-initialize the Placeholder code once the form was validated.

onFormSubmit: function (isFormValid, event, ParsleyForm) { $.Placeholder.init(); }

The best idea would have been to move the labels out of the input field and instead use the placeholders as examples. However, if you have a designer that wants to use placeholders instead and you want to use Parsely.js, this code might help you out.

P.S. Just noticed that the tags field is done with placeholder text for the label :P

3 Responses
Add your response

The problem is not with placeholders but with IE.

over 1 year ago ·

While I agree with IE being a problem, using placeholders for labels is a bigger usability issue. One you've clicked on the field, all detail about the field is gone. Sadly, some designers don't thing about this usability issue. But, if one was put into a position similar to mine, I hope this tip would be helpful to then.

over 1 year ago ·

I agree this is a usability issue and should only be done in situations where the labels would be completely obvious and the intended user fairly skilled.

However even if all of this were true, I think you would still have an accessibility issue. I suppose you could create a workaround — but I have a hard time seeing the value to all that extra effort.

over 1 year ago ·