And welcome back.
We're going to get into some more advanced tags and probably the most important tag that you'll use
other than the ones that we've covered so far, are tags that we need to create forms.
As you know, when you go to websites, usually there's some sort of a login or registration form.
So we're going to build that out today to get started.
Let's just create a new file here.
We'll save it and call it registered HTML on our desktop.
Perfect, and we know that we want a nice also we use our little shortcut and we'll title it register
save that.
And now in the index file, let's add another link.
That references register, dot e-mail and I'll just say here, register.
All right, we'll save both of these files and let's refresh.
We have register.
Click register.
Well, we have nothing yet, but it looks like it's working, let's add this on a new line just because
it looks prettier that way.
So to do that, if you remember, we're going to add a brake tag.
So let's refresh.
There you go.
We have new page and register.
OK, so let's build out this form if we go in to register DOT.
The way we write forms in HTML, while conveniently there's a form tag.
OK, but this form tag itself, it needs to have the actual form inside of it.
So what kind of form elements do we have?
Well, again, if we remember our good old friend W three C, let's type in forms.
And we can see over here that we have a small farms.
And refresh, we'll make that full screen and you can see over here that there's a ton of information
on it, but you can look that up yourself for now.
I'm going to introduce you to the most common ones, probably the ones that you'll use 90 percent of
the time.
The first one, as we do with any form and let's go to that base for now, is what we want to enter
our name.
So how do we do that?
We have a input tag.
That has a type of text because, well, our name will be in text form and we can close that off and
it's actually a self-closing tag.
So now if I save and refresh, OK, we have a little box here.
Hopefully you can see that.
But, well, we should probably title it because we won't know what to answer that way.
So we're going to put in here.
We're going to say first name.
Semicolon and safe, let's refresh, we have first name and now let's make this a little bit bigger.
There you go.
Now you can enter your name in here.
Let's add another one for our last name.
And again, we'll have our input type, so that's an attribute and a value of text.
And if we refresh, we have last name, OK, but it kind of looks ugly, remember that HTML just reads
line by line and doesn't really know that we want a space here.
So again, we can add a.
Break that here and refresh, and we have first name and last name, OK, that's that's fairly self-explanatory.
Now, what else do we have in a form?
We have email.
So let's add another field, which is email, and we'll do input again.
Type calls, text.
Well, add another break here, because we're going to need that spacing.
And let's save refresh, awesome.
OK, so we have our general registration form.
And obviously with any form, we need some sort of buttons, right, like we need to submit this somewhere
so we can register.
Well, again, there's a nice appetite for that.
So we do input instead of a text type.
There is a submit.
If we had another break in here.
And I say this, I refresh has a smeeton now.
Now, where did this summit come from?
Well, when you put an input type submit, it automatically creates a button and if you don't specify
what to say, I'll just have this text.
But we can change that so we can put value.
And we'll put register.
Save that refresh, we now have a register button.
OK, but what if we make mistakes in this field, we write stuff and we want to reset this form again,
there's a now there input for that.
And the type of that input, as you can imagine, is reset.
So now if we close this, had another break in here, actually, we can keep that on the same line.
We'll save refresh.
And we have reset, so now if I type in anything in here and let's say I don't like this, I need to
reset the form, I can just click reset and it clears everything for us.
OK, you may be asking yourself what happens when we click register before we get into that, I want
to just go through the common input types and then we'll click registers to see what happens with the
email.
We ideally want, first of all, for it to be required so that when you click register, if you haven't
provided an email, it won't let you register.
And there's an attribute that we can use for that and that is required.
And here we don't actually have to specify a value because automatically it's assumed that required
equals to true, which means that this form field is required.
So if I say that I refresh and I leave it blank and I click register, I will say, please fill out
this field.
Now, we also want to make sure that it's an appropriate email field.
So if I type something like this, we still want to make sure that, you know, this is an incorrect
email.
We don't want to register.
So the input type of text that I told you for email is actually wrong, there's a specific one that
we can use, which is, as you can imagine, email.
So now if I refresh and type in something that's not an email and I click register.
I'll say please include an app and the email address.
Very nice, it's kind of like magic, it does this for you, which is very, very nice.
Let's expand on our knowledge of inputs and add a few more fields that will most likely need.
We usually want to know somebody's birthday.
So let's add birthday here.
And for this input type, let's do.
So if I say this and I refresh look that we have a nice little dick picker so I can pick anything in
here.
All right, what else do we need?
We also need gender, so we'll do input type and for gender.
Well, there's no specific impetus for gender, but there is something called radio.
And radio is, as the name suggest, radio buttons.
So now.
Click refresh and, well, I have one radio button, but we ideally want to have options, right?
So how do we do that?
So for the radio, we also need to say whether it's male or female, let's have within the gender.
We're going to have a break over here in the line and we'll say.
And put type radio and we'll say male and we also want.
And we also want.
And when we refresh this, we have male, female and other, but you see a problem here, I just click
the radio buttons and I can't deselect them and ideally you should only be able to select one.
And right now, the way the radio buttons are, they don't know of each other's existence.
We want to make sure that they know that they're connected, their family, and only one of them can
be picked.
So how do we do that?
The way we do that is through the name attribute.
So for the name, we'll say gender.
And this name attribute needs to match on all the radio buttons so that they know they are together,
they're part of the gender input field.
So if I save here and refresh.
Now you can see that I can only select one.
All right, perfect.
What else should we have?
Well, let's say I really want to know if you have pets.
So with pets.
We're going to have input type or we can have multiple pets, so we won't be radio buttons, we want
checkbox.
So checkbox, we wanted to have cats or dogs, but cat and we want to have.
Check box, and we want to have dogs.
So let's save that, let's refresh and look at that, we have pets, but this time is checkboxes, which
means.
I can select multiple.