Input Types Phone & Email

[00:00:00]
>> Jen Kramer: So let's move on, let's code our next one. We're gonna code a phone number, okay? We need to collect a phone number.
>> Jen Kramer: So I'm actually gonna copy what I just did,
>> Jen Kramer: And paste it on in here.
>> Jen Kramer: And I could make a few changes to this to make this work, right?

[00:00:21]
For my phone number, what would I need to change to make this work for my phone number?
>> Speaker 2: Everything in quotes.
>> Jen Kramer: I would need to change all the stuff in quotes?
>> Speaker 2: Not quite everything but well, text. Is it text? It's a number so-
>> Jen Kramer: It's actually not gonna be text but we'll leave that for the moment.

[00:00:40]
What should I change here, what should I change the id to?
>> Speaker 2: Phone?
>> Jen Kramer: How about phone, that's a great idea. And what should I change the name to?
>> Speaker 2: Go with phone?
>> Jen Kramer: How about phone, that's a good one also, okay? Now for the input type, if you wanted to collect a phone number, there's absolutely nothing wrong with using a text box to do it, okay?

[00:01:04]
Cuz obviously, you're typing in a bunch of numbers for phone number, right? Okay, but what happens when you get to an actual phone and you're trying to fill out your form on a phone? What does the keyboard look like when you're trying to type a phone number in?

[00:01:22]
>> Speaker 3: Num pad.
>> Jen Kramer: You get the full alphabet, right?. With the numbers across the top, and sometimes you have to like hit a shift key or something to actually get to the phone numbers. It's a pain in the neck, isn't it?. Okay, so one of the things that we can do here is we can change our input type to tel, okay?

[00:01:42]
tel, or telephone.
>> Jen Kramer: And tel will do absolutely nothing for our form on our desktop computers. Nothing at all, nothing is gonna change. There's no difference in the experience for you people on desktop computers if you're typing in a phone number. But if you're actually on a phone, guess what?

[00:02:08]
Your keyboard was gonna change to actual numbers, which is pretty awesome, okay.
>> Jen Kramer: Sweet. So this is a good reason to do that. Now we also need to add a label for this, don't we?
>> Jen Kramer: So what should I change here for my paragraph? What am I going to do now?

[00:02:32]
>> Speaker 3: Maybe label?
>> Jen Kramer: This is going to be label, and then what?
>> Speaker 3: Phone?
>> Jen Kramer: for =
>> Speaker 3: phone?
>> Jen Kramer: Phone, phone, spell it correctly.
>> Jen Kramer: /label
>> Jen Kramer: All right. So we go ahead and save that. Refresh your form.
>> Jen Kramer: We're gonna start stacking up our fields next to each other.

[00:03:07]
Don't worry about it. We'll make it look pretty later. How do we make it look pretty?
>> Speaker 4: CSS.
>> Jen Kramer: CSS, right. So we got some styling to do for this form later on. But if you can't see it on the web page, you can't style it. So we're gonna concentrate on writing our HRML first, don't worry about how the form looks, we'll come back and style it later, okay?

[00:03:31]
Yes?
>> Speaker 5: I noticed that in Safari, before I changed the input type to tel, so when it was still text, it came up as an option to let autofill my phone number specifically. So that's coming from the name field that Safari recognized if the name for him and input his phone, I should search for the phone number that I have saved.

[00:03:53]
>> Jen Kramer: Yeah, there's some browser stuff that's going on where it's smart enough to know because you've probably filled out a few forms on a computer. [LAUGH] And it remember some things about you if you set up your browser settings such that it will remember some things about you.

[00:04:08]
And the names that we're using here for our form fields are fairly common, right? As I said, there's no reason to call your form field George or Sally, right? Most developers are gonna call it phone.
>> Speaker 5: It is specifically coming from name and not ID, right?
>> Jen Kramer: Yes, yes.

[00:04:28]
And so, by the way, notice that the way this form is coded right now, I can very happily and say my phone number is Jen Kramer. There's nothing wrong with that at all. I can go ahead and do that because your browser isn't going to test to see if you've actually typed numbers in here, all right.

[00:04:47]
That's why we have JavaScript to do the checking here. JavaScript, if you've coded JavaScript, well, JavaScript will look at that and go, Jen Kramer does not look like a phone number.
>> Jen Kramer: And it will give you an error. You can write your JavaScript to test for a phone number or a format for a phone number, it should be all numbers or something like that.

[00:05:07]
Okay, email, guess what we're gonna do for email? What should email be?
>> Speaker 2: id=email.
>> Jen Kramer: Yeah, a box that we type in, right? So it's gonna look pretty much like the other ones, right? So what should we use for an ID?
>> Speaker 2: email?
>> Jen Kramer: How about email? How about the name?

[00:05:31]
How about email? Okay.
>> Jen Kramer: And just like you saw before, there is an input type for email addresses now, okay? And depending on what kind of phone you have, and operating system on the phone, and all the rest of it, it'll change the keyboard there for mobile users.

[00:05:49]
Usually it makes the at symbol really easy to find. Sometimes it'll put in a button for like .com or something, sometimes you see that. It sort of depends on what the manufacturers of the phones are, and the software doing. So guess what that type is called?
>> Speaker 6: Email.

[00:06:06]
>> Jen Kramer: Email. [LAUGH] Sorry, input type is email.
>> Jen Kramer: All right, and then for our email label up here, what are we going to change this to?
>> Speaker 6: Label?
>> Jen Kramer: label
>> Speaker 6: for
>> Jen Kramer: for=
>> Speaker 6: email.
>> Jen Kramer: email. /label
>> Jen Kramer: Okay.