Duration: 16 minutes
Summary: In this video we are continuing our discussion of user input. We established the form, and we are going through the different types of input elements, and their associated properties. For today’s tutorial, we will be talking about the different types related to dates: week, month, date, datetime, datetime-local, time. Every one of those controls will have id and name and they are associated with a label. We will be specifying a default value. In some cases like the date, we have more properties to control the min and the max values that the user can enter. One type we will also discuss is the url. We will test these input fields in different browsers and see how they will behave when a browser does not support that specific type.
Technology Used: HTML5 and Visual Studio 2010
Keyword: HTML5, Visual Studio 2010, meta, header, input, type, label, tabindex, week, value, month, date, datetime, datetime-local, time.
Transcript: Welcome back, everybody. This is Ayad Boudiab. I am a senior .net application developer, and we are continuing our discussion on HTML5. We have discussed in a few videos already, and we talked about audio-video and some of the input controls that we can work with. We looked at different types, including, for example, email. And we saw how we can specify the different properties for the email type and also, for example, how we can work with the simple text where the user just types in regular text but not specifying any type. We also looked at type of number, where we can specify the minimum and the maximum. So, the user can roll through the list and choose what number they like. And also, we specified the type of telephone number, and we specified the place folder and the pattern that we'd like to use so the input from the user will be validated against the pattern.
We are continuing our discussion today and will talk more about those types of different input controls. In this case, we'll talk about the URL, so when I specify a type of URL, how I can work with that. Well, normally that's what we do. We just say input and we include the type. The type in this case is URL. For the type URL, I can specify again, the name, make it equal URL and also the ID URL. You can give it any name of the ID you want. In this case, we just simply say URL. And the place folder, so the user would look at that to specify, or have an idea of what type of format you are using. But please be careful here. I already specified that in the previous video, and I will state it again. When you specify the place folder, your input will not be validated against that place folder value. If you need validation, you are comparing against the pattern. So, you specify the pattern, and from the pattern the code would tell whether this something matched what you are looking for or it didn't. The place folder is just as a mark for the user to know what kind of format we are looking for. So, in this case, for example, I would say the place folder is HTTP [inaudible 02:26] // and I can specify www.http://mrbool.com .com. Okay? That's the format that I want the user to follow. Now, the title again, this helps me when the error message comes up. The title would say this is a URL, and you can specify the format you'd be interested in. But that's enough for our case, and don't forget the tab index. In this case again, it's no a big deal because there is only one. But it's a good idea to get into the habit of typing the tab index so the user will be able to smoothly tab between one input type to another. So, I specified the type. I specified the name. I specified the idea and the place holder, title and tab index.
Then, on the top here I'll create a label, and that label I'll make sure it's for that URL. It says in here, enter URL. That's for the URL. I can right click, if you are in the browser. I've got the place holder, http://mrbool.com . I hover over it. It says to just say URL, and then I should be able to submit, and I'm not validating against anything. So, it's not following a specific pattern. So, I should be able to submit with no problem. I also can say HTTP.com// www.myvideo.com, something like that, and then I submit it and that is showing up here in the URL. So, that's pretty much it. We've seen this before. It's standard on how we can work with the different types. This is a URL that we're working with. Load it again. You see that it has the actual place folder, nothing fancy about it. I can simply take that, and like we've done before, try to load that in Opera. You notice in Opera it works fine with the place folder and everything and also load that in Firefox, and you will see that once again, it's there with a place folder and everything. That's how we can work with the URL. That works nicely with the other email and the telephone and so on. Don't forget to specify the pattern, so you make sure that the user is following the pattern you are interested in. Now, if I need to move into my second type, which is the week. So, the user will be able to specify what week of the year it is. Remember we have about 52 weeks, so we go from week one, week two, week three and so on. In this case, I have to specify, I have to change my label and my input boxes. In this case, the label is for, let's say, we called it "training week", the week I'll be going to training, and here say "training week". This is the label for the specific name and ID.
So, specify what we need for the name and the ID, but again the type is different in this case. Because the type should be week, and if you say equal and W-E-E-K that would be the type, week. So, name, called it "training week" and the ID would be "training week". I don't want the others. Let me remove those. I keep forgetting to close my tag, so here it is. In this case, I can specify the value, and the value for this week, let's say, for example, this is equal 2012, and that would be dash week 5. This is week 5, 2012. Let's go ahead and save, and we hit the submit button and the type is week. Let's go ahead and view that in the browser. You notice that when I load that in Chrome, it gave me a text box. Well, I was expecting something different, but would this work in Chrome? That's a good question. Let's see how that will be handled in other browsers, for example, Firefox and Opera, and see how that works. I could be mistaken, but I thought it was working fine in Chrome.
Well, anyway, let's go ahead and take that URL and try to load it in Firefox. And again it's a text box. So, nothing different. We know what it's defaulting to. If it doesn't know how to handle it, it defaults to text box. It looks like so far we've got Chrome just gives it to me as a text box. I have Firefox also gives it to me as a text box. Let's go ahead and load Opera and try to load that with the URL, and here it is. Well, we noticed then that Opera is the one that handles it properly, not Chrome or Firefox. Because it gave me some type of drop-down, and then I can select something about the week. It allows me to select what week I want by giving me a calendar. So, Opera knows how to handle that properly, but Firefox and chrome just give me a text box that I can type it in. Here's the week that I'm interested in, so it says 2012, week 14. I can move through the months, and then I can select other weeks, week 24, 2012, and then I can submit my data.
So, Opera handled this properly, but the others don't. Let's go ahead and close that, and let's see what other types we can work with in addition to the week type. In addition to the week, we have the month that we can work with. The month, let's say, for example, I have a travel month. The month, I'll be traveling for work, so travel month. That's the label. Let's change this one accordingly, travel month, and take that for property and specify that for the name and the ID. So, this is a travel month. In this case though, I would need to change this equal to month. So, now I have the type as a month, the name, travel month and the ID is also travel month. But, of course, the value in this case will be changing. We don't have week five anymore. 2012, let's say, this goes to 05 for May. So, we specified May in this case as the travel month, let's go ahead and save that. We have to hit the submit button. We already closed the tag properly, and let's go ahead and preview that in the browser.
When it comes to Chrome, again it gave me the month as a text box. It didn't know how to handle it, so it gave me 2012-05 for May, and nothing else. So then, Chrome defaults to the text box format. I'll go ahead and load that in Firefox. Firefox also gave me the text box option, so therefore it doesn't know how to handle it. It falls back to the basic type, which is type text, and I should be able to enter the text that I'm interested in here. Again, one more time. Don't forget to validate the user input because the user could mess this one up, and it still makes it back to the server. You don't want that to happen, so make sure there's some validation before the user will be able to submit the data. Let me go ahead and go to Opera and type the URL. Opera gave me the correct month. You notice here the whole month is highlighted. That's the month of May. That's the one that I defaulted to. And I can move back to the month that I'm interested in and set it, for example, to October. That's in 10/12/10. That's the month of October. So, again, when it comes to the type of month, only Opera handles that properly.
Now, do I have other types that I can work with? Let's see. This is the month. Let's go ahead and close that, go back over here, and let's work with the date type. Again, let's call, for example, this one to be the training date. The "training date" that's the label, that's the name, and that's the ID. And let's call this one again, travel date or, sorry, "training date." We need to specify the type equals date. You notice that showing up there, and then I can also give it the default value for the date.
For example, let's go with 2012, and then let's say, for example, 04-01. I'm sorry I didn't mean the equal sign there; -01 so that would be April 1st. So, we have 2012, 04-01, that's the value that I'm interested in, but the nice thing also about the date is that it allows me to give the min and the max. So, I can specify the min date to be 2012-, for example, 01. That's the minimum one and the maximum date to be equal to 2012-12 31st. So, I only want those for the specific year. The current value is 401, minimum is 11 and maximum is 12 31st. Let's go ahead and load that in the browser. Again, Chrome gave it to me as a text box format like it did with the others. So, in that case then, it doesn't know how to handle it. Let's go ahead and copy the URL, go to Firefox like we've done before, put that there. Again, Firefox gave me that file as input instead of a date, so it doesn't know how to handle it either. It's not implemented there. I can go to Opera, and in Opera I specify the URL and it gives it to me as a drop- down notice it defaults to 04-01, like I specified in the value in the property. Remember we had that in the value. Let's go back to that code. I specify that in the value to be 2012-04-01, and here's 2012-04-01 showing up. Now, let's go back through the month. I have January. It won't let me go back any more, because I specified the min date to be 01-01 of 2012. And let's specify going back after December. It doesn't let me do that. It doesn't let me go with the drop-down because I have specified that 12 31st is the maximum, so therefore it doesn't let me go beyond that. Of course, I can specify any date in between, but I cannot go beyond the minimum and the maximum, and, again, this is only handled properly, right now in Opera.
As you can see, there are very helpful types within the form for HTML5, and those types are handled differently in different browsers. The nice thing is that they don't crash if they're not handled, they just default to the text format. But it will be nice if they can be handled in the other browsers like they are handled right now in Opera. Hopefully, we'll see that very soon. In the future there would be more additions to the HTML5 in those different browsers. There are a lot more to come. I'm going to discuss the rest of the input types that we can work with, and we'll move also to other subjects within HTML5. So, please stay tuned. Thank you very much for listening. I'm Ayad Boudiab and you take care.