Let's continue with HTML.
Forbes And in this video, we are going to create multiple and single select.
So let's get back to Visual Studio Code and explore more inside the forms.
I'm going to create one file and I'll call it a select.
Remember that select is also part of form input.
All right, So here you go.
Let me scaffold the template and I'll call this one as multiple and single select.
All right.
So over here as multiple.
And let me underline it and let's open it as that.
So let me show you how we are going to make use of it.
And let me add a comment as multiple select.
For the meantime, we are going to work with the single select this one.
Help us to choose from options.
So let's see how I'm going to do it.
So we bring in the label to give more description about what we want the user to choose for.
So for this, we want the user to select from his or her favorite programming languages or frameworks
or libraries.
So I will say select.
You are based programming language.
So we bring in select and close it as that and for select are going to provide name attribute.
For the meantime, we are pretending or assuming that we are willing to send the data to back and we
need to provide the name attribute.
And here is about languages, that is programming languages.
If you get to back end development to more specific MongoDB, we are going to use this one as a property
on a model.
But for the meantime, let's assume that then inside the select we are going to provide the options
that we want the user to choose from.
And it goes like this We provide the first programming language as JavaScript.
With this one, save it and let's have a look.
As you can see, we have JavaScript being here and I want the selects your programming language to be
on top of the select with this one.
Can you tell me the kind of element that is for the label and then the select looking at the behavior
that is the arrangement from left to right, but not on top of each other?
Can you tell me?
Well, the answer is that the label and then the select are inline element.
That is why they are moving from left to right.
So I want the label to be on top of the select so I can put this one inside diff so that I'm going to
have.
A block level element, and I have it as that.
For this one, we are not done yet.
The most required attribute is called value.
And why is a purpose for the value.
The value that you pass in here is what is going to be sent to the server, but not this.
This one is for the user to know what the user is trying to submit.
So for the value we can make use of JZ for short or we can deceive the user by providing something like
mango.
So here we are allowing the user to select programming language, but at the back end we are saying
we want mango, but this is not the proper way of doing it.
Make your value and then the text to the user be more descriptive.
So here I'm going to use JavaScript, then I'm going to copy this.
And the next programming language I'm going to use is Java.
Java and JavaScript are different, and I'm going to use Python.
And I'm going to use the database here as MongoDB.
Even though MongoDB is not a programming language, but let's assume that and I'm going to use a library.
That's my favorite as React JS.
And.
Another favorite library or framework is Express Jazz.
Then our best friend is going to be.
Can you guess Node G?
So let me bring Node.js at the top because I love Node.js.
So this one, when I save it and I click on this, as you can see, we have the options to choose from.
But for this one I can only select one instance of programming languages.
Let's say that we want the user to choose from these options based on his or her experience.
So for me, I'm good at Node.js, JavaScript, MongoDB, React Experts.
So how are we going to allow the user to select multiple options?
That is where we will talk about what is called multiple select.
And I'm going to copy this and paste it here and change this one to multiple.
Select.
So how are we going to do it when I save it?
It looks the same, right?
Let me add some line breaks.
I's that good.
So it looks the same.
But the cool thing is that if I pass.
Attribute called multiple eyes that now let's have a look.
As you can see, the behavior has changed.
And when I press command on Mark I can select multiple instances and I think for window you can press
control and then you click on what you want to select.
So guy, this how we can create multiple and select box in HTML.
Let's continue on into next video.