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.