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.
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.