foundation

Native forms

Use platform form semantics, labels, submit behavior, FormData, and progressive enhancement.

Native `<form>` elements provide submit semantics, Enter key behavior, and `FormData` collection without manual wiring. Associating `<label htmlFor>` with controls improves accessibility. Use `action` and `method` for progressive enhancement when the app can degrade gracefully.

In SPA React, `onSubmit` with `preventDefault` is common, but platform semantics still matter for autofill, password managers, and mobile keyboards. Hidden inputs carry metadata; `button type="submit"` avoids accidental submits from `type="button"` mistakes.

On interviews, explain the concept with a concrete example and name the behavior interviewers probe.

Common pitfalls include hiding data flow, over-splitting components, and putting side effects in render.

The trade-off is often clarity versus reuse or explicit props versus convenience.

Checklist:

  • Labels tied to control ids.
  • Explicit button types.
  • FormData or controlled fields — pick one model.