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.