Website Design

Designing text fields on web pages

Text fields on web pages (text field) - this is probably one of the most frequently used interface components. They are used to fill out contact forms, enter payment details, create an account (online registration), lead generation, login forms, etc., that is, they solve the problem of organizing the interaction with visitors to sites.

The purpose of this article - to highlight some key recommendations that will help you properly approach the design of text fields. We consider only the issue of design, any additional lessons on the layout will not be here. The publication is an adapted translation of this post.

THE STATE OF THE TEXT FIELD

Elements in a text field can be displayed in the following states: basic, on hover, active, inactive, error. Each of these situations should be accompanied by appropriate visual signals, so that the user can easily identify them. This approach greatly simplifies the usability of your product.

BASIC . This is a variant of the default display of the text field, i.e. while a person has not yet started interacting with it, but it is already ready to work.

The basic state of the text box

INACTIVE

This state does not allow people to interact with the text box. Often this is due to not meeting certain requirements on a web page.

Inactive state of the text box

HOVERING.

A hover response indicates that the current text field is interactive or clickable. When hovering over it, it most often changes the color of the frame or increases its thickness. When the user removes the cursor, the object returns to its base position.

The state of the text box on hovering

If you're interested in the implementation, see the article about CSS hover effects for buttons, links, blocks, etc.

ACTIVE

The text box goes into this state when the user clicks on it with the mouse pointer and the cursor appears. You will be able to enter text in the text box.

Active state of the text box

TEXT LABELS / FIELD NAMES (TEXT LABEL)

For text field objects there is a special parameter placeholder, which allows you to display some text in it. It can be used to indicate exactly what information a person needs to enter into a specific field. Some developers use it in place of text names/tags (Text Label).

The problem here is that as soon as the user starts interacting with the field (entering information), the stub disappears. This is not particularly convenient, because if he forgets the purpose of the item, he will have to make it inactive to see the placeholder again.

The name of the text box

DO NOT USE UPPERCASE.

When creating labels, do not choose uppercase letters, as the lack of height difference makes them difficult to read quickly.