WEBVTT 0 00:00.330 --> 00:05.280 All right, so this is exactly where we left off in the previous lecture - we created that Personal 1 00:05.280 --> 00:06.600 Profile heading. 2 00:07.710 --> 00:11.440 But now I want to add our very first form widget 😲. 3 00:11.460 --> 00:13.610 I want us to add an input box. 4 00:14.160 --> 00:19.980 We use this because we want to start collecting data from a user, and that's why we're using this <input> 5 00:19.980 --> 00:20.400 element. 6 00:20.910 --> 00:22.080 So how does that work? 7 00:22.750 --> 00:23.730 Well, let me ask you this, 8 00:23.730 --> 00:25.020 how do we create a form? 9 00:25.740 --> 00:26.310 Do you remember? 10 00:27.950 --> 00:32.060 That's right, we start by creating this <form> element. 11 00:33.420 --> 00:36.970 And for now, I don't even need an "action", 12 00:36.990 --> 00:42.300 I don't even need a "method". But maybe what we should do is add a class, because you and I both know we're 13 00:42.300 --> 00:44.970 going to style this, otherwise it's going to look terrible 🤢. 14 00:44.970 --> 00:46.950 So let's just call this profile-form. 15 00:47.580 --> 00:49.200 Remember, we've got the profile-header. 16 00:50.230 --> 00:52.720 So now I've just called this class profile-form. 17 00:53.640 --> 00:54.270 So there we go. 18 00:54.570 --> 00:59.670 But remember, it does nothing visually, this <form> is just a wrapper element. 19 01:00.880 --> 01:06.670 The first thing I want to do, is I want us to have a container in our form, call it a container for 20 01:06.670 --> 01:07.540 different sections. 21 01:07.660 --> 01:11.850 So this <div> here, let's give it a class of 'form-row'. 22 01:12.670 --> 01:15.050 And why do we have this wrapper 🤷‍♀️? 23 01:15.070 --> 01:18.190 Well, it's just it makes it easier for us to style. 24 01:18.580 --> 01:22.000 It's pretty common for separating input elements to have a wrapper. 25 01:22.150 --> 01:25.240 And here we've just put it in a <div> with a class of 'form-row'. 26 01:27.260 --> 01:30.500 The next thing I want to include, is I want to have a label here. 27 01:32.040 --> 01:36.870 And as we'll see later on in this course, label elements have this "for" attribute, and this has to 28 01:36.870 --> 01:39.660 be equal to the ID of the input element below. 29 01:40.180 --> 01:41.550 I know that's a bit of a mouthful. 30 01:41.920 --> 01:43.790 I'll show you what I mean in a second. 31 01:44.370 --> 01:49.440 For now, let's just say that the "for" attribute should be assigned the value of "name". 32 01:50.590 --> 01:58.120 And of course, let's give our input an actual label called Name, because we want the user to insert 33 01:58.120 --> 01:59.440 their ... name. 34 02:00.530 --> 02:09.050 It's very logical. Next, let's include this infamous <input> text box of type text. 35 02:11.070 --> 02:14.650 And the ID here is crucial, it is very, very important. 36 02:15.090 --> 02:22.230 This ID has to be equal, or it has to be the same, as that "for" attribute in the label. 37 02:24.040 --> 02:32.170 And we can save this, and look at our screen, we've literally got a Name, that's the label, and that's 38 02:32.170 --> 02:33.670 our actual input text box. 39 02:33.970 --> 02:35.770 How cool is that? 40 02:37.030 --> 02:44.560 So you can kind of think of the label as another semantic HTML element like <article> or <figcaption>, 41 02:44.900 --> 02:52.000 but just remember the label's "for" attribute must match the ID attribute of its associated <input> element. 42 02:52.950 --> 03:00.360 And FYI, let me just ask you this, why don't we just do this, why do we actually have to have that 43 03:00.360 --> 03:00.840 label? 44 03:01.240 --> 03:02.970 Because I could put Name 45 03:03.180 --> 03:06.350 here, and it looks exactly the same, doesn't it? 46 03:07.500 --> 03:08.550 Why do we need the label? 47 03:09.570 --> 03:11.940 Well, we're going to get into a lot more detail later. 48 03:11.940 --> 03:17.940 But the first thing I can immediately notice from a UI point of view, is that without the label, you 49 03:17.940 --> 03:20.520 can't just click on the Name and select the input box. 50 03:20.550 --> 03:21.390 What do I mean? 51 03:21.990 --> 03:27.930 Well, let me click on the Name right now, on our webpage, can you see that our input text box does 52 03:27.930 --> 03:29.310 not get activated. 53 03:30.470 --> 03:32.150 But, let me delete this now. 54 03:33.410 --> 03:34.490 Let me un-comment our label. 55 03:36.440 --> 03:37.700 And now let me click on Name ... 56 03:38.940 --> 03:39.470 (sad trombone sound) 57 03:43.590 --> 03:44.940 Wwhy is this not working? 58 03:45.000 --> 03:46.120 Oh, sorry, 59 03:46.210 --> 03:49.680 the ID should be "name", not "names". But here we go, 60 03:49.710 --> 03:54.810 and if I click on Name now, the input itself gets focus. 61 03:55.150 --> 03:56.360 (sound effect: congratulations) 62 03:56.590 --> 03:57.750 That is so much better 63 03:57.750 --> 04:00.210 UI, you got to agree with me on that one? 64 04:01.290 --> 04:07.170 Whew, I know I'm going slow, but this is such an important concept that you need to understand. 65 04:07.740 --> 04:13.230 And looking at the code right now, just know that we used an input of the type "text". 66 04:20.810 --> 04:28.790 This input element is so, so powerful, in fact, it's so different from other elements in HTML because 67 04:28.790 --> 04:35.630 it can dramatically change appearance depending on its type attribute. But it always creates some kind 68 04:35.630 --> 04:36.890 of interactive user input. 69 04:39.120 --> 04:40.780 But hang onto your horses 🐎. 70 04:41.610 --> 04:47.970 I don't want us to move on just yet, I want us to understand this input element in a little bit more 71 04:47.970 --> 04:48.370 detail. 72 04:49.110 --> 04:53.520 So let me just discuss that first, and then we can continue on with our code.