1 00:00:00,360 --> 00:00:02,050 And welcome back. 2 00:00:02,100 --> 00:00:09,210 We're going to get into some more advanced tags and probably the most important tag that you'll use 3 00:00:09,210 --> 00:00:14,400 other than the ones that we've covered so far, are tags that we need to create forms. 4 00:00:15,060 --> 00:00:21,930 As you know, when you go to websites, usually there's some sort of a login or registration form. 5 00:00:21,930 --> 00:00:25,370 So we're going to build that out today to get started. 6 00:00:25,410 --> 00:00:28,040 Let's just create a new file here. 7 00:00:28,530 --> 00:00:33,690 We'll save it and call it registered HTML on our desktop. 8 00:00:35,120 --> 00:00:43,280 Perfect, and we know that we want a nice also we use our little shortcut and we'll title it register 9 00:00:43,580 --> 00:00:44,300 save that. 10 00:00:44,600 --> 00:00:49,100 And now in the index file, let's add another link. 11 00:00:50,810 --> 00:00:58,240 That references register, dot e-mail and I'll just say here, register. 12 00:00:59,000 --> 00:01:04,280 All right, we'll save both of these files and let's refresh. 13 00:01:04,880 --> 00:01:05,990 We have register. 14 00:01:07,080 --> 00:01:07,870 Click register. 15 00:01:07,920 --> 00:01:13,380 Well, we have nothing yet, but it looks like it's working, let's add this on a new line just because 16 00:01:13,380 --> 00:01:14,700 it looks prettier that way. 17 00:01:14,910 --> 00:01:18,810 So to do that, if you remember, we're going to add a brake tag. 18 00:01:19,230 --> 00:01:20,250 So let's refresh. 19 00:01:20,550 --> 00:01:21,210 There you go. 20 00:01:21,240 --> 00:01:23,950 We have new page and register. 21 00:01:24,690 --> 00:01:29,960 OK, so let's build out this form if we go in to register DOT. 22 00:01:31,480 --> 00:01:36,820 The way we write forms in HTML, while conveniently there's a form tag. 23 00:01:38,890 --> 00:01:43,690 OK, but this form tag itself, it needs to have the actual form inside of it. 24 00:01:44,620 --> 00:01:47,900 So what kind of form elements do we have? 25 00:01:47,920 --> 00:01:55,450 Well, again, if we remember our good old friend W three C, let's type in forms. 26 00:01:57,230 --> 00:02:00,140 And we can see over here that we have a small farms. 27 00:02:01,660 --> 00:02:08,980 And refresh, we'll make that full screen and you can see over here that there's a ton of information 28 00:02:08,980 --> 00:02:12,580 on it, but you can look that up yourself for now. 29 00:02:13,560 --> 00:02:18,210 I'm going to introduce you to the most common ones, probably the ones that you'll use 90 percent of 30 00:02:18,210 --> 00:02:18,600 the time. 31 00:02:19,760 --> 00:02:25,880 The first one, as we do with any form and let's go to that base for now, is what we want to enter 32 00:02:25,880 --> 00:02:26,270 our name. 33 00:02:26,480 --> 00:02:27,290 So how do we do that? 34 00:02:27,290 --> 00:02:29,780 We have a input tag. 35 00:02:30,880 --> 00:02:41,260 That has a type of text because, well, our name will be in text form and we can close that off and 36 00:02:41,260 --> 00:02:43,460 it's actually a self-closing tag. 37 00:02:43,720 --> 00:02:49,480 So now if I save and refresh, OK, we have a little box here. 38 00:02:50,050 --> 00:02:51,250 Hopefully you can see that. 39 00:02:51,370 --> 00:02:55,390 But, well, we should probably title it because we won't know what to answer that way. 40 00:02:55,390 --> 00:02:56,590 So we're going to put in here. 41 00:02:56,590 --> 00:02:59,890 We're going to say first name. 42 00:03:00,870 --> 00:03:07,950 Semicolon and safe, let's refresh, we have first name and now let's make this a little bit bigger. 43 00:03:08,490 --> 00:03:08,990 There you go. 44 00:03:09,390 --> 00:03:12,300 Now you can enter your name in here. 45 00:03:15,930 --> 00:03:18,000 Let's add another one for our last name. 46 00:03:22,660 --> 00:03:29,800 And again, we'll have our input type, so that's an attribute and a value of text. 47 00:03:32,310 --> 00:03:39,390 And if we refresh, we have last name, OK, but it kind of looks ugly, remember that HTML just reads 48 00:03:39,390 --> 00:03:42,990 line by line and doesn't really know that we want a space here. 49 00:03:42,990 --> 00:03:45,030 So again, we can add a. 50 00:03:47,120 --> 00:03:56,780 Break that here and refresh, and we have first name and last name, OK, that's that's fairly self-explanatory. 51 00:03:57,110 --> 00:03:59,710 Now, what else do we have in a form? 52 00:03:59,720 --> 00:04:01,790 We have email. 53 00:04:01,820 --> 00:04:08,090 So let's add another field, which is email, and we'll do input again. 54 00:04:08,090 --> 00:04:10,100 Type calls, text. 55 00:04:12,150 --> 00:04:15,180 Well, add another break here, because we're going to need that spacing. 56 00:04:16,230 --> 00:04:19,230 And let's save refresh, awesome. 57 00:04:20,370 --> 00:04:23,580 OK, so we have our general registration form. 58 00:04:24,790 --> 00:04:31,330 And obviously with any form, we need some sort of buttons, right, like we need to submit this somewhere 59 00:04:31,330 --> 00:04:32,230 so we can register. 60 00:04:32,470 --> 00:04:36,550 Well, again, there's a nice appetite for that. 61 00:04:36,670 --> 00:04:40,040 So we do input instead of a text type. 62 00:04:40,090 --> 00:04:41,770 There is a submit. 63 00:04:46,010 --> 00:04:47,660 If we had another break in here. 64 00:04:49,870 --> 00:04:54,030 And I say this, I refresh has a smeeton now. 65 00:04:54,980 --> 00:04:58,250 Now, where did this summit come from? 66 00:04:58,520 --> 00:05:04,880 Well, when you put an input type submit, it automatically creates a button and if you don't specify 67 00:05:04,880 --> 00:05:07,310 what to say, I'll just have this text. 68 00:05:07,310 --> 00:05:11,060 But we can change that so we can put value. 69 00:05:12,750 --> 00:05:15,450 And we'll put register. 70 00:05:16,610 --> 00:05:20,890 Save that refresh, we now have a register button. 71 00:05:21,900 --> 00:05:31,680 OK, but what if we make mistakes in this field, we write stuff and we want to reset this form again, 72 00:05:31,930 --> 00:05:34,110 there's a now there input for that. 73 00:05:35,880 --> 00:05:40,740 And the type of that input, as you can imagine, is reset. 74 00:05:42,060 --> 00:05:47,400 So now if we close this, had another break in here, actually, we can keep that on the same line. 75 00:05:47,960 --> 00:05:49,620 We'll save refresh. 76 00:05:50,640 --> 00:05:56,100 And we have reset, so now if I type in anything in here and let's say I don't like this, I need to 77 00:05:56,100 --> 00:05:59,970 reset the form, I can just click reset and it clears everything for us. 78 00:06:00,970 --> 00:06:07,930 OK, you may be asking yourself what happens when we click register before we get into that, I want 79 00:06:07,930 --> 00:06:13,690 to just go through the common input types and then we'll click registers to see what happens with the 80 00:06:13,690 --> 00:06:14,320 email. 81 00:06:15,130 --> 00:06:20,800 We ideally want, first of all, for it to be required so that when you click register, if you haven't 82 00:06:20,800 --> 00:06:23,920 provided an email, it won't let you register. 83 00:06:24,400 --> 00:06:28,630 And there's an attribute that we can use for that and that is required. 84 00:06:30,360 --> 00:06:37,950 And here we don't actually have to specify a value because automatically it's assumed that required 85 00:06:37,950 --> 00:06:41,520 equals to true, which means that this form field is required. 86 00:06:41,940 --> 00:06:50,610 So if I say that I refresh and I leave it blank and I click register, I will say, please fill out 87 00:06:50,610 --> 00:06:51,160 this field. 88 00:06:52,220 --> 00:06:56,120 Now, we also want to make sure that it's an appropriate email field. 89 00:06:56,550 --> 00:07:02,310 So if I type something like this, we still want to make sure that, you know, this is an incorrect 90 00:07:02,310 --> 00:07:02,670 email. 91 00:07:02,680 --> 00:07:03,720 We don't want to register. 92 00:07:04,820 --> 00:07:10,100 So the input type of text that I told you for email is actually wrong, there's a specific one that 93 00:07:10,100 --> 00:07:13,250 we can use, which is, as you can imagine, email. 94 00:07:13,940 --> 00:07:20,780 So now if I refresh and type in something that's not an email and I click register. 95 00:07:22,210 --> 00:07:24,880 I'll say please include an app and the email address. 96 00:07:26,290 --> 00:07:30,380 Very nice, it's kind of like magic, it does this for you, which is very, very nice. 97 00:07:31,390 --> 00:07:36,800 Let's expand on our knowledge of inputs and add a few more fields that will most likely need. 98 00:07:37,030 --> 00:07:41,220 We usually want to know somebody's birthday. 99 00:07:41,500 --> 00:07:44,550 So let's add birthday here. 100 00:07:44,590 --> 00:07:47,470 And for this input type, let's do. 101 00:07:54,130 --> 00:08:01,690 So if I say this and I refresh look that we have a nice little dick picker so I can pick anything in 102 00:08:01,690 --> 00:08:01,900 here. 103 00:08:03,430 --> 00:08:04,860 All right, what else do we need? 104 00:08:04,870 --> 00:08:11,300 We also need gender, so we'll do input type and for gender. 105 00:08:11,320 --> 00:08:16,870 Well, there's no specific impetus for gender, but there is something called radio. 106 00:08:18,030 --> 00:08:21,360 And radio is, as the name suggest, radio buttons. 107 00:08:22,440 --> 00:08:23,340 So now. 108 00:08:24,560 --> 00:08:30,660 Click refresh and, well, I have one radio button, but we ideally want to have options, right? 109 00:08:30,680 --> 00:08:31,740 So how do we do that? 110 00:08:32,000 --> 00:08:40,250 So for the radio, we also need to say whether it's male or female, let's have within the gender. 111 00:08:40,310 --> 00:08:45,950 We're going to have a break over here in the line and we'll say. 112 00:08:47,010 --> 00:08:53,670 And put type radio and we'll say male and we also want. 113 00:08:57,770 --> 00:08:59,390 And we also want. 114 00:09:02,430 --> 00:09:10,320 And when we refresh this, we have male, female and other, but you see a problem here, I just click 115 00:09:10,320 --> 00:09:16,290 the radio buttons and I can't deselect them and ideally you should only be able to select one. 116 00:09:16,880 --> 00:09:21,330 And right now, the way the radio buttons are, they don't know of each other's existence. 117 00:09:21,510 --> 00:09:27,720 We want to make sure that they know that they're connected, their family, and only one of them can 118 00:09:27,720 --> 00:09:28,170 be picked. 119 00:09:28,980 --> 00:09:29,940 So how do we do that? 120 00:09:30,450 --> 00:09:34,420 The way we do that is through the name attribute. 121 00:09:34,770 --> 00:09:38,790 So for the name, we'll say gender. 122 00:09:39,740 --> 00:09:48,680 And this name attribute needs to match on all the radio buttons so that they know they are together, 123 00:09:48,710 --> 00:09:51,230 they're part of the gender input field. 124 00:09:51,380 --> 00:09:53,900 So if I save here and refresh. 125 00:09:55,630 --> 00:09:59,350 Now you can see that I can only select one. 126 00:10:00,950 --> 00:10:01,990 All right, perfect. 127 00:10:02,180 --> 00:10:03,710 What else should we have? 128 00:10:03,740 --> 00:10:07,940 Well, let's say I really want to know if you have pets. 129 00:10:09,230 --> 00:10:10,160 So with pets. 130 00:10:11,850 --> 00:10:19,950 We're going to have input type or we can have multiple pets, so we won't be radio buttons, we want 131 00:10:20,100 --> 00:10:20,880 checkbox. 132 00:10:21,930 --> 00:10:32,760 So checkbox, we wanted to have cats or dogs, but cat and we want to have. 133 00:10:39,240 --> 00:10:42,750 Check box, and we want to have dogs. 134 00:10:44,320 --> 00:10:52,210 So let's save that, let's refresh and look at that, we have pets, but this time is checkboxes, which 135 00:10:52,210 --> 00:10:52,690 means. 136 00:10:54,270 --> 00:10:55,350 I can select multiple.