WEBVTT 0 00:00.290 --> 00:00.520 Whoo! 1 00:00.650 --> 00:01.820 I'm super, super excited. 2 00:01.820 --> 00:02.990 I'm super excited. 3 00:02.990 --> 00:05.450 Anyway, welcome, welcome, welcome. 4 00:05.450 --> 00:06.170 Let's start. 5 00:06.200 --> 00:06.830 See how we go. 6 00:06.860 --> 00:09.140 I've given you this blank kind of project 7 00:09.140 --> 00:09.830 starting point. 8 00:09.860 --> 00:12.980 We've just got a blank styles.css file. 9 00:12.980 --> 00:15.290 We've got a postcard, which I've just given you. 10 00:15.290 --> 00:22.370 You can see the width and height is 679x434 pixels. 11 00:23.070 --> 00:24.350 Bit of a tongue-twister 😛. 12 00:24.590 --> 00:25.820 So that's our postcard. 13 00:25.820 --> 00:27.260 We've got a blank index file. 14 00:27.260 --> 00:31.640 And of course, I've got our fonts. And I've given you two formats just to show you how we can use the 15 00:31.640 --> 00:33.110 format attributes. 16 00:33.140 --> 00:37.580 We've got woff2 format and the woff format. And these fonts are going to be used for our headings 17 00:37.580 --> 00:41.810 and a different font for the actual writing of the input text itself. 18 00:43.130 --> 00:44.240 That's all we've done. 19 00:44.280 --> 00:45.230 That's all I've got. 20 00:45.260 --> 00:46.550 It's not complicated. 21 00:47.500 --> 00:50.000 So let's begin. Let's start with our HTML. 22 00:51.170 --> 00:51.950 Very simple. 23 00:52.040 --> 00:56.060 We're going to have a head, because in here we want our styles, right? 24 00:56.210 --> 01:01.140 A link to our CSS styles and we called it styles.css. 25 01:01.160 --> 01:06.380 It's all we need in our head section. And of course then we want our body because this is where the meat 26 01:06.380 --> 01:06.980 lies. 27 01:07.010 --> 01:09.770 And of course we're creating a form. To create a form, 28 01:09.770 --> 01:12.050 we wrap it within the form element. 29 01:12.050 --> 01:13.460 You know this already. 30 01:14.030 --> 01:15.380 Let me just zoom in slightly. 31 01:15.680 --> 01:21.980 What I want to do now, is I want to create all the elements of our post card and I want our post card 32 01:21.980 --> 01:24.740 to be split up in a grid format. 33 01:24.830 --> 01:26.030 So this is what I want to do. 34 01:26.030 --> 01:29.390 I first want to define the "to: King Kong". 35 01:30.650 --> 01:31.010 Right. 36 01:31.010 --> 01:33.770 And I've put the post card there so you can see what it looks like. 37 01:34.100 --> 01:38.300 Now I'm thinking grid and the first column. 38 01:38.300 --> 01:44.240 Let's deal with the first column taking up all rows, and we're going to define how this works in our 39 01:44.280 --> 01:45.140 CSS. 40 01:45.770 --> 01:50.560 But what I want here is a div, and I want to give this a div with ID of message. 41 01:50.570 --> 01:57.290 Within this div we can have a label for message, and here's where the user types their message. 42 01:59.200 --> 02:02.500 And of course, a label has to be associated with a form control. 43 02:02.530 --> 02:04.480 Here I want a textarea. 44 02:04.510 --> 02:06.340 The name is what is sent to the server. 45 02:06.340 --> 02:07.740 Remember name:value pairs. 46 02:07.750 --> 02:09.430 Here we can say user_message. 47 02:09.760 --> 02:13.930 The ID has to match the value of that for attribute, which is message. 48 02:14.730 --> 02:16.540 We don't need columns and rows. 49 02:16.560 --> 02:17.820 Don't worry, we're going to affect it 50 02:17.820 --> 02:19.350 styling in CSS rather. 51 02:19.350 --> 02:20.320 And that's it. 52 02:20.340 --> 02:24.210 I mean, that's literally the first column I want this message to take up. 53 02:25.120 --> 02:28.480 Now I want to deal with the second column. 54 02:29.660 --> 02:33.740 Which is basically going to be the rest of 55 02:34.630 --> 02:35.500 our form. 56 02:37.370 --> 02:42.170 Remember the "to" and "from" and the send button, all of that. 57 02:42.260 --> 02:48.440 So here I want to wrap, again, another form control in a div, but this time I'm going to give it an ID 58 02:48.440 --> 02:51.860 of from, not form ... from. 59 02:52.460 --> 02:53.330 Does that make sense? 60 02:53.330 --> 02:55.760 And within this div I want to have a label. 61 02:56.000 --> 02:59.270 It's for attribute can have the name of "name". 62 03:00.470 --> 03:01.190 From. 63 03:03.820 --> 03:04.180 Right. 64 03:04.180 --> 03:05.410 It's making sense. 65 03:05.650 --> 03:07.900 The input can be of type text. 66 03:08.260 --> 03:12.550 The name when we submit it to the server can be the user's actual name. 67 03:12.550 --> 03:15.940 The ID has to match the for attribute's value, which is "name". 68 03:16.210 --> 03:17.680 Very, very simple. 69 03:18.190 --> 03:18.850 So there we go. 70 03:18.850 --> 03:21.280 That's the from section of our form. 71 03:21.460 --> 03:23.650 Now I want to do the reply 72 03:25.080 --> 03:27.570 div, we can give it an ID of reply. 73 03:28.910 --> 03:29.810 A label 74 03:30.750 --> 03:32.820 we can give its for attribute 75 03:33.180 --> 03:34.500 I don't know, the value of "mail", 76 03:34.530 --> 03:35.280 why not? 77 03:36.270 --> 03:37.230 Reply. 78 03:37.770 --> 03:41.370 And again, we can have an input of type, but this time not text 79 03:41.370 --> 03:41.790 right? 80 03:41.790 --> 03:44.720 Because we want the response to be our email. 81 03:44.730 --> 03:49.500 It needs to come back to our email when the user or the person you're sending it to responds. 82 03:49.500 --> 03:54.320 So in this instance, we don't want the type of text, we want the type of email. Very, very simple. 83 03:54.330 --> 04:00.420 The name that we give when we submit it to the server can be user_email and the ID of course has to 84 04:00.420 --> 04:02.580 match the value of that for attribute, which is mail. 85 04:02.760 --> 04:04.050 Very, very simple. 86 04:04.050 --> 04:05.730 What's the final thing we need? 87 04:05.760 --> 04:08.850 The final thing we need, my dear students is the submit button. 88 04:08.850 --> 04:13.770 Again, we can wrap this in a div, we can give it a class of button just to mix things up, 89 04:13.770 --> 04:14.310 why not? 90 04:14.310 --> 04:17.100 And here we can have a button of type submit. 91 04:17.130 --> 04:20.640 We don't have to define its type of submit, because we know that's the default. 92 04:20.640 --> 04:22.200 But I just want to be explicit here. 93 04:22.200 --> 04:24.390 Send your message. 94 04:25.660 --> 04:29.110 And believe it or not, but this is all we have to do. 95 04:29.110 --> 04:30.400 Let's save this. 96 04:30.580 --> 04:32.680 Let's open this up in the browser. 97 04:32.680 --> 04:33.790 And there we go. 98 04:34.420 --> 04:35.950 How awesome. 99 04:36.160 --> 04:39.020 This is the content of our entire form. 100 04:39.040 --> 04:43.570 I know, I know it looks hideous, but all we're going to do in the next lecture is we're going to apply 101 04:43.600 --> 04:47.590 CSS and we're going to complete the entire form. 102 04:47.590 --> 04:48.490 How awesome. 103 04:48.820 --> 04:49.930 Give it a go yourself. 104 04:49.930 --> 04:53.890 Start applying some CSS, and I'll see you in the next lecture.