Input & Form Tags

[00:00:00]
>> Let's talk about inputs. So sometimes you wanna accept information from your users, right? So you can imagine you're filling out some sort of shipping information, right? So if you're trying to ship some shoes to yourself or something like that, they'll have something here of like put in your first name, and you'll put Brian.

[00:00:19]
That particular part where you accept user input is called, as you might imagine, user input. So these are browser inputs, it's input that the browser provides for you. They'll look sometimes slightly different, Windows ones will look a little bit different than Mac, cuz a lot of times they're provided by the operating system.

[00:00:38]
But yeah, they're very useful because there are a bunch of these pre-built kind of components that allow you to accept information from a user, and there's a bunch of different types. I always say the one that I 99% of the time end up using is probably this input type= text.

[00:00:52]
Which if you just leave out the type= text here, it's also the default one. You notice that this is the same as this one, right? These two are the same, right? But I just wanted to show you that if you leave it off, it is by default a type= text type.

[00:01:13]
And then I threw a bunch of other ones on there just for use. So you can have a color selector. So let's say we wanna choose a nice, I don't know, a green, okay? So someone could do that, right? And now, they've selected a green color, maybe you have them choosing the color of the t-shirt that they're creating.

[00:01:32]
This is a file selector. So I can upload a file or something like that, I can go select this file here and this will upload this file or something like that. You need a server to upload it to, but this will allow the user to choose which file that they wanna select.

[00:01:49]
This is a number, right? So I can only enter, only numbers will be allowed here. And then I can put numbers here, and they'll have the down arrow and up arrow. That's a number selector. This one is for users, if they need to select a time and date, all right?

[00:02:12]
So for this one, they wanted to do May 1, 2022. This will allow them to do that, and then this will allow them to select a time as like 12:30 AM on May 1. Radio buttons, so if you have five options and you wanna user to choose one of them, you'll use radio buttons.

[00:02:34]
And then if you have five options and you wanna user to select 0 to 5, then you'll use checkboxes, right? And that's what those are. So I think that's most of the types there, there might be a couple more, but I don't know, I don't use the color selector very option because typically, I don't need users to select colors for me.

[00:02:58]
But if I did, that's what that's for. Okay, textareas, I think we're kind of familiar with these as well. So imagine going to a comment form on a particular page like Reddit or something like that and you wanna say, This is my comment, but you wanna add multiple paragraphs or something like that.

[00:03:19]
This allows users to put in long-form text as opposed to something like this. You can't hit Enter on this, right? It wouldn't give you multiple lines of textareas for longer form comments. And it also has this dragon, so you can make it bigger or smaller. That's another text area thing.

[00:03:42]
Talked about selects. So, similar to radio buttons here, if you have like five options and you want the user to choose one of them, you'll use this. You can also use a select. And between radio groups or radio buttons and selects, it's just a preference. I would say, I typically, I see more selects cuz they're more compact, right?

[00:04:03]
A dropdown of, I need to select the state that I live in. Typically, you'll see those expressed as selects. I'll say these more common, but it's up to you if you wanna use radio buttons or a select, but that's what this is, right? So I define a select and then I define all the various different options inside of them.

[00:04:19]
So I wanna use, I'll just choose San Francisco or Seattle or Portland. That's what that does. And then a form is just a group of inputs and text areas and selects. So this one, for example, would be a form of housing expecting someone to put in their name, right?

[00:04:36]
So Brian Holt, that little placeholder here is basically what do you want the user to see if it's empty, right? So it shows grayed out last name, right? Again, this form isn't going anywhere, you'll have to do use JavaScript and your server to kind of hook up a form, right?

[00:04:55]
But this is actually just the part of the HTML that will accept all the information from the user.