Let's continue with the forms.
Since forms are really important concept when it comes to web development.
That is why we are spending some time on it.
In the previous video we spoke about form attributes, but in this video we are going to talk about
impute types, even though why we were discussing about the form attributes, we spoke about some of
the input types.
So in this video we're going to be optional because we spoke about it in the previous video, but let's
go ahead and add more things into it.
So back to Visual Studio Code, and this is where we left core form attributes.
And before we continue, what are the input types?
Like I've explained before, the input types allow the client or the user to submit a specific data
that we need as a developer or as the owner of the application.
Let's say we want the user to upload files.
We need to specify the type of input or we want the user to submit a single answer whether it is true
or false, that is a boolean answer.
This is where input types comes into play.
And for this one again, we have spoke about it in the form attribute.
As you can see, we have different types of input type like number or text.
So let's go over again.
Because of that, I'm going to create a new file for it as input types and I'm going to use this scaffolding
from MIT and I'll call this one as input types.
All right.
So let me add the each one as input types and let me underline it and open inside the browser.
Q So what are the types of input that we have?
One is we have input type of text.
So here you go.
Let me add the comment as types of input types.
All right.
So I'm going to put everything inside.
Dave So now to be on top of each other.
So the first one, I'm going to use a label and let me remove the four attribute here and it's going
to be as text and the input goes like this.
As you can see by default it is text.
So when I save this one, as you can see, we have text in and you can provide additional attribute
as well.
So this one is for text attributes.
So let me change the color to something like this.
And let me copy this and paste that.
The next type is going to be password as that and change this one to password and the type here as password.
The name is even descriptive.
As you can see, when I type, I have something like this instead of the rare text.
Let me add some spacing by using the break type as that.
The next type is going to be checkbox.
So I'm going to copy this.
Paste it here and change this one to checkbox.
So what is the checkbox?
This one creates a checkbox that allow a user to toggle on and off.
So let's save it and let's see.
As you can see, we have it as that.
And we often use one for a user to agree to some terms and conditions in our application.
Or if we are collecting some survey, we can see that are you married?
If you check it, it means that you are married and if you don't, it means that you are not meaning
force.
So this is what you call a boolean value.
The next type is going to be a radio button or a radio input type.
So I will paste it here and change this one to radio.
Let's save it and let's have a look.
As you can see for the radio, I cannot do the toggling by checking and on checking, but for checkbox
we can toggle the response as that.
So my mistake.
I need to put this one inside a form or the input type.
It must be inside a form.
Has that great.
The next input type is called submit.
So I'm going to copy this.
And paste it here and change this one to submit.
So what is the purpose for the submit?
Well, this allows us to submit a data that we are filling in a form to a server.
When I do that, as you can see, we have submit here.
When I click on that, the value I'll pass in here.
For example, this ones will be sent to the server for further processing.
That is a submit for you.
And instead of the input we can use the button also to get it done as button here and I will say submit.
We can use the button to delete a record or data, or we can use a button to submit data to your server.
So we are going to use a type attribute here and provide these values.
If you use button, going to be this by default, but if I submit this one is the same as the input
type of submit, save it and let's have a look.
As you can see, it looks the same as the input of type submit.
And we can also pass in additional value to the type called reset.
So we're going to change this one to reset.
And I will say reset.
And I believe you have seen this kind of feature in some application.
For example, if you are filling a four, you're going to see a button called reset.
So when a user click on the reset is going to remove the data the user has typed in into the input field.
Let's save it and let's have a look.
As you can see, we have the reset.
If I type anything here.
And I click on Reset.
As you can see, all the data is gone.
That's a beauty for reset.
The next input type is going to be a number, and for this one we have spoke about it.
But let me bring it back or let me do it again.
And this one is going to be of type number.
So this one allows the user to enter a value, which is a number.
As you can see, I can type number only and I can do the reset.
Let me add some line break as that.
Likewise, this one also here multiple times to have more line breaks.
So let's see.
Well, let me also add some lime bricks here.
Let's see.
I think is too much.
Let me use only one.
All right, cool.
The next hype is going to be what is called a file.
And where a file is going to help us to upload whether image or video or any file to a server for further
processing.
So I'm going to change this one to input type of file.
So let's see.
Let's refresh it.
And over here I can select a file to upload.
And let me add the line break here to line breaks.
I think you let me see.
No is too much.
The line breaks, I think.
Where is the number?
I need to put line break here also to have some spacing.
All right.
And the submit?
Yeah, I think it's okay.
Don't worry for the styling.
What we want is the actual logic.
So this one is submit.
And reset.
Q So let me copy one of these.
And the next type.
Is going to be hidden.
Think I'm messing up with a comment.
Supposed to be on this one?
Yeah.
The next one going to be hidden, as the name implies, is going to hide this impute feud.
Let's see.
Okay, let's refresh it.
For some reasons, we don't see the hidden or it's supposed to be in hidden like this typing mistake.
Likewise this.
As you can see, the input field is gone.
And what are the use cases?
Well, we often use this one to dynamically or conditionally display the input field.
Let's say that we want a user to apply for a certain job position.
And if your age is less than, let's say, 20 or ten years, then we can go ahead and hide some fields
from you.
So this one, we often use it based on some conditions.
All right.
That is a heading for you.
The next type is going to be color, as we have spoken about it before.
As the name implies, it's going to allow us to select a color that is a color picker as we spoke about
it before in the previous video.
The next is going to be data input field and this one's going to help us to select date.
And as you can see, we have date with day, month and year.
And we also have what is called date time looker.
And this one is going to create date and time picker input.
For this one, we can only select a date without a time.
But if you want to incorporate time, then we are going to use date time looker as date time dash looker.
With this, Let's have a look.
Let's refresh it.
And as you can see, we have the date and then the time that we can also select.
Perfect.
And we can also specify month if you want the user to select holy month.
We can do that.
Change this one to you Month.
Save it and let's see.
As you can see, the user can only select a month.
And if you want the user to submit only email, we can also do that.
So here the type as email.
And as you can see for this one is going to accept only email fails.
All right.
Let me add some lime breaks as that.
And then the month also.
Line break.
Good.
I think the libraries are too much.
It's okay.
Don't worry about it.
Yes, part of it.
The next type of input is going to be range.
So let me paste it here and change this one to range.
The range is going to create input field for numbers.
So when I save this one, as you can see, I can select any number based on the range.
If you connect H.M. to JavaScript, be able to know or see the number at particular point on the range.
The next is search.
And I'm going to copy this and paste it here and change this one to search.
And we often use this one to search a record.
So for this one, when I type something, as you can see, we have the icon here that we can reset the
search that we want to perform, and we also have time.
So I'm going to copy this.
And change this one to time.
And as the name implies, I'm going to have to select a time.
All right.
And weeks also, we can select days of the week.
And here, change this one to week.
Save it.
And let's see.
And here, as you can see, I can select the days of the week.
So this week, right.
So that is it for most of the input types and we are going to use about 90 of these.
So as we move on, you're going to put them into practice.
All right.
Catch you up in the next video.