All right.
So in the next few videos we're going to focus on each team all forms so forms are how we get input
from a user whether it's to sign up for a page to comment on a photo to upload a photo to pick a color
to pick a date.
There's so many different things to do with forms and it's actually relatively simple and edged him
out.
There's just two important elements that we're going to learn about here.
So we're going to focus on the form tag the input tag the label tag and then we're also going to finish
up by learning about validations for our data how do we make sure someone fills in part of reform.
Someone cannot leave our password blank or email blank or something like that.
So to start let's just take a quick survey of some of the forms you encounter in day to day life.
So I have some images here from sites like Twitter Facebook Google.
Let's take a look and break some of these down.
So here's the log in form for Facebook.
We have a place where we can type some text in the text and put another input where we type passwords
in.
Most likely when you type your password there it's dotted down so you don't actually see the password
.
And then a checkbox.
And when we click this button it submits this entire thing.
So it groups these together.
We don't have one button for email one button for password one button for the check box.
It all goes at once.
Same thing here when we sign up.
We've got more inputs five different text inputs three different dropdown menus.
These are called select tags and then two things called radio buttons.
And then finally a sign up button that it's going to take all of this and send it somewhere for Facebook
to use.
So what we're going to learn today is the foreign tag and these forms are going to be a little bit dumb
.
They're not going to actually do anything.
We need to actually have a backend set up.
We need a database we need some logic and some back end code to do anything with the form.
So for now they're just going to look like this will be able to recreate this.
But when you click sign up or you click log in or you search on google our forums are actually going
to do any of that logic.
They're just going to be the front end user facing part of things.
So the first thing is the forum tag.
So the forum tag is basically a shell or a container for all of these different types of inputs.
So this is one forum tag around all of this.
This might be one form tag around all of these and so on.
Here's another form tag by just making a forum tag you don't actually see anything on the page.
We'll see that in just a second.
Basically it's just a container and we put all of our different inputs in there.
So checkboxes and buttons and dropped on menus and colored pictures all go inside of a formed egg.
So there are two important attributes will be spending some more time with this when we get to backend
.
So try not to get hung up on exactly how this works but a form is going to send a request somewhere
it sends data from the form to a server somewhere.
So the first part action is going to specify where to send the data.
Is it going to Google.
Is he going to sign up page is it going to are sign out we're going to learn a lot more about how we
actually do that on the back end section of this class.
And then the second part is what type of HSDPA request to send.
So we could send a get request or we could send a post request.
And again this is another thing we're going to spend a lot lot more time on.
But the simple generalized version we make a get request when we're doing something like searching or
retrieving data we're trying to get information and we make a post request when we're sending data that
we want to be added to a database posted to a server.
So in these examples this here when you search on Google you hit enter or you click and search that's
going to make a request.
It's not actually adding anything to the database.
It's not changing anything.
It's purely just getting data back searching.
It's getting data it's a get request.
These here though to sign up for Facebook or sign up for Twitter.
Those are going to be post requests when you typed in data and you click sign up it takes your data
and actually adds it to Twitter's database.
So again we're going to actually work on that quite a bit later in this class.
So for now just be familiar with action and method and the fact that they exist.
So the input tag is what actually goes inside of our forms.
It's what's going to create the different inputs that we see here a text input a password input a radio
button.
It doesn't actually create a dropdown menu.
So we'll talk about that in the later exercise but it creates all sorts of different inputs for user
input.
So I have a few examples here.
They're all exactly the same except for this type attribute.
So if type equals text we get a text box type equals date.
You get this little date picker type equals color.
You get a color picker Eiffel's file we get a file picker type Pickle's checkbox.
We get a checkbox.
So I'm actually going to pull up endian and search for input.
And as I do that you'll see as I scroll down to attributes under type there's a list of all the possible
types that we can specify.
And there's about 30 or 40 of them here.
And to be honest there's a lot on here that you probably will never need to use.
But there are a few that you use all the time.
And so we're going to really focus on those.
Those are things like text email password date button submit then some of the other ones like color
.
You may not use very often at all.
I definitely wish we had more chances to do color pictures.
It's my favorite of the inputs but I want you to be aware that there's a lot of different choices here
.
So then to make a form we just take a form tag and we fill it with some input tags.
So here's a really simple example.
We have two inputs.
Equals text type Pickle's password and it makes us this nice form here.
And you can see as we fill out this first type equals text it just looks like regular text.
And as we fill out the type equals password it gives just those dotted the hidden password fields.