"Insert Hyperlink" modal - no labels for inputs

The “Insert Hyperlink” modal inputs lack labels:

image

Once you fill it out, you can no longer see which input is what:

image

In the above example, it’s hard to at a glance check if the inputs are filled in correctly, or if the user entered the values out of order.

The labels are kept in the placeholder property, which is not ideal:

Effective placeholder text includes a word or short phrase that hints at the expected data type, not an explanation or prompt. The placeholder must not be used instead of a <label>
HTML attribute: placeholder - HTML: HyperText Markup Language | MDN

My proposition is to add labels to each input:

image

4 Likes