7

I have my forms designed without any labels above input files, I'm just using placeholders to inform users what the field is. It works and looks fine, but my question is - how may I inform users which fields are required before validation hits?

If I had labels I would use an asterisk after label name - what can I do to mark those inputs without using labels? What is the best practice?

5

You could include the asterisk symbol on the placeholder itself to represent the required fields.

enter image description here

But this might not be the best approach as the labels are required for a user to understand what the text field is for and placeholders can be used in some scenarios but when the text field has already filled the placeholders disappears which may confuse the user.

In such cases, we can use googles material design text field which keeps labels in the place of placeholders and moves it above when clicked.

enter image description here

Or even we can display the labels like in below example in such a way it won't occupy more space on top of the text field.

enter image description here

you can find the example code of the above designs in the following link. https://css-tricks.com/float-labels-css/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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