Current section: Forms 59 exercises
solution

Input Types

Loading solution

Transcript

00:00 Our AI assistant should hopefully be able to do most of this for us. So let's give it a second to think. Come on. No, OK, fine. We'll do it ourselves. There we go. We've got our input for our password. And now we've got a div for our input age.

00:14 And so just to call out, the AI assistant is helpful, but not helpful enough. Because here, the input does have the appropriate ID associated. And it has the name, which is also important, like we have up here.

00:30 However, the default value for an input is text, or the default type. And so if I were to type in here, like my secret pass, oh my gosh, people are watching and they know my password now. So we don't want to do that. We're going to say type is password. And with that, now our AI assistant

00:48 should be able to know, oh, you want types on these things. So let's continue and put some types on these things. We've got our photo. The type is file, but it's also not restricting the input. So let's add accept, boom, image slash star. So we are going to accept any file that

01:05 has that MIME type that matches this MIME type. The accept prop is pretty interesting, and it just improves the user experience a little bit. OK. So let's continue with our color. So there is a type of color. That's kind of neat. And then we've got a start date.

01:23 So there is a date picker on the web. It may not be styled the way that your designer wants it to be, but it does exist. So good for MVPs. But you will probably want a component library for something more custom. In the future, the web is always evolving and stuff. And so in the future, maybe the date picker

01:42 will be a lot easier to style. You can customize and just use a native date picker, which would be a huge win. But yeah, that's not the way it is right now. OK, so here's my username. And here's my password. And here's my age. How old am I? I turned 36 this year, so 35.

02:01 Yeah, sweet. Never going to give you up. And my favorite color is somewhere around the blue spectrum, somewhere around there. That looks pretty good. And we'll go with tomorrow. So now I just dated this video. But if we submit this, we're going to get a full page refresh.

02:19 We're going to see all of the data that we submitted. That's awesome. We can come over here, take a look at our URL. We see all that data in the URL, which is what we would expect here, because we're making a GET request. And then we're able to display that data. Got a little bit of a problem right here that we'll deal with later, because that image, we

02:38 wanted to actually upload the image, not just the file name. But yeah, that is our different types. Now something that I want to call out for the password type here is that you'll notice I hit the Back button, and all of these fields are still filled in, except for the password.

02:57 So the password is actually unique in a variety of ways for security reasons. And so that's why it's important that you use the password type. So there you go. That is a number of the different types of inputs. Of course, there are many more, and we'll explore more of those later. But we want to deal with this photo thing a little bit more.

03:17 So let's look forward to that next.