The page i am working on contains several of text fields and dropdowns, i believe that keeping the labels visible all the time is necessary
I wish to keep the labels outside and not use it as a place holder.

could not find one good example got this in android.. most just use label as a placeholders.

  • Are you asking what it should look like, or are you asking how to build it?
    – JonW
    Commented Dec 24, 2014 at 13:27
  • how it should look like ..
    – shmulik
    Commented Dec 24, 2014 at 13:30
  • Take a look at Safe in Cloud. It does this perfectly. Unfortunately, as the app wants to be secure as possible, I can't make a screenshot of it. It just puts the label (see asha's answer) right above the text field. Commented Dec 24, 2014 at 14:55

3 Answers 3


Placeholders are not substitutes for labels. Labels are captions which inform visitors what information a particular form field is asking for. Placeholders are bits of example content or hints which provide visitors with visual cues to aid in form completion.

Labels appear outside their respective form field, while placeholders appear inside their respective form field and disappear when users click or tab into the field.

Labels and placeholders serve two distinct purposes and one should not be used in place of the other. I would suggest using both the things at the appropriate place.

enter image description here


I prefer the Float Label pattern from Matt Smith. You see the placeholders and when you type something in the textfield, the labels float above it. So you can still see the labels. You can find more information here: http://mattdsmith.com/float-label-pattern/

enter image description here

  • 1
    I like the style of this page. To make the page 508-compliant, you'd need to make the labels visible to screen readers when the page loads, even if they are hidden from the eye. Bootstrap has a class for this called sr-only. You could do it with CSS clip.
    – PixelGraph
    Commented Dec 24, 2014 at 16:27

Top-aligned labels work better on mobile devices than left-aligned labels. Top-aligned labels are considered more user-friendly on desktop devices too.

Labels (coded with the label tag) are a much better practice than placeholder text. Labels are 508-compliant, while placeholder text is not. Some screen readers will only read the placeholder text when a user clicks on that field, while labels are read aloud to let the user know if they want to click on that field. Some screen readers will not read placeholder text at all. WebAim's 2014 screen reader usage survey showed 82% of respondents using screen readers on mobile devices.

I like the style of the small labels that Marijke shows in her answer. I just wouldn't have the labels hidden on page load because it is not 508-compliant. Although you can fix the 508 compliance issue by making the labels always visible for screen readers, for example with Bootstrap's sr-only class.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.