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
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
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.