Duration: 20 minutes
Summary: In this video we are continuing our discussion of user input. We will wrap up the discussion with datetime, datetime-local, time, meter, range, datalist, and color. It is very helpful to have input elements that support date and times without using some kind of additional libraries. In this case we will see how the datetime and time elements work. We will notice though that their support is currently limited to Opera. Other browsers simply display a textbox. We have the ability to specify datetime, datetime-local and time. We will also see how to use the meter and the range elements. These elements have min and max values that limit the user’s selection and therefore eliminating the chance of out of bound errors. When using an input of type text, we have an option of specifying a list of values that will display to the user to select from. This list is identified in the datalist tag. Finally, we will see how the color element works so we can choose our favorite color.
Technology Used: HTML5 and Visual Studio 2010
Keyword: HTML5, Visual Studio 2010, meta, header, input, type, label, tabindex, datetime, name, value, datetime-local, time, meter, range, datelist, list, and color.
Transcript:Welcome back everybody. This is Ayad Boudiab. I'm a senior .NET application
developer, and we are discussing HTML 5. In the previous videos, we started
with some of the elements on the user input controls that are new to HTML
5. We've been discussing each one of those at a time and we tried to see
the element itself, what type it is, its properties and how we can work
with it loading it in different browsers specifically Chrome, Firefox and
Opera. We will continue the discussion today. I'd like to talk about the
actual date/time, date/time-local, time, month, range, and probably some of
the data-list that we've seen before and if we've got time, we'll talk a
little bit about the color. So, let's go ahead and get started with those
controls. First of all, let's start with the date/time. So when I go back
over here inside the form and I declare my input element, I can specify the
type and that type could be datetime like you see here. For this one, I'm
going to call it the trainingdatetime, so I'm going to give it that
id=trainingdatetime and the same thing for the name and I'm going to copy
that and that will be trainingdatetime.
Now, as far as the value, let's see if we can give it some type of value
that we can work with so I'll specify that value equals and let's go ahead
and close the tag before we forget. The value, let's go with 2012 and that
would be 0401 and let's give it some time that's 8:00 and that's 8:30 and
the seconds are 00 and let's make that as UTC. That's my value for this
specific date/time type that I just declared. And don't forget that at the
top, we'll have to specify the label so let's create our label and that
label for, we close it, so we can say Training Date/Time and we copy the
trainingdatetime id and we put that for so that label is for that input
type below. Let's go ahead and load that in the browser. And I see that the
Training Date/Time in Chrome showing up as a text-box, a simple text-box
that it defaults to when it doesn't know the implementation for that
specific type. In this case, Chrome doesn't display properly when it comes
to date/time. That was in a text-box I need to enter some value and
probably submit the data. OK?
So, let's go ahead and take this URL and do what we always do with the
other type of input controls, let's put that in Firefox. Firefox has the
same thing. It's a text-box, I give you the information, you fill it in,
you do whatever you want with it and then you can submit it. Let's go ahead
and load that in Opera. Opera handled that differently. It said, give me
some type of input that I can put in. I can specify, for example, 2012-04-
09. I can select that from the calendar, that's today's date. I can specify
another date. I can change the time, right, for the minutes and seconds and
so on, and it's UTC is put outside. So then Opera understands it when it
comes to date/time object but the other browsers do not. Again, since they
default to text-box, you need to handle their validation properly.
Otherwise, you will end up with invalid data.
Now, that's about it in terms of the date/time. Now how about if I wanted
to work with date/time-local. Because if you notice here, if I remove this
value, make it equal and here's date/time-local that I'm talking about so
that id is datetimelocal, that's the type, trainingdatetimelocal, copy it,
paste it in the name and paste it in the label for on the top. OK? And to
specify the value, I am going to remove the UTC and simply go with what I
currently have. OK? So, 2012-04-01 and that's 08:30, we specified the type,
the id, and the name and also we specified the label but this one says
trainingdatetimelocal just to be more specific.
So, if I tried to load that again in the browser, we understand that Chrome
does not handle that properly. It'll just give me a simple text-box So
would Firefox, text-box If I go to Opera and the request is incorrect, so
let me go ahead and make sure that I typed the URL properly, so Training
Date/Time Local and it gave you the drop-down as usual but there's no UTC
here so I can change that, work with it, click inside that box, mess with
those values, and see the same here, you can change those values. So Opera
handles that really well in terms of trainingdatetime-local or the type
date/time-local that's what I'm talking about.
Now, let's proceed and see what else we can work with. The other thing is
let's see how we can work with just simply the time. So in this case then,
my type is time. So for this time, let's say for example, it's the arrival
time of the flight. That's label for this input so I'm going to place that
in the name and the id and the value in that case would be only the value
for the time. So the date is removed. Let's make this one as 09:30 for
example and that will be the label for time so arrival time and let's
remove that. So I have arrival time, I have input, the type, the id and the
name and the value and the Submit button.
Go to Chrome, simple text-box and let's go ahead and continue here quickly
and then I get here in Firefox, same thing. Go to Opera and we get that as
the simple time that we can change as we see fit. So we know that Opera
handles all these properly. OK? So that's about the date/time, date/time-
local and time.
Now, let's see what else we can work with. The other thing that I'd like to
talk about is the type meter and the range. Let's go ahead and, I'm not
sure why this is taking some time, OK, so let me go ahead and remove this
input and let's work with the other types. So we covered the time. Let's
see how we can work with the meter type. For the meter, I'm going to give
it the id to be months and I'm going to give a minimum which is going to be
1 and since I'm going to display the months, I'm going to give it a maximum
and that would be the value 12 and then I'm going to give a specific value
that I'm working with currently and let's give them the value 4. So, id,
min, max, and the type is meter. OK?
For example, I could give it the tab-index but we know that since it's the
only one there, I'm not going to bother adding the tab-index One thing that
you might be doing and I did it before and it gave me an error message when
I tried to validate my page and I couldn't understand what was going on at
first. But if I put that element like this and I try to take the content
and try to validate them in an HTML 5 validator, it would not work properly
because we have to close the meter in the following way. Completely closing
the tag, not like we use to work with input element. So make sure you do
that and then you get the meter, you specify the id, so this is the label
for the meter and we can say here for example, months, and we have the
meter element underneath. Now, let's try to view them in the browser and
see what that gives us. So the meter shows some type of progress that has
happened. So these are the months going from 1 to 12 and we are in the
month 4 so you see how much we've covered already. So this is a nice way of
displaying where we stand. And if I take the same URL and try that in
Firefox and it didn't understand it, right. OK? Let's go ahead and try that
in Opera. Opera will also give me the value correctly so it works in Opera,
works in Chrome, but not in Firefox, and that will be able to give me some
type of progress of where we stand.
Now, let's see what else we can work with. Let's go back to the controls
and then we'll work with input type range which obviously as the name
implies, it gives us some type of range that we can work with. For that
element, let's remove the meter and let's specify the actual input and that
type would be equal to range like you see here and id equal to also range
and let's give it the name as well equals range. So I specified the type,
the id, the name, and let's give it some min 1 and some max and that would
be something like 20 and we don't have to bother with the tab-index so in
this case, then, I'm specifying a type of range with a minimum of this
value and a maximum of that value and an id and this is for range and let's
specify here range.
If I take this and try to view it in the browser, it gives me a certain
range that I can work with, right, so 1 to 20 and I can change that value
the way I see fit. That's in Chrome. If I try to load that in Firefox, it
doesn't understand that. It gives me a text-box so that I can enter the
value and then if I go to Opera, and try to preview that, it gave me the
range but also with marks underneath so I can have a better view of where I
stand, right? So I can change those range values the way I see fit. Now
that way be nice because you are controlling the user on where they can go
with those values, OK? So that's how the range actually works.
Now, let's go with the other elements. Let's see how we can work with a
data-list and how we can work with colors. For the data-list, let's go
ahead and remove this input type, and well, instead of removing it, let me
just move some of the elements and specify the range to be text, I'm sorry,
the input is text and let's give it an id. The id equals language and the
name will be language as well. And that will be for language and let's
specify language here so that's the name, the id, and we've specified the
type. We need to give it the list of options that we have available for
this input type and you will see what I mean in a second. This is not
making much sense for now.
So let's go ahead and add a break in here and well, I could have used the
same break, it's OK. In this case, then, I'm going to specify my data-list
So here's my data-list, the list of values that I can have for this text-
box, id. Let's give it the id to be langs because that's the languages that
I'm interested in and let's give it some values. So, this is the data-list
and here are the values for the data-list So, in here, I can specify my
options and my options instead of you seeing me typing them, let me go and
ahead and copy them over. Here are my options for this specific language. I
have C#, Java, C++, and HTML5. These are the options within the data-list
The data-list name is langs, our id is langs so this is the list of options
that I can work with.
Now, as far as the input box is concerned, it's type text, id language,
name language, nothing different in here, right? We see this type of text
before. But what I can also do is I can give it the list to point to that
specific list of langs that you see in here. So now, I'm tying together the
data-list with all its options to this text-box using the list property for
the input box. That way, when I display this list to the user, the user
will be able to see those types of options so they can select from. OK?
Let's go ahead and save this.
Let's try to preview it in the browser. It shows up in here in Chrome and
if I need to type something, so far nothing is showing up, right? Nothing
is showing up in the list. How about J, nothing shows up on the list either
so let's go ahead and try and take this and put this URL in Firefox and
these are the list of languages, click inside the box and nothing shows up.
Start to put in some of the values and here is C# and C++ showing as some
of my options. So if I try to type something, for example, when I click
inside the box, I get the list of all options, right? When I type C, only
C# and C++ shows up. So, it's a helpful list of what options I can select
from. Now, let's go ahead and paste that also in Opera and type inside and
I get the list of options that I can work with, C#, Java, C++ and HTML5.
Then I can make my selection of course. Now when I come to Chrome and try
to click inside the box, nothing is happening. I'm not sure if Chrome is
freezing or actually it doesn't work because it's not allowing me to click
inside the box. Now, it's active again. It just is not giving me the drop
down list of options that I can work with so it doesn't seem to be active
as far as Chrome is concerned.
Let's go ahead and go back to one more thing that I'd like to talk about,
and that would be for the type color. So let's remove the data-list I don't
need this one anymore. And let's specify an input type in here that's of
type color, and the id would be preferred color, that would be the actual
id and the name. There is no list in here. That used to be for the previous
control and then the language here for that would be preferred color and
here Preferred Color, right? So I have an input of type color. It has an id
and a name and let's see if I specify certain value it'd be something like
green if this would help me with anything. But it could be that this value
would be provided as a red-green-blue format, different RGB format. But in
this case, though, I have the input that's of type color, right? And above
it there's a label for that specific input control.
Now let's see it. Try to preview that in Chrome and see how that displays.
It gives me a text-box that says default value green. Well, let's go ahead
and before I do this let me copy the actual URL and try to put that in
Firefox. Same thing, text-box and green. Let's try to go ahead and put that
in Opera and it gave me a drop-down and I can select a specific color that
I can work with. And for example, let's go with the yellow or I can say for
example, gray and so on. So it gave me a drop-down and I could also select
other colors that I can work with and it would give me those options to
change the color that I could be interested in, so it seems to work in
Opera but not in the others. So as you notice, the experience with working
with all those input controls is very changing so much between different
browsers. So you have to be careful on which browser you're working with,
who's the user, or what kind of browser they're targeting and then if this
works in one browser and doesn't work in the other, how are you going to
handle it. You know that everything defaults back to a text box where a
user can enter their values but you just need to be careful on testing that
on different browsers and making sure that everything is working properly.
OK, now I'm going to move to another subject within HTML 5. Please stay
tuned for the upcoming videos. Thank you very much for listening. I'm Ayad
Boudiab and you take care.