Simplifying Your Forms With Placeholders

In the app I’mĀ buildingĀ  I have more than a few forms. No surprise there. A customer will need to sign up, sign in, enter their email if they forgot their password, fill out their profile, create a new product, and more! That is pretty standard for almost any web application.

So as I was playing around with my forms, my friend @allnick suggested I use only placeholders with no label fields.

Here is what my Sign Up form looked like originally with the label fields:

Here is what it now looks like with only placeholders:

I personally LOVE just the placeholders, and will be going slightly overboard with these. To add one of these, simply use the HTML5 placholder attribute. Keep in mind that not all browsers support it, so if you have customers who use Internet Explorer, make sure to figure out alternate ways of displaying this information for those browsers.

Enjoy the article? Join over 20,000+ Swift developers and enthusiasts who get my weekly updates.

  • bulldog

    Looks way better with placeholders indeed, good choice

  • I love this attribute too. I used to think I needed to go to the trouble of writing a JS function to get this to work, but I was so glad to discover there’s an attribute for it.

    One thing I’ve noticed though is that the placeholder text doesn’t clear until you actually start typing, whereas most JS implementations I’ve seen clear the text when the field is selected. I initially didn’t like this but it’s no big deal really.

    I now use the placeholder attribute for my email subscription form on my site. *hint*

    • I actually don’t really like it when it clears the text when field is selected. I find myself forgetting what the field is for that way, and have to unselect to find out.