Understand the idea

A form control needs a clear label. A visible label explains what to enter and remains available after someone starts typing.

The label's for value must exactly match the input's id. A name identifies a field in submitted data; it is not a replacement for a label. The email type provides an appropriate input mode and basic browser validation. It does not prove that an address exists. Receiving and storing submissions requires a separate service or server. This example uses an explicit label. Nesting the input inside its label is another valid pattern. Browser validation is a convenience, not a security boundary: any receiving server must validate submitted data too.

Read the example

This is an HTML fragment. Place it inside the body of a complete HTML document, unless the example explicitly identifies head content.

HTML · EXAMPLE
<label for="reply-email">Your email</label>
<input id="reply-email" name="email"
       type="email" autocomplete="email" required>
<p>This example does not send any data.</p>

A small mistake, explained

What goes wrong

Using placeholder text as the only label makes the instruction disappear during typing.

How to fix it. Keep a visible label. Use a placeholder only for an optional hint and connect longer help text with aria-describedby.

Try it yourself

Click the label. Focus should move to the input. Change the for value to see why the exact match matters.

Further reading

W3C WAI — labelling controls

Original explanation and example prepared for HTML code FYI with AI assistance. Test the code in your own context. How these guides are made.