How do I show a form's required fields clearly in its markup?

For a supported control, use the Boolean required attribute. It indicates that the control must have a value before the form can be submitted. [S1]

Also give the field an associated label and include a visible cue, such as “(required)” in the label. For example, this assumes a short form asking for a name:

<label for="full-name">Full name (required)</label>
<input id="full-name" name="full-name" type="text" required>

The matching for and id associate the label with the input. You can also associate them by putting the input inside its label. [S2] The visible words tell people the field is required without relying on color alone.

An asterisk can serve as the visible cue if you explain its meaning in visible instructions, for example, “* Required.” Don’t make color the only way to identify required fields; communicate the requirement through more than color alone. [S1]

If you use a form-wide convention, explain it where people can see it while completing the form, and keep the cue near each required field. A note beside an input does not replace an associated label: the label should still identify the field. [S2]

No. The HTML required attribute makes a supported control mandatory for submission. aria-required="true" communicates required status to assistive technology, but does not itself make the field mandatory. [S1] Use required for the submission requirement; don’t use ARIA as its replacement.

Placeholder text is not a substitute for a label. Use an associated <label> to identify the field, and use placeholder text only as optional supplementary guidance if useful. [S2] In the example above, the label names the field and says it is required, while the input has the required attribute.

Review the form one field at a time. For every mandatory control, check that the HTML requirement and visible wording agree, and that its label is properly associated with it. If you use an asterisk convention, make sure its meaning is explained and the cue is not conveyed by color alone.

For example, if the instructions say “Fields marked * are required,” a required name field could use the label Full name * and an input with required. That is one possible convention, not a requirement to use an asterisk. The cited guidance supports using the required attribute, a visible indication, and an associated label; it does not specify how every browser or assistive technology will present a particular form. [S1] [S2]