Duration: 18 minutes
Summary: In this video we will continue with the user input discussion. We started this in the previous video by talking about the search and text types. We illustrated how they work in different browsers. In today’s discussion we will handle number, tel, and email. In the case of the number type, we will ask the user for his/her age. There are multiple properties for this type including min, max and step. We can define the lowest and highest value, as well as how to step through the numbers when the user is clicking on the arrows (we can step by 2 and end up with 2,4,6,8…). For the tel, we will have the ability to define a pattern that makes the entered phone number acceptable (pass validation). When defining an email, we will add the placeholder property so the user will be familiar with the email formats. Finally, we will test these different types of input in different browsers to see how they are handled.
Technology Used: HTML5 and Visual Studio 2010
Keyword: HTML5, Visual Studio 2010, meta, header, input, type, label, required, autofocus, placeholder, title, tabindex, number, tel, and email.
Transcript: Welcome back everyone. This is Ayad Boudiab. I'm a senior .net application
developer and we are continuing our discussion on HTML 5.
In the previous videos, we discussed a little bit about audio, video and
some of the input controls that we can work with. We saw how easy it was to
simply create an audio page with the header, footer, and a audio section,
with the autoplay, loop controls. We also show how we can point to the .wav
file and also another .mp3 file. And we saw how these work in different
browsers. We did the same thing with a video where we just created another
video tagged with the source we put it in mp4, video. And we also show how
that works in different browsers. Then we moved into using input controls.
And, if you recall, we discussed a little bit about the different types. We
went into a form and we start creating all controls. The first and simple
thing we did is, we created something of type/text. That's what we are used
to. That's what we used to do in previous versions of HTML. We set the type
equal to text and we set some other properties on those controls. We give
it an ID, a name, but in our case in here we gave it a tab index. As we tab
through it, we know which index it will be, which one it will stop to as it
moves from one control to another.
Then we made it required. We get an error message if the user didn't fill
out the information. We auto-focused to it, so it automatically gets the
focus when the page loads. We gave it a title, which helps us with the
error message or when we have the control, when we're trying to fill out
the information. Also, we gave it a placeholder so the user would know what
to put there. Now, and also, of course, we added a button and that button,
a submit button. It submits the data to the server. Although right now we
don't have anything back in the server. If we view that in the browser, we
will see that we have a text box and then if we click on submit, we don't
have information. It just gives us, please fill out the field and also it
gives full name as the label on that. Name goes here for the placeholder.
Now, we need to change that a little bit and as we work with more and more
of those controls, and see how we can handle them differently with the
different types that we have. Let's start with a new one. In this case, in
today's video, I'd like to discuss about the numeric input control which is
"type = number." OK?
Let's put that as input. We specify the type. In this case the type is
number. Of course, we'll give it an ID and in this case we need to ask the
user for his age. I'm going to give it ID called "Age."
Also, we give it a name with the same, "Age." Let's also make this field
required. We give it a placeholder.
Placeholder equals, and let's specify. For example, we need to use the
user's age. We say, "Age," right?
Now same thing for the title. Something like that and, also, let's say we
need to give it a tab index. Tab index equals. In this case we took out the
other one. It still will say, for example, tab index equal one. OK. Now,
this an input type, "numeric." It's a number. I have the ability to give
this numeric input control different properties. For example, I can give it
the minimum and the maximum that it can take. I can give it the minimum
value. Say, for example, for the age I'm going to say 18. That's the
minimum value the user would see. Then the maximum value equals, let's say
This takes care of the minimum and maximum age. Now, as we step through it.
As we click on this to move from one value to the other. How do you want to
step? Do you want to step by five? Do you want to step by two? Do you want
to step by three? For example, step equals one. I'm stepping by one through
Let's go ahead in here and give it a label. This is for age. We say
something like age in here. OK. We still have the button being displayed.
We change all those properties. Most important one is we make it a type
number and we gave it a minimum and a maximum. Right? Let's go ahead and
preview that in the browser and see how that would look like. You notice
when I load that in Chrome, I notice in here it says, "Age," and "Your
Age," when I hover over it. You have the submit button. It says, "Please
fill out your age," or this field, which is your age. That's understood.
We've done that in the previous video.
Now you notice that the up and down arrows, that I can see. That come in
with this control. As I click, starts with 18 and goes up by 1. 21, 22, 23
and so on. The lowest value is 18 and then, of course, when I go up the
highest value is 50. That way I have control over what the user would enter
in this case, because those fields are limited by the minimum and maximum.
If I take this copy, this URL, and let's load that in Firefox. In Firefox,
it did not give me the up and down arrow, that I used to see when I was
working with Chrome. Remember, it still says here, "Up and Down." At least
it defaulted to something manageable. Something I can work with. It's a
text box. Because that's the default value for all this. It still defaults
It doesn't understand the numbers, so it uses a text box. I should be able
to enter some value and I have the ability of also click and it says,
"Please fill out the field." That's about it. It says age as a placeholder
and when I hover over it, it says, "Your Age." As far as the control,
itself, I don't see what I used to see in Chrome as far as the up and down
arrows. Let's go ahead and load that in Opera. Fill out the following
information. Age. Submit data. I have the up and down arrow that I can go
through and select those values and submit the data back to the server. I
have the up and down arrow like I used to see that with Chrome. Again, we
have to be careful with what browser we're using. In this case, for
example, you might assume the following. I have min and max values, so the
user can select only one of those. I don't have to have some validation.
But again the user might load this in a different browser. The browser
doesn't understand the input, "type = number."
So it defaults to an input box. Input box, text box. You can enter some
value or you might skip this. That's why you still need the validation to
make sure that the user entered the appropriate values you're looking
for.nThat takes care of the input of type, number. What else can I work
with? What other fields can I work with? Let's see if I can work with
phone, email and see how those would work differently. In this case, I
need to have a label. It says, "Label for." Let's work first with the input
box, and then we modify the label accordingly. Notice in here, that I've
skipped closing the tag and still it accepts my input. This tag should have
been closed. The input type in this case is as I said, I'm going to switch
to something like a telephone number. That's abbreviated with a tel, T-E-L.
This specifies this input box as a telephone number. Because, after all,
when you go into a form. To fill out some information, pretty much you're
entering your name, address, city, state, zip, telephone number, email
address, so on. HTML5 tried to capture that general idea of what type of
information you'd be entering.
In this case, I'm entering in my phone number. Type is telephone and I'm
going to give it some ID, "Phone." Name, "Phone." Let's keep it required.
Placeholder, "Phone." This one, your phone. OK. Just keep it simple. Then
with a tab index. Let's go ahead and remove the numeric specific values
like minimum, like minimum, maximum and step. I don't want those. What I'm
interested in, in this case is the placeholder for this field. Let me bring
it down so I can keep it on the page. Instead of just simply saying the
phone. I'm going to give it the format that I'm expecting the user to enter
that as. If you work in different countries, you have different phone
formats. But at least let's go with the simple, basic one. I want like 123
and then this and then four more numbers. Area code and then the seven
digit number. All separated with a space. That's the placeholder that I
want to show to the user. OK.
One more thing. I'll be back to the placeholder in a second. It already has
an ID. It already has a name and it's required. It has a placeholder. A tab
index if I need to. Not necessarily in this place. Since I already know
what the ID is and the name, I can copy that and place that in the label.
It' s label for the phone. OK. "Enter your phone number." We've already set
the label, already set the input. It's type, "Telephone." But one thing
that I have to be careful about is the placeholder. Be careful for one
thing. The placeholder is not a validity check. If I say in here that this
is how I want you to enter the telephone number, it doesn't meant that this
will validate the format that you just typed. You just typed some pound
signs in there. You're not telling the system to validate that type of
data. You validate that type of data using pattern. You have to specify the
pattern property, in order to tell what pattern you want, for a phone
number. Since you've been working with a United States phone number or
international phone number. All those have different type of validation
OK. We have regular expressions that specify how these fields should look
like and how we can validate them. The simple thing to do, just go on
Google. Type in a telephone number regular expression. You get so many of
them. You choose which one you want, which one suits your needs and that's
the one you add to your script. Basically, in this case, then, I found
something like this. We know that the pattern starts with a carat sign,
ends with a dollar sign. I'm specifying some digits. Three digits in here,
three digits in there, and then four digits in there. That's all that I
need to know right now. This is basically the pattern that I need to follow
for the user to enter a phone number. If the user doesn't follow this
pattern, he will get the error message. Again, the placeholder, just simply
a placeholder, is not validating against any specific pattern.
We're done with that. Let's go ahead and preview that in the browser. You
see the, "Enter phone number," and then you see the hashes how you want the
phone number to be and, of course, you need to fill it in this sort of
format. And then you start specifying the phone number you're interested
in, now there's the data.You always notice that in the URL. That it has
been submitted and the phone number is what you just typed. This is
something important as far as the regular expression or the pattern you
want to specify for the that specific phone number. Going back here, let's
go ahead and validate against the email address. How I want my email
address to work. I will change a few things. "Enter your email." This is a
label. I'm going to name it, "Email." Soo the name, copy that. This is
email and this is email. OK. The type, then in this case changes to email.
Now I have an email type of input box. I'm going to ask the user for that
email. I have an ID, email. I have a name, email. I'll make it required. I
have the placeholder, of course it's not a phone number anymore. The
placeholder would be something like, "Name @ something.com." That's an
email address. The placeholder that will show up when that text box shows
up to the user.
There is no more pattern. I'm not working with the phone number anymore.
The title. Already specified the title to be "Your email address." Then I
have the tab index. Tab index, required. Placeholder, the type, the name,
the ID. That should be it for the email address. I go ahead and save, view
in browser. "Enter email." You have the placeholder, "Your email address,"
as a title. It shows up when I hover over the text. Try to submit. It says
you have to enter that value and then something like Ayed@something.com,
and that satisfies the condition, and it goes being submitted in the URL.
OK. That takes care. Of course, I can take these fields. Let me check one
more thing in here. Before I go and proceed, let me check one more thing
out of curiosity. You notice that I mentioned earlier that I can take out
the pattern. There is a pattern for the email address. Because I'm
expecting to follow a certain rule. I can specify a specific pattern for
the user to make sure that he entered the correct email address. Again, I
can find all those on the Internet. Google, "Email address for regular
expressions," and it will tell you what regular expression you would use
for an email address.
I can, when I preview that in the browser, one thing that you need to keep
always doing as an HTML5 developer. You take that URL. You say, OK it looks
good in Chrome, but how about if you load that in Firefox. How's that going
to look like? Also, if I tried to load that in Opera, how's that going to
look like? And so on. So of course, you can do that in IE and see how all
these controls would work in different browsers. You can make sure that all
your user experiences are pretty much the same and you don't have any users
complaining that your site is not working. That should be it for this
video, we'll continue with the rest of the videos. I'm going to pick up on
URL and proceed with the rest of the videos to discuss more and more about
these HTML5 controls and their different types. Thank you very much for
Ayad Boudiab, and you take care.