A web form groups interactive controls around a submission workflow. In React, a form can own input state, translate browser events into application data, and invoke a callback when submitted. In Remix, forms also provide the route-level mechanism for sending create, update, and delete intent through the server. section 10.2.3 section 12.5.2
Implementation choices shape reuse, testing, and server behavior:
- Use semantic roles and user-event interactions in tests; number inputs are located as spinbuttons and typing exercises the browser-like event sequence. section 10.2.3
- For reusable interfaces, separate the form, field group, label, input, and submit components rather than duplicating login and signup markup. section 12.4.1
- Represent destructive operations with a submit button inside a form, using hidden intent and identifier fields instead of a delete link. section 12.5.2
Timer-entry form
An AddTimer component stores minutes and seconds, renders two numeric inputs, and submits minutes × 60 + seconds to onAdd. A focused test renders the component, finds both spinbuttons and the Start button by role and accessible name, types values with user-event, and verifies the callback.
