Add separate labels above the input fields #102

New issue

Closed

opened 2023-07-17 12:33:36 +02:00 by Moiety · 0 comments

Moiety commented

2023-07-17 12:33:36 +02:00

(Migrated from koodu.ubiqueros.com)

Where: Login/Registration pages

What: The input field labels (“Handle”, “Password”) are set with the placeholder attribute; this means their visual label disappears as soon as you type. This can get confusing with longer forms; because users are no longer able to identify the fields.

Recommendations: Add separate labels above the input fields with <label> and set their for attribute to the id of the <input>.

Fig. 1: default state for the login screen shows the labels as placeholders

Fig. 2: filled in fields only show their value but no labels

Where: Login/Registration pages What: The input field labels (“Handle”, “Password”) are set with the `placeholder` attribute; this means their visual label disappears as soon as you type. This can get confusing with longer forms; because users are no longer able to identify the fields. Recommendations: Add separate labels above the input fields with `<label>` and set their `for` attribute to the `id` of the `<input>`. ![fipamo login screen](/attachments/45fbf586-2a78-4436-a602-650ce139ffcc) Fig. 1: default state for the login screen shows the labels as placeholders ![fipamo login screen but with filled fields](/attachments/035ec079-2e10-4a8e-b1ff-09d054e4ebf1) Fig. 2: filled in fields only show their value but no labels