Form attributes

Beyond action/method, the <form> element carries attributes that shape validation, autofilling, targeting, and scripted hooks.

Important form-level attributes

accept-charset

Character encoding for submission (UTF-8 expected today).

rel

On forms with target="_blank", use rel="noopener" analogous to links.

name

Lets scripts target named forms in legacy patterns; rare in component apps.

autocomplete

Default on/off for descendant controls lacking their own token.

novalidate

Disables native constraint validation UI—common when you POST via fetch and render server errors yourself.

Example — autocomplete strategy

<form autocomplete="on">
  <!-- child fields can override -->
  <input name="coupon" autocomplete="off">
</form>

Rendered (fields only)

Example — opting out of native validation (novalidate)

<form action="/signup" method="post" novalidate>
  <!-- You must implement errors yourself -->
</form>

novalidate does not loosen server rules—clients can still forge requests.

Validation toggles

• novalidate: skip built-in constraint UI—use when integrating libraries or server-returned errors only.
• Individual controls still honor required, pattern, etc., unless removed dynamically.

Autocomplete tokens

Well-known values (email, current-password, shipping street-address) help password managers fill accurately—consult WHATWG’s list.

Accessibility responsibilities

• Associate error messages with inputs via aria-describedby.
• Use fieldset/legend for grouped radios/checkboxes.
• Announce submission progress for slow networks (aria-busy patterns).

Internationalization

Set lang on inputs collecting localized text; align server parsing with Unicode normalization expectations.

Error messaging craft

• List errors summary-first with links anchoring fields—keyboard users shouldn’t hunt.
• Pattern mismatch messages should show the expected format example, not only “invalid value.”
• Server errors should map to fields when possible—generic “something failed” increases abandonment.

Progressive enhancement

Native validation is a convenience layer; server remains source of truth. Turning off novalidate without replacing behavior ships broken flows to no-JS environments.

Important interview questions and answers

1. Q: Why are native form controls preferred over custom div-based widgets?
   A: They provide built-in semantics, keyboard support, validation hooks, and accessibility behavior.
2. Q: What does `name` do on form fields?
   A: It determines the key sent in form submission payloads; without `name`, values are typically not submitted.
3. Q: When should you use `type="button"` instead of default buttons in forms?
   A: Use `type="button"` for non-submit actions to avoid accidental form submission.

Pitfall: Always set method and action consciously on forms.