This is where we lived in the previous video by creating a simple HTML form.
In this video we will talk about attributes of form inputs.
And if you are new to forms, I advise you to take some notes as we proceed, because forms are really
important concept.
All right, so I'm going to duplicate this.
And I'm going to rename this one to form a tribute as that.
And let me close this and open this one instead as that.
So let me change this one to.
All right, So.
The comment goes like this.
All right.
So as it stands right now, we have some problems, like I have explained before.
If you want the user to submit some specific data, how are we going to do it?
And we are going to use the first attribute called type.
The type attribute, specify the type of input element whether you want the user to enter a number or
password or text.
So let me remove the button and then the edge input field.
And let's start with the first input field.
And for this, we are going to specify what is called the type attribute.
So for the input we can pass in couple of attributes and one of the required attribute is called type.
As you can see, when I make use of type, we have all these types, the color date, email and our
explain most of these ones.
If you want the user to submit a text, we are going to use a type of text.
With this one, we are specifying that the user need to provide a text.
So when I save it, nothing seems to be changed by behind doors or behind the scene.
We have improved our form.
The next attribute is called name and name is used as the key in the data sent to the server when the
form is submitted.
Well, if we connect our client side as a HTML to backend or server.
And when you click on a button, the value that you pass into name is what is going to be sent to the
server.
So the name host the value that we are sending to the server.
Because if you make a request, for example, if we submit our form, the back end is going to process
our data.
And for the back end to be able to know the kind of data that we are sending, the back end will look
at the name attribute and the value that it hosts.
So if you are familiar with back end development, we have access to the data as requested by DOT name.
Don't worry, as you move on in this code as a back end development, you better understand what I'm
referring to.
For the meantime, understand that the name holds the value that we are sending to the server.
So for the meantime, let's remove that.
The next attribute is the name, as I have spoken about.
So let me bring it here so that you can make reference to it in the future.
So I'm going to copy this.
And here as the name attribute.
And for this one I would say password.
And the type here is password and the name is equal to the password the user is sending to the server
to be able to look in.
So the name host the value for the password or the value.
The next attribute is called the value attribute.
So I'm going to copy this.
And after the break, I would say the value attribute.
So what is the value attribute?
The value attribute specifies the initial value of the input element.
Let me show you.
For this I want to accept number.
And I'm going to provide value and I'll provide value and I will say 200 when I save this one.
Let's have a look.
As you can see, it has provided initial value for my input field.
And I believe you've seen search input before.
All right.
And with the type of number, as you can see for this, I cannot type in any text on my keyboard because
I specify number as a type, meaning that I want the user to enter only number.
So when I press any number now it works.
When I refresh it, I have my initial value.
That is it for the value attribute.
The next attribute is called the check attribute for checkbox.
So I'm going to copy this.
And I will say.
CheckBox attribute apart from the type, apart from the number and text and password, we have different
type core checkbox and let me change this one to checkbox and let me remove this one when I save this
one.
As you can see now, I can check the next one is going to be the required.
What is a required attribute?
So let me copy this and paste it here and call this one as.
Required attributes.
Let me change the color for my comment as that.
So I will say required.
And let me explain to you the required attribute specify that the input must be filled before submitting.
Meaning we are making this one as required for it, meaning that the user cannot submit the form unless
the user provide the value for the data that we want user to submit.
So when I say this one is number and when I provide required.
Which is true.
And when I saved this one.
All right.
When I have a burden, when I click on that with that providing this, I'm going to have some error,
meaning that this input is required failed.
That is it for the requires.
So the required is used for validation and it is called client side validation.
And we also have server side validation.
As we move on, you better understand what is called the server side validation.
The next attribute is going to be placeholder as a placeholder attribute.
What does that mean?
The placeholder attribute specify a shorthand that describes the expected value of an input field,
meaning that it provide more information.
How the user should submit the data.
So if I remove the label here and when I save it and let's have a look, as you can see this input field,
you don't know what it does, do you get it?
So if you use Placeholder as a placeholder and you provide some information about this input field,
I will say enter each.
Right.
So when I save this one, as you can see, we have the information being inside the placeholder.
This value will not be sent to the server by.
Instead, it gives more direction how the user should provide the data.
When I type in number here, you can see that it is gone.
Apart from the placeholder, we also have other attribute as minimum and maximum for number input.
So let me put it here as.
Minimum and maximum of number input.
Let's say that we are developing a donation platform.
We want users to make donation.
And we can specify that we want minimum amount of $10 and maximum of $100.
If we don't provide those minimum and maximum, a user can pay $1.
Right.
So it's also a way of putting in some validation.
So let me remove the required here and when I make use of minimum.
And I would say the minimum here is going to be $10 and maximum as $100.
So I would say minimum and maximum as that.
Or we can use H Let's say that we want a certain age for a certain application.
And if your age is less than or more than 80 years, you cannot submit the form.
So we can use the maximum and then the minimum.
So for this, when I type in zero, as you can see, even though it worked, but when I click on submit,
I'm going to receive an error.
So that is the beauty of the minimum and maximum.
And the next one is going to be the step attribute.
So let me copy this and paste this here and change this one to step attribute as step.
As the name implies.
Let me show you so that you better understand.
Uh, step.
And it goes like this I'll provide type number and remove this one and say step of two.
When I save this, let's have a look.
When I click on this, I can see it start from two and then I'm expecting this one to move to three.
But it moves to four.
And as you can guess, six, eight, ten like that.
Meaning we are moving two steps.
If I change this 1 to 10, meaning it will start from ten and increase by ten as that.
And you also have color attribute, and I'm going to be a type.
So for the type we have different type.
So let me say color.
And here, if I change this one to color, we move this one.
Let's see.
As you can see, we have color.
And I can also.
Allow the user to submit date.
So I will say date type change this one to type and this one is color type as that.
And if I want date.
Change this one to.
Oh, I have the date here already as date and chain.
This one to date.
As you can see now, I can make use of date.
And if I want a user to upload a file, here is going to be file type and the value here for the let
me save file.
The value for the type is going to be file.
And as you can see, I can choose a file to be uploaded.
And let me add the input.
And here I can specify that button here and provide a value I submit.
So this one behaves like a button.
As you can see, I can click on that to submit.
Well, before we can submit this data, unless we connect to a server or backend, but for the meantime,
understand these basic and common attributes.
All right, let's continue in the next video.