Forms

In React, there actually aren't a ton of things you have to learn to interact with forms beyond what you can do with regular DOM APIs and JavaScript. Which I think is pretty awesome.

You can attach a submit handler to a form element with the onSubmit prop. This will be called with the submit event which has a currentTarget. That currentTarget is a reference to the <form> DOM node which has a reference to the elements of the form which can be used to get the values out of the form!

You can also use this to create an instance of a FormData object which is the standard object for representing form data in JavaScript.

The interesting thing about forms is that they have been around since the very beginning of the web when expectations of web applications were a little different from the expectations of modern applications. Specifically, full-page refreshes were the norm.

So, when you submit a form, the browser will do a full-page refresh by default. This is not what we want in a modern application where we want to stay on the same page and just update the UI (even if we update the URL). It's inefficient (the browser has to re-process HTML, CSS, and JS with every refresh) and annoying for users to do a full-page refresh on every navigation and interaction (imagine if you had a full page refresh when you like post on 𝕏!). So you can prevent that behavior using JavaScript and the onSubmit event handler on the form.

<form
	onSubmit={event => {
		event.preventDefault() // prevent the default browser behavior
		const formData = new FormData(event.currentTarget)
		// do something with the form data
	}}
>
	{/* form fields go here */}
</form>

This is so common, React provides a built-in way to handle form actions which we'll explore in this exercise.

Form fields also should be labeled appropriately as well to make them accessible to screen readers and improve the overall user experience as well. There are a few ways to do this. The easiest being to wrap the input within the label:

<label>
	Name
	<input name="name" type="text" />
</label>

But often our design requirements don't allow for that. In that case, we can use the htmlFor prop on the label to associate it with the input:

<label htmlFor="nameInput">Name</label>
<input id="nameInput" name="name" type="text" />