Make form labels and instructions easier to use

A form field needs a label people can find while entering and reviewing information. Use a persistent label rather than relying on placeholder text. Put necessary instructions near the field and connect them programmatically where appropriate.

Start with a simple field

<label for="email">Email address</label>
<p id="email-help">We will send the booking confirmation here.</p>
<input id="email" name="email" type="email"
       autocomplete="email" aria-describedby="email-help">

This example follows the basic label-and-description pattern discussed in W3C’s forms tutorial. The reason for collecting the address must be true for your application. Do not reuse a reassuring sentence if the address will also be used for another purpose.

Keep the instructions specific

“Enter a valid value” does not tell the person what format is expected. “Use the email address where you want the confirmation” explains the purpose. For a field with a required format, state that format before the error occurs, especially if it is not obvious.

A placeholder can provide an example, but it disappears as the person types and should not be the only label. Check the field after it is filled, not just in the empty design mockup.

Review a fictional date field

The exact treatment depends on the actual control and localization. Do not impose one numeric date format without considering the people who will use it.

Test the complete form

Navigate with the keyboard, inspect accessible names, and submit both complete and incomplete inputs. Check that instructions remain visible on a small screen and that error text identifies the field. Automated tests are useful, but manually follow the task too.

Ask AI to review labels against what the system actually needs. A field with an excellent label may still be unnecessary. Removing an unnecessary request can improve the form more than polishing its wording.