Do not use HTML5 placeholders
No one wants to fill in a your form! They have a goal at the end of the form, whether that is buying car insurance, a holiday or entering your food in a fitness tracker. This is why forms need to be clear and easy to use.
When placeholders were first available, I thought they would be great. They could give examples of what to enter in the form field and look aesthetically pleasing instead of just a blank white space. However, they have a number of disadvantages and I now avoid their usage.
Reasons not use placeholders
1. Disappearing text
When entering your information into the form field, the placeholder will disappear.
2. More difficult to see empty fields
Having text entered into a form field makes it more difficult to see what is completed and what is empty
3. Styled by the browser
Placeholders are styled by the browser, so there is no way to ‘improve’ them.
What to do instead
Placeholders were useful because you could show the formatting of the data that you wanted. So how can we achieve the same effect without using them.
1. Clear labels
You have a label for each input field (if you don’t, add one), make sure it is clear what you are asking for; users know what their name or phone number is. You can add an example to show formatting or for extra help.
2. Use examples
If your label to the field is not clear enough, then use an example above the field. The example will not disappear when the user starts entering their data, and if they do enter incorrect data which causes an error, the example is already there to help them see their mistake - there is no chance with a placeholder.
References
https://www.gov.uk/service-manual/user-centred-design/resources/patterns/dates.html