Duration: 19 minutes
Summary: In this video we proceed with our discussion of HTML 5. In the previous video we discussed the structure of an HTML 5 page. This could serve as a template for us every time we build an HTML 5 page. In this case, we start with the video tag. We added a header and footer to the page and we placed a video tag in between. We loaded a video and started changing the properties to see the effect on the video. Specifically we talked about autoplay ,loop, and controls. Then we moved our attention to the form and user input controls. We saw how we can add an input of type text and search. We changed some of the properties like required, autofocus, and placeholder. We experimented with these changes on Google Chrome, Firefox, and Opera.
Technology Used: HTML5 and Visual Studio 2010
Keyword: HTML5, Visual Studio 2010, meta, header, video, source, autoplay, loop, controls, input, type, search, label, required, autofocus, placeholder, title, tabindex.
Transcript: Welcome back everyone. This is Ayad Boudiab. I am a senior .Net application developer, and we are here continuing our course on HTML5.
If you recall from the previous video, we discussed the structure of an HTML5 page, and we also talked about audio. We remember that the HTML5 doctype is very short. It simply says, doctype and HTML. With HTML we only specify the [lang] being English, we didn't have the XML namespace, and we only added the meta tag with the char set being UTF-8. Then we continued with the body of the page. In this case, though, we talked about audio, and we set a header on the top and then we talked about audio in the properties, we set the source and we loaded the audio. One time it was an MP3 and the other was a WAV file.
Now we need to continue our discussion to talk a little bit more about audio and video and then some of the other elements that we can have, for example, user input. The HTML5 has done a lot of work as far as those user inputs are concerned. Now I have something specific to email, specific to URL, something specific to some dates and some ranges. I know we discussed some of that back about a year ago. But there is more detail and more support to them these days in the browsers, so we need to experiment with this a little bit more and detailed stuff.
In this case, then, we need to talk about video. We need to add a new page to our project, and that page would be an HTML page. So right click, add a new item, and that new item is an HTML page. Then, let's name this one video.htm. Again, the doc type is only HTML, so we need to remove the other pieces, also, we don't have a name space in here. We just say the lang being English. So the doc type, the HTML, and then we don't forget that in the head we have the meta tag. This one contains the char set with the char set being equal to UTF-8. That is about it for the structure of the page. That is an HTML page. I can save that as a template if I want to, and I can use it later. But that is a simple page that I can start with. Let's say the title on here says video example, so we are experimenting with a video.
In the body, as we said earlier, we can specify a header for the page, with an H1 that says something like videos. Let's add something in here and see what that would look like. Copy this and put something here. Let's call this one footer. Within the header and the footer I am going to put a video tag. Here is the video tag. Within the video tag, like we specified in the audio tag, we need to specify the source. Where is the source of this video coming from? If you notice, before I proceed, that I added a folder named video to my project. Then, within that I put an MP4 video of Tickle Me Elmo. This is the video that I need to show within the video folder. In this case, then, the source, I have to specify is the SRC attribute. And it says, "which URL would I like to pick?" I go to the project, I go to the video, and choose the video that I want, and click OK. It adds that as part of my video. Now I can close my tag, and I'm done. I added a video. Let's try to view that in the browser.
This is Google Chrome, it loads, and here is the video, with what the video is on the header. Then, down here is the footer of the page, and you get some type of video here. The video is not doing anything right now. It just displays it. Let's see what else we can change, just like we've done with the audio. Let's see what attributes we can get within the video tag, to see how we can have more control on that. We already know the source. We know it is the video that is loading. As far as the video tag is concerned, we need to change a few things in here. First of all, I need to make this one an auto play so it automatically plays when it loads. Save, view in the browser, and here is the video automatically playing. Because of the auto play attribute that we set on the video tag. By the way, there is nothing fancy about this. I just downloaded it off the internet. The other thing is I can make it loop like we've done, again, with the audio. So when the video finishes it starts over. That is another attribute I can add. One more thing, I need to have the controls, so I have more control on the video. I can control the sound. I can pause it or continue, so I better add the controls. As I specified in the previous video, I can simply say "controls", and I'm done, or I can say "controls equal controls." Either way is acceptable, but I can simply say "controls" and that should take care of it. Right click, view in the browser, it loads, and here are the controls. I can take over the sound and work with the sound. I can also pause it and run it again. It gives me the same control like I had when I was working with the audio. The audio and video give me the same ideas in there. That is about it for the video and audio. If there is more detailed information, I will discuss those later in other videos. But at least for now, this is a good introduction for audio and video. The second thing I would like to talk about is, as I mentioned at the beginning of the video, HTML5 input elements in detail. We will take them one at a time, and we will discuss those to see what they are. Because there are a lot of features in them, and I would like to discuss them in more detail.
Let's go ahead and add a new item. That item is an HTML page again. Let's call this one user input controls. Click add. Instead of having this page, I can simply take the one that I had for video, place it in there and make the minor modifications. The title is user input, the header is fill out the following information, and then I don't need the video, so I will take that out, and let's take out the footer. I can simply click control-X and that will cut the lines completely. Now I am done, and now I can start with my user input controls. What is the first thing we need to create? Of course we have some user input that usually goes into a form, so I better have a form. I say "form", and here is my form. One of the items that is interesting as far as user input, is basically the ability to search. The type is actually what used to be type text, but now you can say type search. Let's see how that is? I put input and, again, with the type we used to say "type equals text", and then we do whatever we want with it. We can give it an ID and manipulate it in some sort of way. What we can do in this case, though, is we can say type equal, and we can make a search. The type is actually a search type. ID, make it search and name as well with search. I gave it a type, I gave it a name and I gave it an ID. Let's go ahead and close that as we are done with it.
Another thing I can do is associate that with a label. On the top when I say in here I want to add a label, and that label would say, for example, search my site or something like that, I can make that label for this specific ID. In this case when I say "label", I can say "four", then equals, and then I can give it this ID. This label is associated with this input box for the user. Again, one more thing I would like to have here is some type of button. I need the user to click on a button, so lets put input type equals button and value equals go. That will give me the button that I need with my search. Let's see how that looks in the browser? View it in the browser. Fill out the following information, and that is just a general statement. With search my site, I can click inside of it. I can start typing, and you will notice also one nice thing about it is you get the "X" box that when I click it, it removes the text. Type, click, and remove the text. This is the type of search you have with HTML5 being added.
If I take, for example, this URL and load Firefox. With the search box when I type I don't have the "X". This one shows well in Google Chrome but not in Firefox. How about if I take the same page and try to load it in Opera. In Opera, again I type something, and I don't have the "X" that I saw in Chrome. This seems to work fine in Chrome but not in Firefox and not in Opera. Let's go ahead and proceed to see what other information we can do, and controls we can use. I can simply use the type of text we used to have all along. I can, for example in here in the form, go ahead and change the label and make that label for name. Because I'm going to put that later, and simply say name here. I don't want the button for now, but let's go ahead and keep it anyway. I am going to change that button a little bit and make it something more generic, so type equals submit. ID is also equal submit. Type submit, ID submit, value, submit data. And that is enough for the button, but the input type in here, I will make text. The ID and the name will make those name because, again, that is what the label is referring to in here. It is a label for this name. Right now I can also add some more properties to this text. For example, I can make this field to be required.
Let's go to the next page and make that field to be required. It is not read only, it's only required. Let's see what happens by setting the property to equal required, and try to view that in the browser. I have input as a simple tag and text, and I have submit data. I need to enter some information here, and then I click submit data. And it simply says, please fill out this field. Because I made that field required, submitting the form would not take the input and submit it to the server. Of course, we don't have submit to the server completed, but at least it's not passing that stage because that field is required. I have to fill out something here, then I click submit, and you see at the top that I have the name equal whatever I just typed, so it has been submitted successfully. Let's change some more things. Before we continue, let's put a break in here. So we have those on separate lines. Input text, we set the attribute to equal required, and also what we can do with it, is make it auto focus. That way, it gets the focus when we load the page. This is the element that takes the focus when we load the page. Can we give it a title? Let's see. Equals, let's say for example, full name. Let's give it also, a placeholder, so we say placeholder equals, and et's say, name goes here and save. Let's try to view that in the browser. It says, name goes here, and when I hover over it, it says full name. The title is being shown as the full name on the control and also name goes here, so it tells me what I need to do. As soon as I start typing, name goes here will go away. Take that off, and name goes here comes back. Click submit and it says please fill out this field, but it also says full name underneath. Where did that full name come from? That is the title. If we set that specific title to a specific text, then it shows up also on that balloon that asked me to enter that information. This is the required attribute, the auto focus attribute, the placeholder and the title. If I have more of those controls on the page, and I usually do because it's a form and I'm asking the user to enter some form information. Then in this case I can make this one with a tab index equals, for example in this case, 1. As I tab through it, I go from one item to the next.
As we are continuing the discussion there is a lot more to come on those user input controls, and we will discuss them like we are doing right now, one at a time. So if you have any questions, please drop us a line on the Mr. Bool website. Thank you very much for listening. I'm Ayad Boudiab, and you have a good day.