Woo hoo!
I'm super excited for this section, my dear students and I keep saying that the input is one of the
most powerful elements there is, and I think by now you should be starting to intuitively get a feel
for why I keep saying it, because there are so many different things we can do with the input type.
And in the previous section we spoke about the original input types that have been with us since ...
"pa fell off the bus" - that have been around for a very, very long time.
And this section is exciting because now it's time to look at the newer input types.
"Okay,
Clyde. Well, what are they?"
At a very high level now, these are. We're going to be going through each one individually in more detail.
But before we do, here's a very, very quick summary.
First, let's look at week.
Week is just the day control that allows you to pick a week.
And by a week I mean a week and a year date.
But there's no time zone.
There's no time.
So that's the week. I'm going to just quickly go through these. Color,
very very intuitive.
It allows you to open up a color picker and choose a color.
Then we've got the type of date, and believe it or not, that just allows you to pick a date again with
no time, and it opens up a date picker on the browser.
There's an example that you can see.
Then we've got datetime-local and it's similar to the input of type date, the one we saw previously,
but this time you do have the ability to add time as well.
Pretty cool.
Then we've got this cool email type and it looks like input of type text.
There's an example you can see on the screen. It looks the same as input type text, but it does have validation
rules and triggers the appropriate keyboard for phones.
Then we've got month. Again, it lets the user select a month and a year with no time zone. And we've got number.
Again, it looks very similar to input type text until you hover over it.
You can see those two arrows - up and down.
It's a control for entering a number, and it's got default validation, aka you can't enter text,
and of course the appropriate number keyboard pops up on a phone when you have this type.
So that's number.
Then we've got range.
Range is pretty cool.
It's a control for entering a number where the exact number doesn't really matter.
You often see these on property websites, for example, when you're searching within a price range,
you can define minimum and maximum values very, very useful.
We're going to be seeing that later.
Search is another interesting one.
It's basically just a text field used to enter a search term.
And the major difference between this and the text type, is that there's a delete item that displays that
clears the input box.
We're going to be seeing that later.
Then we've got the type of "tel", and that's just a control used to enter a telephone number.
It opens up a telephone keypad on a phone.
Then we've got type of time, and that allows the time to be entered.
Very, very intuitive.
And finally, we've got this URL.
Again, it looks like input type text, but it has inbuilt validation rules and a relevant keyboard
again will display on a phone.
Wow, and there we have it.
Those are the newer input types.
We've looked at the originals.
Now we're looking at the newer types introduced to us by HTML5, and this was a very high level
introduction to the different types.
But in the next lectures, in the upcoming lectures, let's dig deeper into some of these types.
See, you now.