Signup and contact forms on landing pages often show a hint inside the field and no label at all. It looks clean. It is also the first thing to check.

The check

View the page source and look at each <input> . For each one, ask: is there a <label> tied to it?

<label for= "email" > Email </label> <input id= "email" type= "email" name= "email" >

Enter fullscreen mode

Exit fullscreen mode

The for value on the label must match the id on the input. A label wrapped around the input also works, though MDN notes that while common browser and screen reader combinations support this implicit association, not all assistive technologies do. The explicit for / id pair is the safer default.

What the standards say

MDN's page on the label element explains the point: the label text is programmatically associated with the input, so a screen reader reads the label when the user focuses the field.…