How do I mark required fields in form while using just placeholders?

Question

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?

Answer 1

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

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.

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.

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