WEBVTT 0 00:00.580 --> 00:09.520 The first type I want to look at is drumroll ... 🥁 ... the input of type email. And what is this type all 1 00:09.520 --> 00:09.910 about? 2 00:09.910 --> 00:11.080 Well, it's pretty intuitive. 3 00:11.080 --> 00:16.570 The user is required to type an email address into the field. 4 00:16.720 --> 00:22.690 And what this means is that any other content entered into that field, causes the browser to display 5 00:22.690 --> 00:25.150 an error when the form is submitted. 6 00:25.420 --> 00:30.940 So it is a helpful aid to guide users to fill out a form accurately. 7 00:31.240 --> 00:36.550 And more than that, it can save time because it's useful to know that your data is not correct immediately, 8 00:36.550 --> 00:39.880 rather than having to wait for a round trip to the server. 9 00:40.000 --> 00:45.340 So it's always good to perform some front end validation before sending data to a server. 10 00:45.670 --> 00:51.820 Another useful thing to know is that you can allow multiple email addresses to be entered, by including 11 00:51.820 --> 00:55.240 a boolean attribute called multiple. 12 00:55.450 --> 01:01.450 Each email address in that instance will have to be separated by a comma, so the attribute will look 13 01:01.450 --> 01:02.990 like this ... multiple. 14 01:03.400 --> 01:07.940 And in this instance, each email would have to be separated by a comma. 15 01:08.110 --> 01:13.240 So just make sure you make the user aware that a comma has to be the separator. 16 01:13.390 --> 01:15.430 But other than that, it's pretty intuitive. 17 01:15.940 --> 01:19.630 Alright, well, what's another useful reason to have email? 18 01:20.260 --> 01:25.300 Well, on some devices, notably touch devices with dynamic keyboards like smartphones, 19 01:25.570 --> 01:32.920 a different virtual keypad might be presented that is more suitable for entering email addresses, including 20 01:32.920 --> 01:33.880 the @ symbol. 21 01:34.030 --> 01:38.830 So here's an example of an Android and an Apple where you've got those @ symbols. 22 01:39.970 --> 01:46.270 It just helps you. Remember we are trying to make filling out forms as easy and streamlined as possible for 23 01:46.270 --> 01:46.720 a user. 24 01:46.900 --> 01:50.740 Let's hop over to the console, and just see how this email type works. 25 01:50.740 --> 01:51.760 It's very, very simple. 26 01:51.970 --> 01:57.250 All we need to do is set up our HTML. Body. Within the body, of course, there's a form. 27 01:59.200 --> 02:03.670 And in the form, we can start with our input of type email. 28 02:04.770 --> 02:07.830 You can give it a name of email, an ID of email. 29 02:08.130 --> 02:13.230 Save it, refresh the page, and we can see right now it looks exactly like a text input. 30 02:13.410 --> 02:17.850 And of course, we need a button with type submit, just so we can submit this baby. 31 02:19.030 --> 02:24.520 And, of course, if you type anything like this, "asdf" and we click submit, this is what's really cool, 32 02:24.520 --> 02:26.170 we get an error message. 33 02:26.440 --> 02:30.880 This is built-in front side validation, by the browser. 34 02:31.060 --> 02:32.530 How awesome is that? 35 02:32.860 --> 02:35.110 And of course, something else you might want is a label. 36 02:35.950 --> 02:41.950 Remember, the "for" has to match the ID of the input we want it to attach itself to. 37 02:42.020 --> 02:43.950 And here, we gave the input an ID of email. 38 02:44.050 --> 02:48.550 So the for attribute has to have email and, you know, we can say "Enter your email". 39 02:49.240 --> 02:49.900 How does this look? 40 02:50.080 --> 02:50.520 There we go. 41 02:50.530 --> 02:56.140 And if the user obviously clicks now on the label, the input box gets highlighted. 42 02:56.410 --> 02:57.040 How cool is that? 43 02:57.040 --> 02:57.460 But ... 44 02:58.480 --> 03:05.260 if we type some random email like abc@abc, and we click Submit, in this instance, the browser will 45 03:05.260 --> 03:11.110 not stop us from sending the data, even though you and I both know that was a fictitious email. 46 03:12.050 --> 03:13.340 Let's jump back into the lecture. 47 03:14.380 --> 03:20.020 What else can I say about this type of email, specifically when it comes to validation? 48 03:20.680 --> 03:28.060 As I've mentioned, the email type gives us built-in client side error validation. And when it comes to 49 03:28.060 --> 03:28.720 styling, 50 03:28.870 --> 03:37.810 just remember that the :valid and :invalid CSS pseudo classes are automatically applied as appropriate, 51 03:38.230 --> 03:43.540 to visually denote whether the current value of the field is a valid email address or not. 52 03:44.170 --> 03:49.360 So just remember you can target the :valid and :invalid CSS pseudo classes. 53 03:50.200 --> 03:51.190 Very, very interesting.