When interacting with forms, users often encounter errors and difficulty in understanding the required actions. This article presents best practices for form design that will help you create a user-friendly interface that promotes efficient user experience rather than causing difficulties for the user.

Labels

1. Place the labels to the left of the fields. Do not place the labels inside the fields.
2. Place the labels at the top of the fields on mobile devices. And align to the left with fields.
3. Align the labels to the baseline of the first text line in the field.
4. If the label is long, shorten it or move the text to a new line
5. Align the labels to the left edge. It will be easier for a person to read and find the right field to fill in.
6. Move the input focus to the field when you click on the label.

Fields

7. Place the fields underneath each other. Do not put them on the same line.
This will make it easier for people to move around the form and check if all fields are filled in.
8. The length of the field should tell you what size data can be entered into it.
A phone number consists of 10-12 characters. So the field should be no larger and no smaller than this size.
Equal width fields form a flat wall that makes the form look more complicated than it is. People think they have a lot of data to enter.
9. Use a different type for each field. This will help the person enter a value of the correct type. Mobile devices will display a special keyboard for entering numbers; display symbols for quickly entering an e-mail address.
10. The appearance of the element should tell you what you can do with it: enter data or click to select data.
11. If the form consists of a large number of fields, group them according to their meaning. Such a form will feel smaller and easier to fill out.

Button

12. Don’t block the form submit button. When the button is clicked, prompt which fields are not yet filled in.
13. Highlight the submit button. If the form is large, separate the submit button with a separate background or make the button larger.
14. For buttons, use the < button > tag rather than < div >. < button > based buttons are interactive form elements, support various attributes to control their behaviour, can be styled using CSS and provide better accessibility and SEO. They also work well with keyboard controls and can be used to send form data to the server.

Hint

15. Place the prompts below the fields. Say why you are asking for this information. If there are restrictions on entering values, say so immediately, not after the person has entered incorrect values.
16. Help a person fill out a form. Tell him why he should fill in this or that field. For example, for the phone number field you can write: Send an SMS with an activation code.

Errors

17. Do not check the input field while the person is typing. Check it after the person has left the field and there is changed data in the field. If nothing has changed, then there is no error.
18. Provide a place for displaying errors. It is best if this option is to the right of the fields.
19. The text of the error should help the person to understand what happened and how to correct the error. If the person cannot correct the error on their own, suggest where they can go to resolve the problem.
20. Do not mark necessarily fields with additional characters. Try to make all fields in the form mandatory. If this is not possible, write why you are requesting this information.
21. Add an icon to show that there is an error in the field. Visually impaired people may not be able to distinguish the red box border. But they will notice the icon.

Keyboard navigation

22. Set the input focus to the first field on the form.
23. Set up a sequential transition between fields using the Tab key.

Common

24. Enclose the form in the < form > tag. This will allow proper processing of the form and support native operation of the Enter key to submit the form.