Welcome back, everyone, to this lecture where we're going to begin discussing forms and part one,
we're talking about the basics a little bit of background to understand how forms work and then how
to construct a basic form in our ED.
Now, when you visit a website, you may have noticed the URL starts with each http HDD P stands for
hypertext transfer protocol.
And this is to say that it's the protocol used to enable communication, which we're essentially just
talking about each time L transfer right now between a client and a server.
HTP s just means that the HDP is secured, usually through encryption.
Now when I'm talking about HDP, I'm just talking about how information can go between a server and
a client.
And there's actually many methods available.
Using HDP to really common methods are the get method, which requests data from a source.
And another really common method is the post method, which sends data to a server.
Now, the reason I mention these is because you'll see me type out get when we actually build out a
form later.
You don't need to worry too much about guest and post right now, but become more important when we
talk about the back end with Django.
Now, a typical user just interacting with a Web page isn't really going to be aware of the get and
post that is happening behind the scenes, but they actually still use them often when they're filling
out a form on a page.
Now, forms aren't just general forms to collect things like you're signing up for a website.
It's really a lot of different ways of getting information from a user.
For example, when you actually fill out a Google search, you're technically filling out a form that
just has a single text field and then a submit button.
So try to think about the different forms you see on web applications when you use them every day.
Forms are one of the most important HTML elements and structures we're going to be learning about,
since it's the main way we're going to end up receiving information from the client using the website.
When a client ends up uploading a photo or maybe updating a social media post, these are really all
just forms that they're actually using with get and post requests.
Now, inside an HTML form, there's going to be some key tags and those are the input tax and the label
tags or the attributes play a large role in determining how they work.
So the label tag will dictate what the user can see on the form page and the input tag that takes what
the user can actually provide as information.
Let's explore these concepts inside our code editor by setting up our very first form.
OK, here I am back at Visual Studio Code Editor.
Now, something I want to point out is the fact that when you hit submit on a form, you're typically
redirected to another page on the website.
And we're going to do the same thing here, except since we're doing this all inside visual studio code,
I'm actually going to explore and I'm going to create a new file.
And this new file is just going to be called, let's say, other HTML and this other HTML is going to
be very simple.
Just going to have heading one and it'll say.
Thank you.
And that's all it's going to say.
But what I'm going to do right now is just build out a form on example h html.
Later on, we'll see how we can redirect it upon submission to go to other HTML.
I'm going to type out form.
And notice the default is you start building out a form and you have an action and then you have the
closing tag for the form.
So what does action actually represent?
Well, it's going to be basically where the user goes after they submit the form.
So what action should the form actually do upon submission?
In our case, we'll say the action is to go to other dot h html.
Later on, this will be kind of more complex, but just for right now, we'll keep it very simple where
once the user submits the form, the forms action is to go to other HTML.
Then we're going to do is set up both a label tag and an input tag.
First, let's begin with the actual input tag, so I'm going to start typing out input and you'll notice
that there's actually many different types of inputs that we can use for right now.
I'll just select the most basic one, and part two will discuss a bunch of different input selection
options or types.
So I'll just input.
And by default, the type is a text input.
So text input is just a box here that I can type text into.
And that's all it is.
It's just input inside a form.
And then maybe I want to put in another input.
And again, the default type is text.
Notice how they begin to align on the same actual line.
If you want them to be on different lines, we can use a break tag for this.
And that's a B.R., which allows for a break.
And then notice here.
Now we have the first text box on top of the second one, and that is B.R..
Also notice it technically doesn't really need a closing break tag.
So I have these two input types.
The other really important input type to understand is the submit input type.
So I'm going to hit input here, except now I'm going to say this is submit type.
And no, once I change it to type submit.
Each team understands that this is a button I can click to execute the action of the form it's related
to.
In fact, let's see what happens right now if I just put in some very basic information into this form.
So I just have these two kind of random text inputs and then a submit input.
And if I hit submit notice, I'm now at other HTML.
And later on, we're actually going to be able to see the URL be expanded so that we can actually see
what the user actually provided as information.
Right now, we're not technically saving or even understanding what the user actually typed in.
All I'm saying is if I go back here, the fact that I have inputs that can accept different types of
information right now, they're just text information.
And then I have a special input type known as submit that says, OK, grab the information from all
the other inputs and then go ahead and perform the forms action.
So typically, we're going to see submit at the very bottom, and we probably want to have a break here
so that we can see at the bottom.
And sometimes people like to add multiple breaks just to kind of space out these actual input and output.
I wouldn't worry about that too much.
Later on, we're going to learn about bootstrap, which will help us make these forms look a lot nicer.
So I'm going to remove some of these breaks.
And now what I'm going to do is add in a label that we, the user actually knows what they're actually
typing this for.
So how do I connect a label to an input?
It doesn't just have to do with the order, it appears in HTML.
We're going to need to assign an I.D. to the input and then we can say what the label is for which I
d is it for.
So if you type out label, you notice that it has an opening and the closing tag, which is indicative
that you're going to type something in between the opening and closing tags.
Unlike an input where you just had a single tag.
So for the label, I can say something like first name and note or first name colon.
Now look how it's right next to this input.
However, each HTML doesn't technically know that this label is officially for this input.
The way we can do that is by saying something like this is for.
If name and then insight of input, I can give this the I.D..
Of f name.
And so now we know for sure this label is associated with this, regardless of what order they appear
in.
And now let's do the same thing for the second input.
I'll create another label and we'll say this is for L name or last name.
And then I will sign an I.D. here equal to.
L name.
And let's just say the actual text here is last name.
Now you can really see this is starting to look like a form you would see on a real website, first
name and last name, and then the action to go to its other HTML that just says thank you.
So upon hitting submit, you're going to grab all the inputs and then execute the action from the form.
So I can say something like my first name, so say my last name is portela hit submit and now it says
thank you.
You may have noticed, however, that there's no actual collecting of the information.
We're not sending it to the other page.
If we actually want to send it to the other page in a programmatic way, I can actually assign a name
for the input.
So let's go ahead and say name is also f name for the input.
And then here I'm going to say the name attribute is l name for this input, and it's pretty common
to have things like the four ID and name all match up.
So that way it's really clear what is actually happening here.
But notice what happens when I actually assign a name.
To this input and then go back here and say first name, so it's a last name is 40A and hit submit notice
happens in the URL.
So in the URL, you can actually now see that I'm beginning to pass in what are essentially key value
pairs where I can say, OK, the first name that was passed in was equal to Jose.
And the last thing that was passed in was equal to Porsche.
And later on, we're going to be able to do a lot more than just send it to the HTML.
And typically, you're going to not send it to the URL like this if it's secure information like a password.
You don't want to just display the password in the URL, but you get the idea now that I can actually
now send information from one page hit, submit and send it over to the next page.
Pretty cool so far.
The other thing I want to point out is there's actually different types of inputs beyond just text.
For example, let's actually create now a form for collecting an email and a password and just get a
little bit of practice here.
We're going to start all the way from scratch again.
So step one, I create my form action.
Let's go to other HTML.
And now I want a label and an input for the email and then a label and an input for the password and
then a submit button.
So what's nice is to actually start here at the bottom because, you know, you're going to have a submit
button so we can just say, submit here and then automatically we create that submit button.
The other thing to point out is you can actually provide a value, which is a string of what you want
the submit button to say.
So I can say click here and then that will actually overwrite the default submit.
So it's kind of up to you.
Again, that is the value attribute, and there's a lot of attributes for a lot of different types of
inputs.
We won't go through every single one because we'll slowly introduce them throughout the course, but
now I have my input.
And if I were to click this, it would just execute the action without doing anything or really by just
going to other HTML.
So you hit, submit and boom.
Well, we actually want to collect information.
So the first piece of information I want to collect is, let's say, their email.
So we're going to say this is for email.
This label, and it's actually going to show the user email.
And then let's create an input for that.
And there's actually a special input type for email.
You'll notice it pretty much looks exactly the same as the text input type, but you'll see in a second
why it's actually special and why it's called email.
Then what I'm going to do is create a break here of B.R..
And let's add in another label for the password.
I'll say this is for P.W.
And the actual text that shows up will say password.
And then the input type here is going to be password says, actually again, a special type of input
for password.
Keep in mind, I can't just put anything I want and type.
There are only a limited amount of types of inputs, so I can't just say something like gobbledygook
here and then expect this to work.
No, it's there's a special type called password, as there's a special type called email and there's
a special type called text.
And then what I'm going to do here is also put in a break.
There we go.
So now I have my email and my password and then submit.
You can also see that depending on how Zoom than you are, there's actually a little bit of automatic
resizing that happens here.
But don't worry about that for right now.
OK, so we have our email and we have our password, and then we have submit they're labeled.
But they're actually not connected yet, so I'm going to add in an ID.
So we're going to say it is equal to email and then also say name as equal to email.
And we'll do the same thing for this input.
We're going to say it is equal to P.W. for password and then also say name is equal to P.W. for password.
Turn those double quotes there.
OK, so I have my labels, my inputs and for email and password.
Starting to look like a real form.
Let's go ahead and make an example up salsa example at Domaine Gqom.
So you may be wondering, well, this looks just like a normal text.
Why was email type special?
I'll show you that in a second.
But since I said password type notes happens when I start typing up my password, which I'll just say
is password.
It automatically knows, hey, this is a password input, I should conceal this from being seen by someone
over their shoulder.
So pretty cool by just specifying a particular type of input for these special types.
It's HTML and your browser is smart enough to know the default behavior for some of these.
I can hit, submit and notice now it says thank you.
And here and other h html, I can see the emails pass by and then the password was also passed.
Again, we're not going to typically just show the password here in the URL, but you get the idea.
I'm passing information to the next h html page.
Now, the other thing I want to show you is why email is actually special as an input type.
Let's imagine I just try to say hello for my email, and then let's put in some P.W. for my password
if I hit submit.
Remember, I said, this has to be an email.
And again, the browser smart enough to know, OK, this is input type, email and what you're putting
in.
Hello, text doesn't even have an at symbol.
So there's no way it can be an email, and it won't actually let me submit this.
It has a sort of automatic error.
So pretty advanced stuff here with the latest versions of HTML and browsers to be smart enough to understand,
Hey, you said this is a type email, so I'm not going to let them submit until it looks something like
an email.
And we're going to talk later on about other different types of validation.
Reform aren't inputs.
So maybe you want to have a bunch of restrictions on a password like ask to be a certain length or a
certain number of characters, you know, all those kind of annoying little validators that you have
to put in when you're filling out or making a new password.
You yourself can add those in with a form later on, but right now, that's all we wanted to really
show you for the basics.
Again, to recap, you have a form.
It's going to have an action that can go to another page and then you have labels and inputs.
The labels are connected through the four I.D. relationship, and then the input can actually have a
name.
So you can refer to it later on in your code.
So when I hit submit here after saying something like hello at Domain Gqom, it submits that name is
going to allow us to say, OK, my email is this variable connected to Hello Domain.
Com And then password is password, but you get the idea that name is going to be programmatically valuable
to us as a variable.
And then once you hit submit here, which you could overwrite the value there, then you're able to
actually submit and perform the action.
The other thing I wanted to tell you is there's another attribute called placeholder.
So I can say placeholder here and just pass in placeholder texts like email goes here.
And then once you start typing on this, you can see the placeholder text goes away until it's empty
again.
All right, that's it for this lecture.
I'll see you at the next one.
We're going to discuss a couple of more different input types that are will that will be useful to you.
I'll see you at tonight's lecture.