00:00 Our note edit route is not really doing too much. We're just rendering the data, so let's make it render a form instead. We're going to return a remix form, so capital F-O-R-M, and that's going to come from Remix Run React. Yes, we do want method post, so we're going to do all caps post here.

00:18 But the method post is important because we don't want to put the data that's in the form in the URL, we want it in the body of the request. So we're not going to omit the method post because the default behavior is a get, which puts all of

00:36 the form input values into the query string of the URL. So we say method post, and then we have our closing form here. Then we're going to render a label with the title and a label for the content and all of that. So let's put that together. I'm not going to take the time to make this look all pretty

00:54 because at that point it's just like do JSX stuff. So we're going to just throw this together and then we'll let Kelly clean it up for us because she's really, really nice and helpful. So we'll say label title and title and input. The important part of the input here is the name.

01:12 The name is how the form value is going to be encoded when it's submitted, and so we're going to say name of title. Then we'll have a label for the content and text area for this because we want them to be able to write a bunch of stuff.

01:30 Here we'll say name is content. With that, we can do our submit button. So we'll say button type submit, save that, and boom, it does look pretty awful and gross, but we will clean it up later. You can feel free to do that as extra credit if you really want to do that, but we're not going to bother.

01:50 So with that now, we are not totally done because we've got this data that we need to pipe into these values. So let's add a default value of data.note.title. Save that and boom, there it is.

02:06 Then we'll have a default value of data.note.content. Boom, there that is. Now, of course, that could be a little nicer. But one other thing we're going to add to this is a button, that is a reset button here.

02:23 What the reset button will do is if I make changes from the default value and I hit reset, it resets the form. That's just like built into the browser. That's what the browser does. So that's pretty cool. If I try to submit, then the whole thing blows up because Remix is like, hey, you tried to submit, but you don't have an action there. We can't really do anything for you.

02:42 What's interesting though is if I do a lowercase form, now Remix isn't going to prevent default for me or anything. I have no JavaScript to prevent this. So if I hit submit, the browser will actually submit it. Watch the favicon when I do this. We get a refresh on the favicon. That's because the browser is actually doing this submission. The Remix server says,

03:02 oh, whoa, you made a post request to this route. This route doesn't have an action. So that's method not allowed. You cannot post to this route. So we get that 405 method not allowed. So we need to allow that method, and that's what we're going to do next.

03:18 But the point here is with Remix to make a form, you just do regular form stuff. There's nothing extra that you need to really worry about. We use this capital form so that we can do the prevent default. So we prevent that full page reload. But other than that, it's just a regular form.

03:38 That I think is pretty cool. You can still utilize built-in browser behavior like the reset button, and then we have the submit that behaves like a regular submit as well. So that's creating a form with Remix.