Add separate labels above the input fields #102

Open
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>.

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

fipamo login screen but with filled fields
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
ro added this to the Road to Version One project 2024-05-07 22:36:21 +02:00
ro self-assigned this 2024-06-05 21:39:31 +02:00
Sign in to join this conversation.
No milestone
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: projects/fipamo#102
No description provided.