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 50. OK.
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 this list.
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 to something.
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 rules.
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.