Welcome back to another awesome lecture.
We've spoken about the textarea element, but now I really want to get onto some cool controls and
those are known as dropdown controls.
And by dropdown I just mean a way for a user to select many different options without taking up much
space in the user interface.
Taking a step back, HTML has two broad categories or types of dropdown menus.
They've got the (1) select box and the (2) autocomplete box. And by autocomplete box we can either use the
autocomplete attribute or we can use the datalist element.
We're going to be discussing this shortly.
For now, just know that in both cases, whether we use a select box or autocomplete box, the interaction
is the same.
Once the control is activated, the browser displays a list of values the user can select between.
But first things first ...
let's discuss the select box. And there's an example of how you can create one.
As you can see, it's very easy to create.
It's created with the <select> element, with one or more <option> elements nested within it, each of which
specifies one of its possible values.
And if you require it, the default value for the select box can be set using the "selected" attribute
on one of the option elements.
So what this really practically means is that this option will be pre-selected when the page loads.
Let me quickly hop over to the console and show you. You know, the drill,
we're just going to start with a blank file here, and we're going to start coding.
Okay.
I want to wrap it in a form.
And how does this select box work?
Okay.
Well, it's very, very simple.
As I said, it's wrapped with an a select element. And let's just get rid of everything else, okay?
If we save this and refresh the browser, we can already see the browser's giving us a default kind
of selection box.
But nothing's in here.
So we can toggle it and click it, but nothing really happens.
So there we go.
That's the select element.
And in order to give the user options, we use the option element, right. Here,
we can just give options of colors, let's say red, and we can copy this down.
And of course we can do pink, blue,
I know it's not a color, but let's do some animals,
hippo 🦛, leopard 🐆,
rhino 🦏.
There we go.
So you can see that the select box width was adjusted by the browser, because it's got to cater for the
largest word in our case, leopard.
And you can see they are all our values.
Do you remember how we can pre-select one?
Let's say we want pink pre-selected.
How can we do that?
Right now it's just red, because the browser picks the first one in the list and just displays that.
Well, that's right.
We use the selected attribute. And it's a boolean attribute, meaning it's either there or it's not.
Let's just put it on pink, save and then look.
The browser automatically selects pink.
Pretty cool.
Just a bit of FYI.
Let's jump back into the lecture.
Makes sense.
I hope so.
There are a few more points I want to make about the select box.
The next point I want to make is that the option element can be nested inside an optgroup element.
"Well, why would you want to do that, Clyde?"
Well, with the optgroup element, you can visually create a group of values.
Another thing worth noting with optgroup is that it can only be used with the select element.
And like I mentioned, the reason you would want to do this is because the browser sets them visually
apart from the other options.
Often by being bolded and having them displayed at a different nesting level, so they are less likely
to be confused for actual options.
But words or words ... let me hop over to the console and quickly show you.
As I mentioned in the lecture, we can use this option group element to kind of demarcate headings
to our dropdown list.
How would we in this instance? We've got colors and we've got animals, so we may want to demarcate
one heading for colors, and one for animals.
Give it a go and see if you can do it.
(music playing)
Did you give it a go?
I hope so.
If not, don't worry,
we're going to do it now, together.
Let me remove myself
so I don't block any code.
Bye 👋.
Okay.
So how do we do this?
Well, remember, we need to wrap the options, or nest them, within an optgroup.
So let's create an optgroup element.
And let's take these three colors, and let's move them within it.
Okay, so now we've nested it within an option group. But if we save this, go to the browser and open
it up, it's just blank.
We get a blank option group 🙈 - that doesn't help us.
In order to actually give it a name, we need to assign it a label. And the label for this, because we're
dealing with colors
I'm just going to say is "colors".
Let's refresh.
Open it up.
And there we go.
So we can see it's bolded.
The user can't even select colors.
They know that it's a heading for the three colors below.
I told you, it's not that difficult.
Obviously we can do the same option.
Option group.
Group.
And we can bring these three animals in it.
So now we've nested it within an option group.
We give this a label of animals.
How's this?
We open it up, and there we go, a much nicer list. Rather than muddling up colors and animals all into
one,
now we've got demarcated headings.
How awesome.
Let's keep marching on.
The next point want to make is that if the option element has a value attribute, then that value will
be sent to the server.
But what happens if that value is omitted?
Well, in that case, the content of the option element will be sent to the server instead.
So the value attribute in a way is not needed, right.
But you might find a reason to want to send a shorthand or different value to the server than what is
visually shown in the select box.
And for that reason you may want to use one.
Ooh, I've actually just thought of a cool trick question.
Let me hop over to the console and ask you.
I just thought of a really cool trick question.
Okay.
So I thought let me jump back to the console.
Let's try and submit this form.
Okay, Look here.
So we've got our form, we've got our select.
Let's say we've got a button here of type submit, submit.
Okay.
I'm not worried about styling.
Let's go to our browser.
Let's expand this.
Can you see that pink is selected?
So it means when we click submit, it should submit in our GET request.
But what?
Can you see
the URL?
Nothing is submitted.
Why?
Can you figure it out?
Try and figure it out.
Why?
You know, if we select hippo, submit, nothing is being submitted.
Why?
Pause the video, try and figure it out.
I'll give you a hint.
It's only one attribute that we need.
All right.
I'll tell you the solution.
The answer is we need a name attribute, right?
Remember that everything gets sent to a server, and in order to get sent to a server, it has to be
sent as name:value pairs.
We've omitted the name, so the browser, the server, doesn't know what name, what information it all
is, so it kind of sign anything to it.
So we just need a name attribute.
Let's give it a name of, um, type, for example.
Now, if we go to the browser and we submit it works, the type of selection here is pink.
The other thing is obviously those value attributes.
I mean, pink is being submitted as pink because that's the actual text we have between the tags.
But optionally, we could have a value attribute here and it could be funky pink, for example.
And if we go to the browser and we submit pink now instead of pink being submitted, the value attribute
will be replaced instead
and that is, funky pink.
I know, I know I'm covering a lot, but I'm having a lot of fun.
We are almost done
my dear students, thank you so much for sticking with me.
The last point I want to make on the select element is ... common attributes are "size" and "multiple". By default,
the height of the select box is enough to display a single value, so the optional size attribute provides
control over how many options are visible when the select does not have focus - that's the size attribute.
Then you can also see I've put there the multiple attribute.
What is that?
By adding the multiple attribute to the select element, you can allow the user to select multiple or
several values.
How do they do that?
By using the default mechanism provided by the operating system.
For example, holding down command or control and clicking multiple values on a desktop.
Let me quickly show you.
All right.
We're back here.
You know this code very well.
This is the example we've been working through in this lecture.
I just want to show you what the size does.
So on the select elements itself, we can include an attribute of size.
And let's put size of, I don't know, 2. If we go to the browser, we can see now that what's displayed
to the user are now not one option, but two.
And we can keep going, right?
We can display five options if we wanted to.
Right?
And there we go.
It obviously displays the option group label headers as well.
Quite interesting.
So that's what the size does.
And then as I mentioned, we've got this multiple attribute, multiple, which is a boolean attribute.
It's either there or it's not.
You don't have to assign it anything, you don't have to say equals true.
We just include it there on the actual main element. We can go to the browser,
and now what's cool is we can maybe select leopard and rhino, and then submit.
And you can see if we look at our URL bar, we've got Leopard and Rhino that was submitted.
So there we go.
That's how it's used.
And I think this concludes the lecture.
I know we're covering a lot in a short space of time, but I kind of feel you're getting good now.
You know, we've we've covered a lot in this course already, and that's why I'm picking up the pace
quite a bit.
Hope you're having fun and I'll see you in the next lecture where I want to discuss now
autocomplete.
We've discussed the select box.
I want to now talk about autocomplete boxes.
See you now.