WEBVTT 0 00:00.730 --> 00:07.180 So here we go, we have done the Personal Profile header, we've added one text input box, but I want 1 00:07.180 --> 00:08.820 us to get more and more complex. 2 00:08.830 --> 00:13.270 And again, this is very simple form, but you're going to be introduced to a lot of concepts when it 3 00:13.270 --> 00:13.990 comes to forms. 4 00:14.680 --> 00:15.550 So what's next? 5 00:15.790 --> 00:22.210 Well, the input's type attribute lets us specify, call-it, out-of-the-box validation techniques. 6 00:22.600 --> 00:25.540 If we got to our code, let's just expand this, 7 00:26.350 --> 00:29.170 we can see that for that text input, 8 00:29.200 --> 00:34.390 we had a type attribute set to "text". But let's now do an email. 9 00:34.900 --> 00:42.880 And this type of email will allow us to perform very light validation in the sense that a email will 10 00:42.880 --> 00:44.800 have to be submitted by the user. 11 00:45.130 --> 00:47.080 The user can't just write random text. 12 00:47.530 --> 00:48.370 Let me show you what I mean. 13 00:49.210 --> 00:49.870 So here we go, 14 00:49.870 --> 00:51.550 we did the one input type here. 15 00:51.550 --> 00:52.810 I want another wrapper, 16 00:52.810 --> 00:56.500 and again, it's going to be a form-row. Within here, 17 00:56.500 --> 00:57.730 we're going to have a label again. 18 00:57.730 --> 00:59.620 And this is going to be for an email. 19 01:01.260 --> 01:07.050 Pretty straightforward, and we can have an input, but the type now is not text, we're going to have "email". 20 01:08.060 --> 01:12.860 We can give it a name of email, so when its submitted to the server as a variable, we can extract 21 01:12.860 --> 01:17.100 that value from the variables name, and that name of the variable is "email" 😵‍💫. 22 01:17.570 --> 01:18.420 Hope that makes sense. 23 01:19.770 --> 01:25.080 So if we save this, and we go back to our browser, there we go, we've literally got a nice looking email. 24 01:25.110 --> 01:26.370 Don't worry about the styling yet, 25 01:26.370 --> 01:27.450 we're going to fix that shortly. 26 01:27.450 --> 01:30.810 And it's going to be super quick because it's exactly the same as our styling 27 01:30.810 --> 01:32.430 above. So there we go. 28 01:32.540 --> 01:33.990 There's the email. Something else 29 01:33.990 --> 01:38.850 cool with emails and with pretty much any input element is that we can add a placeholder. 30 01:39.150 --> 01:43.260 Let's go back to our code, and let's add another attribute called "placeholder". 31 01:44.410 --> 01:51.070 And we can just give an example of what we want, like "wally@warthog.com". And if we save this, and go 32 01:51.070 --> 01:52.870 to our browser, there we go. 33 01:53.050 --> 01:56.210 It's literally put a placeholder inside that box, 34 01:56.260 --> 01:57.460 this email text box. 35 01:58.030 --> 02:00.460 And of course, when you start typing over it, it disappears. 36 02:00.820 --> 02:03.020 Well, what can I say about this email type? 37 02:03.190 --> 02:06.400 How does it differ from the text input type that we saw previously? 38 02:06.550 --> 02:08.250 Well, first off the bat, they are very similar. 39 02:08.260 --> 02:11.500 They both require text to be inserted into the box. 40 02:12.010 --> 02:15.190 The major difference is what happens when it comes to validation. 41 02:15.370 --> 02:22.150 If we are in Firefox, for example, and you start writing what I have just here, "asdfd", and you click 42 02:22.150 --> 02:29.530 out of this text box, you'll see some validation error occur. With Chrome and with other browsers, they 43 02:29.530 --> 02:33.710 only validate that input when the user submits the form, 44 02:33.730 --> 02:37.140 so that's why we're not seeing any validation error messages now. 45 02:37.510 --> 02:41.740 But don't worry, we're going to see a lot more about this later on in the course. 46 02:41.750 --> 02:45.310 I just kind of want to give you a flavor. I want to start introducing you to these concepts. 47 02:45.520 --> 02:47.620 But there's also more to it than just that. 48 02:48.460 --> 02:56.200 When you tell the browser that this is meant to be an email address, the browser improves the UI experience. 49 02:56.200 --> 03:00.160 If you're on a smartphone 📱, for example, and let me put it up on the screen here, 50 03:01.030 --> 03:07.390 when the browser knows it's an email, it gives access to that "@" symbol on the keyboard, making 51 03:07.390 --> 03:09.730 your life and my life a lot easier. 52 03:10.720 --> 03:11.890 So that's starting to make sense? I hope so. 53 03:13.180 --> 03:18.340 Before we move on, let us just quickly style this email, because it really is irking me that it looks 54 03:18.340 --> 03:18.910 so terrible 😖. 55 03:19.120 --> 03:20.230 So let's go back to our code. 56 03:20.500 --> 03:26.410 And let's start styling. So let's go to our stylesheet here, and let me get rid of myself now so you can see the screen behind 57 03:26.410 --> 03:26.600 me. 58 03:26.740 --> 03:32.560 Say bye to Gerald 🦒! And let's start just applying some basic styles to our page. 59 03:33.130 --> 03:38.560 Well, firstly, we've done a lot of styles here already when we look at this input type text, 60 03:38.860 --> 03:39.270 right. 61 03:39.310 --> 03:39.910 Remember that? 62 03:46.420 --> 03:52.060 So all we have to do, for example, here is we can add the form-row, 63 03:53.650 --> 03:55.410 oops, sorry, form-row 64 03:56.200 --> 04:03.130 and now we want the type equal to "email". If we save that and we got to our browser, look at that! I told you 65 04:03.140 --> 04:03.970 it was going to be easy. 66 04:04.130 --> 04:05.490 I bet you didn't believe me, did you? 67 04:06.520 --> 04:09.010 And let's go back here to our page, 68 04:09.010 --> 04:12.820 and I think that was actually all. I mean, how easy is that? 69 04:12.820 --> 04:14.860 There really isn't much else to it. 70 04:15.130 --> 04:20.550 Now, remember I said that, you know, this email type provides basic validation. 71 04:20.560 --> 04:22.660 Well, there's a pseudo class, 72 04:22.660 --> 04:24.190 and don't worry about what this means. 73 04:24.190 --> 04:25.750 We're going to get into it later in the course. 74 04:26.170 --> 04:29.320 But for now, just realize when this error message happens, 75 04:29.320 --> 04:36.190 when that validation fails, then the "invalid" pseudo class gets added to that element. 76 04:36.850 --> 04:37.720 Let me show you what I mean. 77 04:38.260 --> 04:39.070 Let's now 78 04:40.310 --> 04:46.040 grab our wrapper class, our form-row, and of course, we want to deal with our input of type email. 79 04:46.810 --> 04:52.960 But now, we only want to style this when the pseudo class "invalid" is activated. And when that happens, 80 04:53.560 --> 04:59.290 let's just give it a border of 1.5px, so a bit thicker than normal, and solid 81 04:59.290 --> 05:03.760 and let's give it a, I don't know, a reddish color and see if that works. 82 05:05.080 --> 05:11.710 OK, and just to make it even more blunt, we can give it a, you know, a really horrible looking reddish 83 05:11.710 --> 05:12.060 color. 84 05:13.990 --> 05:17.500 212, 53, 56. 85 05:19.410 --> 05:24.960 And what we can even do here, is we can remove any box-shadow. 86 05:26.600 --> 05:29.120 Right, and this here, um, 87 05:30.150 --> 05:36.840 let me just write a comment here, removes default red glow in Firefox. 88 05:37.960 --> 05:38.880 I just wanted to put that there so 89 05:39.040 --> 05:43.610 you know what it is. Now if we go back to our browser, there we go. 90 05:43.870 --> 05:44.830 How awesome is that? 91 05:44.830 --> 05:47.740 You can see that's an invalid result. 92 05:48.430 --> 05:54.430 We remove this and we type a valid email, wally@warthog.com, 93 05:55.090 --> 05:56.410 we can see it's not red anymore 🥳. 94 05:56.710 --> 06:00.930 As soon as you do something funky, we apply invalid styles. 95 06:01.150 --> 06:02.140 How awesome. 96 06:02.360 --> 06:02.840 OK. 97 06:02.980 --> 06:03.930 I hope you're having fun. 98 06:03.940 --> 06:05.410 I hope you're really enjoying this. 99 06:05.410 --> 06:06.550 And I'll see you in the next lecture.