All language subtitles for 1. HTML Forms

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

Web sites 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 "register.html"

on our desktop. Perfect. And we know that we want an "html". So we can use our little shortcut and we'll title

it "Register".

Save that and now in the "index.html" file, let's add another link that references "register.html" and

I'll just say here,

"Register" right.

We'll save both of these files and let's refresh.

We have "Register". click "Register", while 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 break ‘br’ tag.

So let's refresh.

There you go.

We have "new page" and "register".

OK.

So let's build out this form. If you go into "register.html", the way we write forms in HTML.

Well conveniently there is a ‘form’ tag.

OK. But this ‘form’ tag itself 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 "W3C", lets type in "w3c forms".

And we can see over here, that we have HTML forms and refresh.

We'll make that full screen and you can see over here that, there is 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 page for now, is well 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 hit 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 enter that way. so we're going to

put in here, we're going to say "First Name:" and save. 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. Awesome.

Well let's add another one for "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 kinda 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 ‘br’ tag 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 e-mail.

So let's let's add another field, which is "Email:".

And we'll do input again, type equals text, we'll add another ‘br’ 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.

Like, we need to submit this somewhere, so we can register.

Well, again there's a nice input type for that.

So we do input, instead of a text type,

there is a "submit" type. So this, if we add another break in here and I save this. I refresh. It has a submit

button now.

Now, where did this "submit" come from.

Well, when you put an input type "submit" it automatically creates a button.

And if you don't specify what to say, It'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 what we

want to reset this form. Again there's another input for that.

And the type of that input as you can imagine is "reset".

So now, if we close this. Add another break tag 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 want to.

Well, 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, "You know what,

well, what happens when we click 'Register’?", before we get into that,

I want to just go through all the common input types and then we'll click "Register" to see what happens.

With the e-mail,

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 save that. I refresh. And I leave it blank and I click register. It'll say please fill out, this field.

Now, we also want to make sure that, it's an appropriate e-mail field.

So if I type something like this. we still want to make sure that, you know, this is an incorrect e-mail.

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 "@" in 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 we'll most likely need.

Usually, want to know somebody's birthday.

So lets, add birthday here and for this input type let's do type "date".

so if I save this and I refresh. Look at that, we have a nice little date 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 input type for gender. but there is something called 'radio' and radio is as the name

suggest radio buttons.

So now, I 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 tag over here in the line and we'll say input type "radio" and we'll say "Male"

and we also want "Female" and we also want "Other"

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 de-select them and ideally, you

can only - you should only be able to select one.

And right now the way, the radio buttons are, they don't know of each others existance, we want to make sure

that, they know that they're connected. They're 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 lets say, what I really want to know if you have pets. So with pets.

We're going to have "input" "type". We can have multiple pets, so it won't be radio buttons. We want 'checkbox'.

So checkbox.

We want it to have cats, or let's just put "Cat". and we want to have

- can't type today.

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, it's checkboxes which means, I can select multiple.