Form labels

Labelling

No label:

Only a placeholder:

Not really a label, just text in a span next to the text:

What's your favourite colour?

A label, but not attached to the input


Proper label/input relation:


Proper label/input relation plus a placeholder:


Alternatives

Implicit label:

<label for="colour5">What's your favourite colour?
    <input type="text" id="colour5" name="colour">
</label>
<input type="text" id="size" name="size"
   aria-label="Size" placeholder="Size">

Use an aria-label (not preferred)

Keep the label clean and to the point

Please read our terms & conditions.