01 The label defines the shape of the input fields

Unlabeled input fields are just a set of basic shapes of rectangles, circles, and squares. The label defines for users that they see the form, and it has input fields with which they can interact.

Labels at the form fields are one of the foundations of a good form structure. How they are named and associated with the fields determines how quickly and accurately the form is filled out. An input without a label with only a placeholder causes problems if the text is typed in it.

02 Different styles

There are only a few styles of text fields. Some of them are never acceptable and should never be used. Some can be used with great care and depending on the design goals.

The text field with a label on top is the most straightforward, accessible, and user-friendly solution. It is always better to stick to it, and then there will be no problems with the efficiency of filling out forms.

03 Input field with a gray background

The white background and gray border at the input field is ideal and the most understandable solution. But sometimes, you want extraordinary things, like a light-gray background for the input fields, and get rid of the border. This style can look great on a white background, but if you ever need (and definitely will need) to use a non-white background for the forms in your design, that's a problem.

The simpler and more reliable your solutions inside the forms, the more efficiency for your design. This means you'll get more conversions and form completion success.