NOTE This file was generated by Descript 1 00:00:00,000 --> 00:00:01,409 Hi guys and welcome back. 2 00:00:01,440 --> 00:00:05,399 In this video, we're going to talk briefly about forms, HTML forms. 3 00:00:05,399 --> 00:00:07,979 How they work, how data is sent and so on. 4 00:00:08,309 --> 00:00:12,960 However, in order to accept the form data somewhere and be able to use 5 00:00:12,960 --> 00:00:17,914 it we need a backend application running that is designed to accept 6 00:00:17,914 --> 00:00:19,685 that data and do something with it. 7 00:00:19,984 --> 00:00:23,674 That is going to be the Flask app that we don't have yet. 8 00:00:23,884 --> 00:00:27,005 So for now, we're going to create the forms in the section and we're 9 00:00:27,005 --> 00:00:30,274 going to send data, but we don't have anything that can use the data so 10 00:00:30,274 --> 00:00:31,834 that's coming just a little bit later. 11 00:00:32,195 --> 00:00:35,765 Anyway, let's get starting this video, talking about forums and how they work. 12 00:00:36,858 --> 00:00:41,778 So remember, we've got a section here that has a title to add a new entry. 13 00:00:41,918 --> 00:00:44,978 In here we're going to have a form element. 14 00:00:45,508 --> 00:00:48,508 There are two main ways of submitting data using forums. 15 00:00:48,538 --> 00:00:51,448 Using get requests or using post requests. 16 00:00:51,688 --> 00:00:53,158 That's called the method. 17 00:00:53,698 --> 00:00:58,138 And in addition to the method, we can also specify an action or where 18 00:00:58,138 --> 00:01:00,838 the data is going to be sent to. 19 00:01:01,148 --> 00:01:04,178 So at the moment, we don't have an application that is able to receive 20 00:01:04,178 --> 00:01:08,528 this data but we will have it later on and the action when we do have 21 00:01:08,528 --> 00:01:11,168 that app is going to be slash entry. 22 00:01:11,485 --> 00:01:15,565 So when we send the data is going to go over to this URL. 23 00:01:16,122 --> 00:01:19,182 We're going to talk about method in just a moment as well, but it's 24 00:01:19,182 --> 00:01:20,412 something else that we can change. 25 00:01:20,835 --> 00:01:24,315 Let's talk about some elements that we can put in here in the form. 26 00:01:24,765 --> 00:01:26,505 The first type of element and something that we're going 27 00:01:26,505 --> 00:01:28,455 to use very often is a label. 28 00:01:28,635 --> 00:01:31,335 For example, we can put sample like that. 29 00:01:31,738 --> 00:01:35,038 Then a label is mapped to an input. 30 00:01:35,578 --> 00:01:37,918 For example, an input of type text. 31 00:01:38,368 --> 00:01:41,778 The name of the input is going to be sample and the ID of 32 00:01:41,808 --> 00:01:43,598 the input is sample field. 33 00:01:43,688 --> 00:01:45,458 Again, these are all adjustable. 34 00:01:45,458 --> 00:01:49,978 You can call them whatever you want . But now that we've got the name and the ID. 35 00:01:50,158 --> 00:01:54,468 We can also add a new attribute to the label, which is for. 36 00:01:55,048 --> 00:01:58,218 And this has to match the ID of the field. 37 00:01:58,218 --> 00:02:00,678 So that's for sample field. 38 00:02:01,188 --> 00:02:05,658 What this does is when a screen reader, for example, arrives at an input element, 39 00:02:05,688 --> 00:02:10,548 it's going to be able to tell the user what the label of the element is. 40 00:02:10,578 --> 00:02:13,698 So that it's a bit easier to understand what the element is for. 41 00:02:14,240 --> 00:02:17,240 These are two of the main elements we're going to be using all the time when 42 00:02:17,240 --> 00:02:19,370 working with forms, labels, and inputs. 43 00:02:19,640 --> 00:02:23,240 As well as input of type text we can have also a bunch of other types as well. 44 00:02:23,240 --> 00:02:26,060 I'm going to leave a link to that in the resources section of this 45 00:02:26,060 --> 00:02:29,660 lecture, but there's things like date or number that we can also use. 46 00:02:30,455 --> 00:02:35,375 Finally, we often need a way to submit the form otherwise the data can't go 47 00:02:35,375 --> 00:02:40,925 anyway and that is a button of type submit or an input of type submit. 48 00:02:40,925 --> 00:02:45,545 So here we are going to put the submit text inside the button and that's 49 00:02:45,545 --> 00:02:49,115 what's going to be shown in the button itself when it's displayed on the page. 50 00:02:49,355 --> 00:02:51,005 So here we have our form. 51 00:02:51,035 --> 00:02:52,685 This here is our entire form. 52 00:02:52,865 --> 00:02:56,255 We've got our label, our field and our button. 53 00:02:56,315 --> 00:02:58,625 I'm just going to zoom in here using the browser a bit. 54 00:02:58,625 --> 00:03:01,028 So it's a bit easier to see but of course, you're not going to see 55 00:03:01,028 --> 00:03:02,378 that unless you assume in as well. 56 00:03:02,897 --> 00:03:04,517 So let's now type something. 57 00:03:04,637 --> 00:03:06,987 Let's type Bob and I'll press submit. 58 00:03:07,320 --> 00:03:12,870 You can see that we get an error because as soon as we press submit, instead of 59 00:03:12,870 --> 00:03:19,180 staying in the path or the file that we have open here, we've gone to /entry or 60 00:03:20,180 --> 00:03:25,540 C:/entry and that is because the action we had in here is /entry so you can see 61 00:03:25,540 --> 00:03:28,880 that action is sending us to that page. 62 00:03:29,030 --> 00:03:31,190 And that is the page that received the data. 63 00:03:31,260 --> 00:03:33,600 Because we don't have anything running that knows what this 64 00:03:33,630 --> 00:03:35,400 is, it fails with an error. 65 00:03:35,640 --> 00:03:38,250 If you leave it blank, you'll stay on the same page. 66 00:03:38,310 --> 00:03:39,660 So that's something that you can do as well. 67 00:03:39,684 --> 00:03:45,084 But for now, what's interesting is this ? sample=Bob . You can see that 68 00:03:45,084 --> 00:03:51,234 we have a field with a name of sample, and we typed in the field, the text Bob. 69 00:03:51,894 --> 00:03:57,870 Because the forms method was get, that's the default, the data is sent in this way. 70 00:03:58,140 --> 00:04:03,700 In the URL of the page, we'll see field name field value. 71 00:04:04,290 --> 00:04:06,600 And we've got the question mark in front. 72 00:04:07,515 --> 00:04:11,835 If you have multiple fields and values, like two fields, one called sample, and 73 00:04:11,835 --> 00:04:17,745 one called sample2 You'll see an & sign there and sample2 =Adam, for example. 74 00:04:17,745 --> 00:04:20,805 So this would be what you would see if you had two fields. 75 00:04:21,225 --> 00:04:23,955 I'm sure you've seen this plenty of times as you've used the internet. 76 00:04:24,285 --> 00:04:25,545 And this is what that means. 77 00:04:25,545 --> 00:04:27,345 It's a form of that's been submitted. 78 00:04:27,345 --> 00:04:28,755 That's normally how it's used at least. 79 00:04:29,055 --> 00:04:32,475 And that sent some data to this URL there. 80 00:04:33,054 --> 00:04:34,854 Let's go back to our form here. 81 00:04:34,854 --> 00:04:35,964 I'm just going to refresh it. 82 00:04:35,964 --> 00:04:38,433 That's going to make the contents of the form go away and I'm going 83 00:04:38,433 --> 00:04:40,823 to change this to method = "POST". 84 00:04:41,074 --> 00:04:44,062 Now if I refresh and we type something like Bob in here. 85 00:04:44,092 --> 00:04:48,052 You'll see that we go to /entry but there's nothing at the back. 86 00:04:48,052 --> 00:04:51,292 There is no ?sample=Bob anywhere. 87 00:04:51,772 --> 00:04:55,612 That's because when you do method="POST", the data is sent somewhere else. 88 00:04:55,642 --> 00:05:01,222 It's not sent on the URL it's sent inside our network requests that is separate. 89 00:05:01,792 --> 00:05:06,931 Post is a bit better for when you've got long forms and you don't want the URL to 90 00:05:06,931 --> 00:05:11,011 be very long, or when you want to hide what you're sending a little bit better. 91 00:05:11,469 --> 00:05:15,735 Like I mentioned earlier the default is GET, and if you type method="GET" 92 00:05:15,925 --> 00:05:18,835 is the same thing as if you didn't type anything and that's going 93 00:05:18,835 --> 00:05:20,845 to include the data on the URL. 94 00:05:21,695 --> 00:05:24,775 Alrigh, so we've learned how to use forms to send data. 95 00:05:24,775 --> 00:05:27,715 Granted, this was a very quick overview of how they work just 96 00:05:27,715 --> 00:05:28,885 with a single input field. 97 00:05:29,125 --> 00:05:31,975 In the next video, we're going to learn about text areas and how we can 98 00:05:31,975 --> 00:05:35,545 allow users to type things in multiple lines, which is something that we're 99 00:05:35,545 --> 00:05:37,695 going to need for our microblog form. 100 00:05:38,115 --> 00:05:39,775 So I'll see you in the next video.