1 00:00:07,460 --> 00:00:11,510 Let's get started with HTML forms. 2 00:00:13,580 --> 00:00:23,820 Understanding forms is crucial as a web developer, irrespective of the career path that you would choose. 3 00:00:23,840 --> 00:00:31,970 We are going to make use of forms a lot, so understanding forms play a major role. 4 00:00:32,180 --> 00:00:35,930 So the first question is what is a form? 5 00:00:36,380 --> 00:00:42,830 Well, forms are used to collect data on a web page. 6 00:00:43,160 --> 00:00:54,590 So a form is like a transporter where we can send data from the client side to the server to be processed. 7 00:00:55,070 --> 00:00:58,190 Let's say that we are applying for a job. 8 00:00:58,640 --> 00:01:10,370 The way we can communicate to the employer is to submit a data and we can do so by using a form and 9 00:01:10,370 --> 00:01:11,090 a form. 10 00:01:11,090 --> 00:01:18,800 Help us to submit data to a different server or to different applications. 11 00:01:19,250 --> 00:01:22,830 So how are we going to make use of forms? 12 00:01:22,850 --> 00:01:27,470 So let's get started with basic HTML forms. 13 00:01:27,740 --> 00:01:33,680 So let's get back to Visual Studio Code and we are beginning a new concept. 14 00:01:33,680 --> 00:01:41,870 So I'm going to create a folder called Forms, which is lesson number six as forms. 15 00:01:42,620 --> 00:01:56,450 And inside I'm going to create one file and I will say form dot HTML and let me scaffold the HTML as 16 00:01:56,450 --> 00:01:57,020 that. 17 00:01:57,410 --> 00:02:06,470 And here as basic form, let me add dh1 as basic form. 18 00:02:08,729 --> 00:02:19,700 And as always, let me underline it and open it in my browser and let me open here as that. 19 00:02:19,710 --> 00:02:22,410 So this is a form. 20 00:02:23,160 --> 00:02:23,580 All right. 21 00:02:23,580 --> 00:02:27,920 So how are we going to create a form, maybe guessing? 22 00:02:27,930 --> 00:02:31,320 Well, we are going to use a tag. 23 00:02:31,500 --> 00:02:36,180 Let me add a comment as basic form. 24 00:02:36,780 --> 00:02:38,940 So here we go. 25 00:02:39,600 --> 00:02:44,340 We need to bring in the form tag as that. 26 00:02:44,880 --> 00:02:50,220 And inside we are going to have nested element. 27 00:02:51,080 --> 00:02:55,820 And we have one type called input. 28 00:02:56,830 --> 00:03:03,610 And impute is a way we can submit data to a server. 29 00:03:03,850 --> 00:03:12,340 So when I see this one and let's have a look, you can see for this, I can type in data here and it 30 00:03:12,340 --> 00:03:13,870 can be submitted. 31 00:03:14,320 --> 00:03:17,350 That's the purpose for the input. 32 00:03:18,050 --> 00:03:20,900 But here is the question. 33 00:03:21,620 --> 00:03:30,680 Remember that we have different types of data that we can send to a server or to an application to be 34 00:03:30,680 --> 00:03:41,810 processed, and that is we can allow the user to send a number that is, let's say, one, the age or 35 00:03:41,810 --> 00:03:43,850 amount or whatever. 36 00:03:44,090 --> 00:03:48,650 Or we want the user to send some text. 37 00:03:49,220 --> 00:03:55,580 So we are going to use the same impute tag or element. 38 00:03:56,030 --> 00:04:02,270 But one cool thing is that for this input it accept couple of attribute. 39 00:04:02,480 --> 00:04:06,470 For the meantime, let's leave it as it is. 40 00:04:06,830 --> 00:04:14,930 And I'm going to give more description about this input because as it stands right now, we don't know 41 00:04:14,930 --> 00:04:18,110 what kind of data that we want the user to send. 42 00:04:18,589 --> 00:04:26,870 So we are going to provide more information about what this input does and we're going to use what is 43 00:04:26,870 --> 00:04:28,130 called label. 44 00:04:28,490 --> 00:04:34,070 And let me remove the four attribute for noun and for the label. 45 00:04:34,070 --> 00:04:38,600 I will say enter full name. 46 00:04:39,500 --> 00:04:45,560 When I save this one, as you can see, we have enter full name. 47 00:04:46,100 --> 00:04:49,400 Let's say we are building a registration form. 48 00:04:49,820 --> 00:04:55,360 And for registration form, we want the user to submit some specific data. 49 00:04:55,370 --> 00:05:01,130 For example, age or whether you are married or not, and other properties. 50 00:05:01,370 --> 00:05:06,050 So I'm going to copy this and paste it. 51 00:05:06,320 --> 00:05:11,810 And I will say for this one as your age. 52 00:05:13,470 --> 00:05:14,880 When I see this one. 53 00:05:14,880 --> 00:05:18,750 As you can see, they all move on one line. 54 00:05:18,780 --> 00:05:24,330 It tells you that input fields are in line element. 55 00:05:24,570 --> 00:05:30,330 If you want them to be on top of each other, we can wrap it inside. 56 00:05:30,330 --> 00:05:30,960 Dave. 57 00:05:31,260 --> 00:05:35,940 So I'm going to select this and put it inside. 58 00:05:35,940 --> 00:05:36,540 Dave. 59 00:05:38,860 --> 00:05:43,360 Likewise, they each put it inside. 60 00:05:43,360 --> 00:05:43,930 Dave. 61 00:05:46,180 --> 00:05:46,960 Save it. 62 00:05:46,960 --> 00:05:47,800 And let's see. 63 00:05:48,010 --> 00:05:51,310 As you can see, they are on top of each other. 64 00:05:51,580 --> 00:05:57,670 If I want to have some spacing for the meantime, we haven't talked about CSS yet, so I'm going to 65 00:05:57,670 --> 00:06:02,110 use what is called the b r, meaning the break tag. 66 00:06:02,770 --> 00:06:07,000 So when I save it, as you can see now, we have some spacing. 67 00:06:07,760 --> 00:06:12,220 And lastly, I want to have a button to click on. 68 00:06:12,230 --> 00:06:16,580 So inside the form, which is this. 69 00:06:18,070 --> 00:06:26,830 After the last imput, which is the age I'm going to provide button and I will say submit. 70 00:06:28,180 --> 00:06:29,020 Save it. 71 00:06:29,020 --> 00:06:30,150 And let's have a look. 72 00:06:30,160 --> 00:06:32,080 And there we go. 73 00:06:32,260 --> 00:06:42,040 So this is how we can create basic form, but we lack some important ingredient, and that is some of 74 00:06:42,040 --> 00:06:43,330 the attributes. 75 00:06:43,720 --> 00:06:50,590 Like I said, we can specify the kind of data that we want the user to submit. 76 00:06:50,890 --> 00:06:51,630 But it's not. 77 00:06:51,640 --> 00:06:52,390 Right now. 78 00:06:52,510 --> 00:06:55,170 The user can submit anything. 79 00:06:55,180 --> 00:06:56,770 For example, text. 80 00:06:57,780 --> 00:07:03,870 And if I want a user to submit a number, the user can still type in text. 81 00:07:04,170 --> 00:07:06,150 So we need to avoid this. 82 00:07:06,300 --> 00:07:14,940 In the next video you will talk about HTML forms attribute, and that way we can specify the kind of 83 00:07:14,940 --> 00:07:17,730 data that you want the user to submit. 84 00:07:18,180 --> 00:07:18,660 All right. 85 00:07:18,660 --> 00:07:20,640 Let's continue in the next video.