Text fields have many and varied functions. From sending a message, to entering a password, as well as registration in the system, as well as writing comments on various platforms. In this sense, text fields are a very important web element that should be paid attention to, as well as considering its different states and the feedback they give to users.
Text fields consist of:
Input field
The main part of the text field is the place where users enter the necessary text information. Make sure that, just like other elements on your site, text fields and their content are visible on any device.
Label
For text fields, labels are something like titles. They serve both the system and the user to understand which field is for what. Use labels to show users what they should enter in a given field and thus avoid confusion.
NB! Avoid writing ONLY IN CAPITAL LETTERS, as this disrupts the readability of any text.
Text
The placeholder text should be used either as a label, i.e. saying for example “First name”, “Last name”, “email address”, “password”, or as an example, as, for example, you can do when creating a search field, which, in essence, is also a text field.
The text you place as an example in the container should be a noticeably lighter color than the text that will be displayed to users. Also, keep in mind that adding examples helps users understand not only what information you want them to fill in, but also how to do it.
Data Format
Set text fields to only allow relevant characters in a given field. For example, there is no need to allow numbers in name fields unless you expect Elon Musk’s children to register. On the other hand, when entering phone numbers, users definitely do not need the ability to use letters.
You could suggest the allowed characters through the text in the container.
Illustrations or icons (optional)
If you want, you could use illustrations or icons to prompt users what, where and how they should fill in. Visual elements, as long as they are well chosen, help with the interpretation of the text, but they also serve as a form of rest for the eye, especially in cases where there is a lot of text. An image gives the mind and the eye a second to rest before returning to reading and interpreting again.
Help texts
In cases where the form you expect to be filled in is not standard, you could describe in more detail how you expect this to happen. Explain, through the form name or through additional text if necessary, what you expect as a result so that users can fill out the form more easily, quickly, and seamlessly.
