Text Box

The text box is often seen in forms, but there are various ways to use it.

First of all, the light gray text is called a "placeholder", and it can be used to display a sample input when nothing is entered in the text box. This allows you to tell the user exactly what to enter.

However, as users are human, it is inevitable that they will make typing mistakes. Therefore, by making the frame red when a mistake is made, or by showing what is wrong in an easy-to-understand manner, users can correct their mistakes smoothly.

If you know the length of the string to be entered, such as a zip code, you can adjust the size of the text box appropriately to match the length of the string to be entered, thus visually informing the user of what to enter.

In a form like this, where there are a lot of user actions, how users can operate the form without getting lost is important, so the quality of the UI is most apparent.