A web form groups controls that collect user input. Text fields, check boxes, drop-downs, and file inputs let people enter information for tasks such as logging in or placing an order. section 9.0
<form> <button>Click me</button> </form>
A button inside a form submits it even when the form has no inputs. section 8.4.1
Submission is a browser action, not just a button click. By default, the form sends its values to its target URL and reloads the page. If no target URL is specified, the target is the current page. This still happens when there are no inputs. section 8.4.1
In React, choose who keeps track of each input’s current value:
- Controlled inputs keep their values in component state. This keeps form logic and data flow inside React. section 9.0
- Uncontrolled inputs leave their values with the browser; React reads them when needed. They use built-in browser handling but give the application less control over later changes. section 9.0
A change handler can read a checkbox through `evt.target.checked`. In a submit handler, a named control can be reached through the form’s `elements` property—for example, `evt.target.elements.email`. An uncontrolled input can receive an initial value, though React does not update that value afterward. section 9.5
A form for adding a timer
Put the timer inputs and a button inside a `<form>`. The button serves as its submit button without extra markup. The form component can keep its own input state and call a callback when submitted, leaving the timer list to handle what happens next. Give inputs appropriate labels. section 12.1.1 section 12.6
<form class="timer timer-new"> <ul class="parts"> <!-- input --> <li class="colon">:</li> <!-- input --> </ul> <!-- button --> </form>
The timer form groups its inputs and submit button as one UI element. section 12.1.1
