Let's get started with HTML forms.
Understanding forms is crucial as a web developer, irrespective of the career path that you would choose.
We are going to make use of forms a lot, so understanding forms play a major role.
So the first question is what is a form?
Well, forms are used to collect data on a web page.
So a form is like a transporter where we can send data from the client side to the server to be processed.
Let's say that we are applying for a job.
The way we can communicate to the employer is to submit a data and we can do so by using a form and
a form.
Help us to submit data to a different server or to different applications.
So how are we going to make use of forms?
So let's get started with basic HTML forms.
So let's get back to Visual Studio Code and we are beginning a new concept.
So I'm going to create a folder called Forms, which is lesson number six as forms.
And inside I'm going to create one file and I will say form dot HTML and let me scaffold the HTML as
that.
And here as basic form, let me add dh1 as basic form.
And as always, let me underline it and open it in my browser and let me open here as that.
So this is a form.
All right.
So how are we going to create a form, maybe guessing?
Well, we are going to use a tag.
Let me add a comment as basic form.
So here we go.
We need to bring in the form tag as that.
And inside we are going to have nested element.
And we have one type called input.
And impute is a way we can submit data to a server.
So when I see this one and let's have a look, you can see for this, I can type in data here and it
can be submitted.
That's the purpose for the input.
But here is the question.
Remember that we have different types of data that we can send to a server or to an application to be
processed, and that is we can allow the user to send a number that is, let's say, one, the age or
amount or whatever.
Or we want the user to send some text.
So we are going to use the same impute tag or element.
But one cool thing is that for this input it accept couple of attribute.
For the meantime, let's leave it as it is.
And I'm going to give more description about this input because as it stands right now, we don't know
what kind of data that we want the user to send.
So we are going to provide more information about what this input does and we're going to use what is
called label.
And let me remove the four attribute for noun and for the label.
I will say enter full name.
When I save this one, as you can see, we have enter full name.
Let's say we are building a registration form.
And for registration form, we want the user to submit some specific data.
For example, age or whether you are married or not, and other properties.
So I'm going to copy this and paste it.
And I will say for this one as your age.
When I see this one.
As you can see, they all move on one line.
It tells you that input fields are in line element.
If you want them to be on top of each other, we can wrap it inside.
Dave.
So I'm going to select this and put it inside.
Dave.
Likewise, they each put it inside.
Dave.
Save it.
And let's see.
As you can see, they are on top of each other.
If I want to have some spacing for the meantime, we haven't talked about CSS yet, so I'm going to
use what is called the b r, meaning the break tag.
So when I save it, as you can see now, we have some spacing.
And lastly, I want to have a button to click on.
So inside the form, which is this.
After the last imput, which is the age I'm going to provide button and I will say submit.
Save it.
And let's have a look.
And there we go.
So this is how we can create basic form, but we lack some important ingredient, and that is some of
the attributes.
Like I said, we can specify the kind of data that we want the user to submit.
But it's not.
Right now.
The user can submit anything.
For example, text.
And if I want a user to submit a number, the user can still type in text.
So we need to avoid this.
In the next video you will talk about HTML forms attribute, and that way we can specify the kind of
data that you want the user to submit.
All right.
Let's continue in the next video.