كل إدخال يحتاج إلى label حقيقي

A form field with no name is a mystery box. A real label tells every user, sighted or not, exactly what to type. 🏷️

The label element is HTML's built-in way to name a field. The browser, screen readers, and tap targets all understand it for free.

The cleanest link is for on the label matching the input's id. Now they are officially paired.

The id you point to has to be unique on the page. Two inputs sharing one id quietly breaks the pairing.

You can also wrap the input inside the label. No id needed, since nesting makes the connection clear.

A connected label gives users a larger click area. Tapping the text focuses or checks the field, which helps shaky hands and small screens.

When focus lands on a paired input, a screen reader speaks the label first. Without it, users hear only the field type.

A title attribute may show on hover, but it is unreliable on touch and keyboard. It is no substitute for a real label.

Checkboxes and radios feel obvious visually, but a label is what makes them tappable and announced. Never leave them bare.

Keep labels visible when you can. Sighted users with cognitive load benefit just as much as screen reader users do.

If a search box has no room for text, hide the label with a visually-hidden class, never display none, so it still reaches assistive tech.

How does a label know which input it names?

Every input needs a real label, linked by for and id or by wrapping. That one habit makes forms tappable, readable, and clear. ✅