Best practices
Placeholder as label
Placeholder is base on a short memory, when the user input data, they will not be able to see what is this input for, unless he delete the content.
Input without placeholder
Placeholder is a good hint to user identify and fill the input.
Obligatory fields with asterisk
Is better show which field is optional than which one is necessary.
Inline checkboxes or radio
Increase dificulty to read and is not mobile friendly.
References
- Forma Library v1.0 by Amr Kamal
- https://dribbble.com/shots/4085830-Forma-Library-v1-0
- Design Better Forms by Andrew Coyle
-
https://uxdesign.cc/design-better-forms-96fadca0f49c
- Placeholders in Form Fields Are Harmful by Katie Sherwin
-
https://www.nngroup.com/articles/form-design-placeholders/
- 13 Empirically-Backed No BS Form Design Best Practices by Alex Birkett
-
https://conversionxl.com/blog/form-design-best-practices/
- Website Forms Usability: Top 10 Recommendations by Kathryn Whitenton
-
https://www.nngroup.com/articles/web-form-design/
- Web Form Design Best Practices: 5 Useful UI Patterns by Ben Gremillion
-
https://www.uxpin.com/studio/blog/web-form-design-best-practices-5-useful-ui-patterns-2/