Form label placement

Hi,

I am having some difficulties on deciding which way of placing form labels: a) inside the filed; or b) above the field; would work better. In both versions labels for empty form are visible inside a field in grey colour. Once one start typing they move either a) inside top left; or b) outside; So wanted to seek your opinion.

Please see two examples below and let me know what you think.


Version A
empty form


completed form


Version B
empty form


completed from


Best regards,
Alan

1 Like

Inside the field tends to get confusing, especially if the “labels” disappear when people start to type. (They can forget what the field was for, which is really annoying.)

From a broad accessibility point of view, having the labels above the inputs is preferable.

What you’ve presented, however, looks more like a question of style than coding. It looks like you have the label showing at all times above the input field, and you’re just asking whether it looks better to have the label outside or inside the box. That’s a different question, and either looks fine to me.

A better question to be asking is how dark that blue needs to be over the white background to be accessible for most people. At the moment, it’s too light to be properly visible to many users.

Thank you very much for valuable feedback. Just realized failed to provide enough information in my initial question. I have edited it now to explain the for when empty has grey labels inside the fields which disappear when one start typing and they move either inside or outside as shown in screenshots. Thank you for pointing to light blue colour issue too.

It looks like the question is

I want input placeholders to serve as labels until the input values change.
Then should I keep the placeholder in the input, or use a label?

True, both labels and placeholders should provide helpful clues to what should be entered into the inputs.

My inclination is to have labels always be present.
But instead of placeholders having the same wording, have “examples” instead. eg.

first name
[John]
last name
[Smith]
email
[me@example.com]
password
[********]

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.