00:00 Okay, it's time to get into forms. You can actually interact with the web. It's amazing Forms have been around since HTML was standardized way back in the mid 90s And there are a lot of cool things that you can do with forms We are going to be learning some of the fundamentals of forms

00:17 We'll actually add a couple event handlers and stuff like that, too Even though we haven't actually gotten into state management with react yet. We'll be doing some Some extra cool things with forms and form data and all that stuff So yeah, the form element you can learn all about this on MDN Tons and tons of stuff that you can do with this the action method

00:38 And then inside of that you can put form elements the most common of these form elements is the input element input elements could be of a Huge variety of types all the way to like color pickers and date pickers and all sorts of things That we can do with our inputs with the various types and we're going to be exploring a bunch of those and

00:59 Then we also have one little shout out to the input event in on the web platform When the user makes a change as they're typing and stuff The browser is firing off events so that your JavaScript can listen for those events and perform different actions And the input event is fired whenever the value of these elements changes

01:21 In react world we call this the change event so you use on change rather than on input This frankly is a little bit Unfortunate because there actually is a change event and that typically is fired when the user changes something and then blurs the input

01:40 So there is this one difference there. You'll typically be using on change that rather than on input But other than that they operate pretty similar to your regular inputs and stuff Another thing that we're going to be doing is we're going because we don't We're not doing the the full browser behavior here

02:00 Or if you ever want to avoid the full browser behavior of a full page reload Then you're going to override the on submit event and prevent the default behavior And then you can create form data and do something with that form data So depending on the scenario You may not want a full page refresh like if you're building a X clone and every time you like a post it

02:20 That triggers a full page refresh. Yeah, nobody wants that So you do want to prevent that default behavior and typically when you're using a framework They're going to have something built in to handle that sort of thing for you, but that's what they're doing They're preventing the default behavior You're going to notice that as we're working through this exercise that we get full page refreshes when we submit the form

02:38 And that is fine for what we're doing But yeah in as you progress along the path here, you're going to want to prevent that default behavior most of the time And then not always though and then we also want to associate our inputs with their labels

02:55 This is also very important. And so we have label There's something about that in here, but I can just show you there are two ways to do this you have Label that is the parent of the input and whatever text is in there is going to be labeling the input Don't do this a lot. Sometimes do this with check boxes

03:15 But yeah, most of the time you're going to externalize label mostly for styling requirements and stuff you'll externalize the label give it an HTML for property and Have an ID that matches that HTML for again in HTML you do for

03:34 But that's an attribute and if you look at the property the DOM property It's called HTML for and so that's why the JSX prop is HTML for and that is how you associate these two things So we're going to be doing all of this stuff. It's going to be a ton of fun Forms are it's a really big subject. There's a lot to it

03:52 I think that you'll really enjoy our exploration of it in this exercise. So see you in the exercise