Now, the last element,
the last HTML element I want to have a look at
is the dropdown field.
Which is also often a good choice,
if you have multiple values to choose from,
and you will want to give the user a
dropdown instead of radio buttons,
maybe because it's a long list of values
or simply because you prefer a dropdown.
For this let's say right here, after this horizontal line.
We want to render, we want to display such a dropdown.
And we do this with the select element.
So that's yet another new HTML element,
the select element then takes different options.
So it's a bit like the unordered list with the list items
or the ordered list with the list items.
We have a wrapper element,
the select element,
and then some child elements here,
the option elements.
Now the option elements contain the text,
which will be displayed in the dropdown
for the different options.
So let's say here again, with a label,
we want to let the users select a value.
Let's say the favorite color, for whatever reason.
Then here we could have blue as one option,
we can have black as one option,
we can have red as one option,
and whichever other options you want.
Again, we should connect the label with
the for attribute and an ID,
and here I'll save favorite color
and set the ID equal to favorite color.
And if we do that and save this,
we now got this dropdown here,
where we see our different options.
Now drop downs are a bit more difficult to style because
they are more complex because we have
this overlay which opens up,
but we can still apply some basic styling.
And I want to use the same styling as for my other elements.
So I'll not just select input and text area here,
but also the select dropdown.
Not for focusing though,
just for the general styles.
And with that, now we've got this dropdown here.
So now we can select this,
just as with all the other input elements.
We also should give it a name to have this identifier,
which can be used on the server.
And here the name is not added on the options,
but on the select as a whole,
which hopefully makes sense because
we have one option that is selected in the end.
Just as for the radio buttons,
we used the same name for all the buttons here.
We use the same name for all the options,
just not by adding it to all the options.
But since we have this wrapper,
by adding it once to that wrapper as a whole,
and here I'll then have my favorite color,
or whatever identifier you want to use here.
Now, if we save this,
if I select blue here and submit this,
you see favorite color equals blue,
is part of the submitted data.
Now by default,
the value which is submitted here
is the value you have in your option.
If you want to have a difference between what you display to
your users and the machine readable
value that should be sent to a server,
you can add a value attribute to the different options.
And here you could just write blue like this,
and then you could have a lengthier text
of my favorite color is blue here.
Which is typically not what you want to send to a server,
There you want to have short identifiers like this.
So you can set values like this,
and then it's these values which will be sent to a server.
It's what you have between the opening
and closing option tag that will
be displayed to the user though.
So with that, we now see these options,
but if I select my favorite color is blue
and click submit, we see just this blue identifier,
which I entered as a value,
is sent to the server.
And that's this select HTML element,
which is basically an alternative to the radio buttons.
If you want to look at it like this.