In today's video.

I'm gonna show you everything you need to know about how to create forms and elements inside of those forms.

And if you're new around here, make sure you subscribe for more videos where I simplified the Web for you.

Let's get started now to get started with forms.

Let's build one of the most common types of forms, which is a log in form.

To do that, we first need to create the page that load it on.

So we just read a page called index dot html and in here, if you're envious code or you're using Emmett, you just type exclamation point and hit enter.

It'll generate all the boiler quite code you need for a basic HTML page.

We could just change the title here to form because this is going to be demonstrating forms now to use a form.

The first thing you need to do is open up a form tag so you could just type in here form.

Close it off, and this is going to be a form tagging all the inputs that you put inside of this form are going to be submitted to wherever your form goes to by default.

If you just leave your foreign tape blank like this, it's going to submit to the page that you're currently on.

So in her study here, let's put our different inputs so we can use the input element, which is going to allow us to input into our page from our user.

And what we want to do is we want an input element, and this one's going to be the name.

And the thing with input elements is they don't actually need to be closed because they don't actually allow you to specify anything inside of the tags, their self closing tags.

So if we want to add a label tore input we need to do is we need to use what's called a label element.

So let's have our 1st 1 be our user name.

So what, you're gonna put name here, and we could just copy this down because we're going to need a 2nd 1 which is going to be for a password so we can type in a password here and now we're almost complete with the basics of reform.

But we need some way to submit our forms, so we're going to create a button to do that.

So let's just create a button here and we're gonna call this submit for the text of our button.

Now, to actually test this page, we can just right click and open with Live Server, which is an extension from visual studio code that you can download once we have that open.

We can see over here that if we expand this a little bit, we have our name field.

We have our password field and we have our submit button, and right now they're all clobber it onto the same line.

So let's use some dibs, which is just another basic tech which will allow us to separate these onto multiple lines.

So if we put some code inside of this, Div is going to end up on the next line and we could do the exact same thing down here.

They're password.

Let's create another def to wrap our password element in whoops.

Copy this paste in there.

And when we say you see it populates over here on new lines.

Now we can enter name information passed on information and click submit and you'll see it'll submit it to the page that were already owned.

But while technically this does work, it's not at all how you want to build forms.

In actuality, almost always when you build a form, you're going to want your foreign to us a bit somewhere other than the page you're currently on.

So I wanted to do that.

We have a key word here in attributes, which is called Action, and the action is going to be where you're for Miss submitting to and in our case we're just going to create a page here, which is called results dot html, and this is going to be what we want our form to submit to.

The next thing that you almost always air.

Gonna specify on a form is the method you want your form to use, and this is either going to be get or post would get request.

It's going to upend things to the girl, and it's going to send it to another page in your sight.

While the Post is going to be useful for when you have a server where you need to save some information if, for example, we would use post here.

So if we change this to post and we try to submit something you see that were immediately going to get an era because browsers can't render post request, they can only render get request and we don't have a server.

So what we need to do is we need to use get request here instead of a post request, and now this is going to work as soon as we create our actual page.

So let's create that results dot html page and I'm actually going to copy over here.

A result html page.

This is a very basic page.

All it has is a link that goes back to our form and has a little bit of Java script, which is going to render the results from our HTML form from before.

Now let's go back over here, refresh our page, and we want to just make sure we click submit and you'll see that nothing is being shown up for our form fields.

We do have that button to go back, and the reason nothing is showing up for our form fields is because in order for an input to actually show up as a form.

What we need to do is we need to specify the name for that input.

So let's do that now.

The name here is there's going to be a name for this 1st 1 because we just wanted to be whatever we're submitting to our form.

So we're gonna use this as name and down here for a password.

We're gonna set the name of this one equal to password.

Now, if we say bet and come over here and we type in, for example, a user name and we type in a password, let's just say that's that and we click submit, you'll see Name is set to user name and password is set to password.

And if you can see in the euro, it's setting those parameters.

Here.

Name equals user name and password equals password.

And I wouldn't get request.

Does is it sets it in the Earl here while if we did the host request here, this is actually going to set it in the body.

So if we refresh this and turn some information and click, submit again, we're going to get that error because we don't have a server accepting any requests.

So you need a server if you're gonna use Post for the restless example we're going to be using get for all of our different requests.

So now, with that out of the way, we have our form set up properly.

We ever inputs with actual names so we can use these and render them later when we submit our form.

But our labels aren't actually doing anything very useful because normally if you click on the label, it should actually highlight the field that it's being labeled for.

This is really helpful for not only users but also for screen readers.

In order to do this, we just need a set of four attribute here, and we said It's the idea of the element that we want Thio highlight whenever we click on the label.

So in our case, we're gonna say name and then we need to give our element here that I D.

Which is just going to be named now if we click on our label, it's actually gonna highlight the input element that that label was for another way.

That you can do this is if you don't wanna have that for a tribute.

You can actually nest your element inside the label.

So if we come in here and we wrap our label around our input element, so we have both are Password String and our input owner inside of the label.

Now, when we quit the label, you see it's going to highlight that password field for us.

Almost always, you're going to see people use the four attributes instead of wrapping inside of it just because it's cleaner and easier to style.

But just so you know that you can do this and a lot of people do this when it comes to check boxes and radio buttons, which we're going to get to later in this tutorial.

And speaking of different type of input elements, one thing young you knows is that our input here does not have any type specified for it, which is why it's defaulting to a text input here.

But you always want to be explicit in what type of input you're using.

So you always want to specify a type field, and the input tag is very versatile because you could have many, many different types of inputs.

But in our example, we just wanna have a text and put here for the name.

But for the password.

Normally, when you're on a website, when you type in your password, it's actually hidden.

And that's because there's a type which is called Password, which, actually by default, hides the characters for you.

So now if we save this and we enter our user name, you see it works just fine when we enter a password.

You see it's hiding our characters for us, and that's because we're using type of password for input element.

And lastly, the only thing left to make this log inform correct is that we need to change our button down here because we want this to be a submit button so we can just come in here.

We can type in the type of submit, and what this says is this says it's going to submit our form, and when we hit, enter, for example, anywhere in our form.

So if I type in something here and I clicked the enter key, it's also going to submit our form, which is why having types of mint on your button is really useful and it also allows you to have other buttons in your form that don't necessarily submit your form, because this one right here is submitting it.

Since it has the type of submit, another type of button that's really useful and really under no one is going to be a button with a type of reset.

And if we just set that here, we're gonna set the text here to reset and we go back to our form and we just type in some texts.

If we clicked, reset, it sets everything back to its defaults.

And as you can see, our defaults for us, art is going to be completely blank.

But what happens if, for example, you want to default the field for the user?

Let's say you already know what the user name is for that user, and you want to set that by default.

That's where the value property is going to come in.

So you just type in value and anything you said in here is going to be the default value for that property.

So what set the default here to just be user Now, when we're your fresh, our page, you see the user is being the default.

That name, and the best part is, is if we change us and click reset, it goes back to the default value we have set in our code for the HTML.

Another thing that's really useful is have a placeholder value.

For example, if we have this user's name here, let's say that we don't actually know what their name is, but we want to put in place older.

This is just something that's going to show up to kind of let the user know a little bit more information about what they want to put in here.

So we're gonna say our place holder is just user name.

And as you can see, it feels that in the latest great text, and as soon as the user types something else, a completely removes the place for their.

And if they remove everything, it goes back to having that placeholder.

Just to reiterate a little bit on the points that we touched on a placeholder is really useful for when you want to give a little bit more information to your user while value that you set.

So, for example, we change this here to value.

This is really useful.

If you already know what the value is or you want a default.

This is something that is going to be submitted with your form because of a click.

Submit.

It submits that user name value.

But if we change is to be a placeholder, for example, instead and we click submit, it does not submit the place holder only the value.

Another thing you'll notice is that we're able to submit a blank name in a blank password, which in a log in form, you would want to throw some kind of error to the user, telling them they can't submit blank information.

And luckily, this is really easy to do.

There's an attributes which is called required and is required.

Attributes is forcing the user to actually enter this information.

Let's remove this place holder so it's a little easier to see.

And if we save it and click submit, you'll see that we get an error that says police fall this field, and if we fill it out and click, submit now to let it go through.

So we want to add that required attributes to both our password and to our name field here.

So now they Even if they enter just a name, no password.

It's still gonna give in that air until they enter that password as well.

Now, as I mentioned earlier in this video, the input element here has many, many different types that it can be.

So let's go through an analyze some of the different types that we have by starting with one of the most common types, which is going to be the email type.

Let's create another def.

Here.

This dip is going to be used to ask for the email.

So we're gonna have a label.

We're gonna use four email and in here we're just gonna put email as the label, and then we're gonna create in our input, and this is going to have a type here of email, and this is going to verify email addresses for us by default.

Let's make sure we set the name to email so we can use it when we submit it.

And we also need the i d here to match what we set for our four.

So we're gonna use email in there, and let's just make it required because we always want our user to send an email.

Now if we say that you see our email field is showing up here, and if we type in something, for example, was typing everything and you click submit, you see that it says to please actually make sure that this is a valid email address.

So by default, our browser is doing email validation for us now.

It's not the greatest female validation in the entire world, but it's a whole lot better than having nothing.

And also, when a user's on a phone, it's going to give them a keyboard, which is actually specified for entering emails as opposed to just the generic text keyboard.

Other than that, though, email is very similar to the text field that we've already covered.

Now let's move on to a little bit more complicated of Field, which is the number field.

So it's again enter another Devyn here with the label.

This is going to be for what we're going to put a czar age because we want to ask the user for their age and we're going to create input again for doing that, and this is going to have a type here of number and what's make sure reset a name, which is going to say age and an I D, which is going to be a JJ.