1 00:00:05,460 --> 00:00:08,520 Welcome back, everyone, to part two of our discussion on forms. 2 00:00:08,820 --> 00:00:14,310 We're going to briefly go over a couple of other input selection types, so there's going to be many 3 00:00:14,310 --> 00:00:17,400 different types of input selection we can actually set up for the user. 4 00:00:17,640 --> 00:00:22,590 We've already explored a couple of them like text, email and password, and we want to cover just a 5 00:00:22,590 --> 00:00:23,910 few more of them here. 6 00:00:24,240 --> 00:00:28,350 And keep in mind, we're going to introduce more and more of the for input selection types further along 7 00:00:28,350 --> 00:00:28,980 in the course. 8 00:00:29,280 --> 00:00:34,680 But if you're curious of what's available, you can always check out the Emden that is the Mozilla Developer 9 00:00:34,680 --> 00:00:36,900 Network web documentation online. 10 00:00:37,110 --> 00:00:42,270 For more details on input types and, more importantly, the attributes that are associated for specific 11 00:00:42,270 --> 00:00:43,020 input types. 12 00:00:43,410 --> 00:00:44,460 OK, let's get started. 13 00:00:44,460 --> 00:00:45,630 Head back to our code editor. 14 00:00:46,020 --> 00:00:46,240 All right. 15 00:00:46,260 --> 00:00:48,570 Here I am back inside Visual Studio code. 16 00:00:48,960 --> 00:00:55,350 As a quick note, typically when we're making each HTML documents, we will actually say doc and create 17 00:00:55,350 --> 00:00:58,710 a full heading and then the full body and so on. 18 00:00:59,070 --> 00:01:02,790 But for right now, since we're just doing really simple examples, I'm not bothering to follow that 19 00:01:03,000 --> 00:01:04,849 mainly for the sake of tech space. 20 00:01:04,920 --> 00:01:05,790 So keep that in mind. 21 00:01:06,450 --> 00:01:10,650 Later on, we will be doing things like separating out the head and the body, creating a title and 22 00:01:10,650 --> 00:01:11,070 so on. 23 00:01:11,520 --> 00:01:15,780 For right now, let's imagine that we want to create a hotel feedback form. 24 00:01:16,260 --> 00:01:20,160 However, there's going to be only certain responses that I want from a user. 25 00:01:20,400 --> 00:01:25,160 For example, I want to know whether they're from inside the USA or outside the USA. 26 00:01:25,200 --> 00:01:27,920 And I want to collect that information in a uniform manner. 27 00:01:27,930 --> 00:01:30,780 I don't want the user to have the ability to type anything out. 28 00:01:30,990 --> 00:01:32,760 They only have two buttons for it. 29 00:01:32,970 --> 00:01:34,170 So how to actually create this? 30 00:01:34,620 --> 00:01:36,420 Well, first off, I need to create my form. 31 00:01:36,660 --> 00:01:41,070 And let's have the action go to other HTML. 32 00:01:42,350 --> 00:01:46,130 And inside other HTML, we're still going to say thank you, but I'll say something like, thank you 33 00:01:46,130 --> 00:01:50,870 for filling out the form or for your feedback, et cetera. 34 00:01:51,590 --> 00:01:54,230 And then what I'm going to do here is inside the forum. 35 00:01:54,470 --> 00:02:01,220 I'm going to in fact, let's see outside the forum, I have a little heading that says hotel feedback. 36 00:02:01,700 --> 00:02:03,110 That way, it starts looking a little more real. 37 00:02:03,620 --> 00:02:05,990 So I have my heading, then I have the actual form. 38 00:02:07,490 --> 00:02:10,699 And inside the form, I'm going to create a. 39 00:02:11,880 --> 00:02:12,400 Inputs. 40 00:02:13,470 --> 00:02:19,170 And instead of a text input, what I want to know is where is the user from and let's say, inside the 41 00:02:19,170 --> 00:02:20,640 USA or outside the USA? 42 00:02:20,940 --> 00:02:26,580 So for that sort of thing where I only want to have a few select options, a radio button could work 43 00:02:26,580 --> 00:02:26,970 for us. 44 00:02:27,390 --> 00:02:31,080 So here I have type radio and note that it's a real button I can click. 45 00:02:31,830 --> 00:02:38,760 So then I can add a little label to it so I can put a label in front of this and say This is going to 46 00:02:38,760 --> 00:02:40,530 be inside. 47 00:02:41,130 --> 00:02:46,830 And the thing is, I still need some information here for the actual question that's being asked. 48 00:02:47,370 --> 00:02:51,930 So right about that label, I can create a paragraph that says. 49 00:02:53,130 --> 00:02:58,590 Are you from inside or outside USA? 50 00:02:59,730 --> 00:03:03,900 Maybe you were running a hotel in the United States and I want to know if we're getting more visitors 51 00:03:03,900 --> 00:03:08,670 from inside United States or outside the United States, so I can see here are you from inside or outside 52 00:03:08,670 --> 00:03:12,760 the USA and then inside they can go ahead and click on it. 53 00:03:12,780 --> 00:03:14,380 I want another set. 54 00:03:14,400 --> 00:03:15,780 So we're going to say label. 55 00:03:16,230 --> 00:03:17,790 And then again, input type. 56 00:03:18,270 --> 00:03:19,920 And this one is going to be another radio button. 57 00:03:20,860 --> 00:03:23,590 And let's have this one before outside. 58 00:03:24,340 --> 00:03:24,630 OK. 59 00:03:24,880 --> 00:03:27,460 And maybe this is a little confusing to have them both right next to each other. 60 00:03:27,790 --> 00:03:30,070 So I put a little break in between them. 61 00:03:30,070 --> 00:03:32,560 So inside and outside, keep my later on. 62 00:03:32,560 --> 00:03:34,270 We're going to be able to format these a lot nicer. 63 00:03:34,750 --> 00:03:38,680 Now, unfortunately, the way I have it set up right now is I don't actually have this connection to 64 00:03:38,680 --> 00:03:40,330 the label and the input. 65 00:03:40,360 --> 00:03:45,610 So this allows me to actually select both of them, which sometimes you may actually want that for them 66 00:03:45,610 --> 00:03:47,350 to be able to select multiple options. 67 00:03:47,710 --> 00:03:52,420 But what I only want is for only one of these to be selectable at once inside and outside. 68 00:03:52,900 --> 00:03:53,890 So how can I do that? 69 00:03:54,370 --> 00:04:00,580 Well, I'm first going to actually assign a label to these inputs by connecting a four to an ID for 70 00:04:00,580 --> 00:04:01,000 the input. 71 00:04:01,450 --> 00:04:04,210 So we're going to have to say four in. 72 00:04:05,110 --> 00:04:11,680 And let's make the idea of this input element be in, and we'll say this one is liable for out. 73 00:04:12,780 --> 00:04:19,019 And then we're going to have the I.T. here be equal to the string out. 74 00:04:19,529 --> 00:04:23,730 OK, so now these labels are officially connected to their inputs, but that doesn't actually solve 75 00:04:23,730 --> 00:04:25,980 the problem of inside and outside. 76 00:04:26,490 --> 00:04:34,830 However, recall that when we assign names to the actual inputs, that allows us to create what is essentially 77 00:04:34,830 --> 00:04:40,200 going to be a variable that we can send to the other action page that is other than HTML. 78 00:04:40,770 --> 00:04:47,370 So let's say the name for this input is equal to in and the name. 79 00:04:48,540 --> 00:04:55,890 For this input is equal to out, so I have two names here in and in and out. 80 00:04:56,370 --> 00:04:59,040 And then we have inside and outside and the radio buttons. 81 00:04:59,510 --> 00:05:00,720 So I'm going to save those changes. 82 00:05:01,140 --> 00:05:06,570 And if I select one right now, then I still need to submit button to go to the other page. 83 00:05:06,570 --> 00:05:07,500 So let's actually do that. 84 00:05:07,920 --> 00:05:12,990 So we're going to say input type is submit that we go. 85 00:05:13,440 --> 00:05:15,150 And let's also have this be on a new line. 86 00:05:15,150 --> 00:05:16,440 So we're going to break element there. 87 00:05:17,450 --> 00:05:18,740 OK, so very simple form. 88 00:05:19,130 --> 00:05:22,250 I have my label input, and right now my name is in. 89 00:05:22,430 --> 00:05:25,280 Name is out for inside and outside there, but for you buttons. 90 00:05:25,280 --> 00:05:33,260 So I select inside hit submit says thank you for filling out the form and you notice it says in is equal 91 00:05:33,260 --> 00:05:35,760 to on so on. 92 00:05:35,780 --> 00:05:39,740 Essentially, it means, hey, was that radio been turned on in the previous page? 93 00:05:40,680 --> 00:05:46,830 Now we can go back here, and if we select inside and outside, I can hit submit and it said in was 94 00:05:46,830 --> 00:05:53,820 on and then out was also selected as on the radio buttons were on, however, notice that what would 95 00:05:53,820 --> 00:06:00,790 happen if I force them to share the same name space so I wouldn't allow for two separate names. 96 00:06:00,810 --> 00:06:07,530 Instead, I would call this name something like Locy for location, and I would actually force both 97 00:06:07,530 --> 00:06:10,440 radio input buttons to share the same name. 98 00:06:10,890 --> 00:06:15,570 So now that they're sharing the same name, look what's going to happen to the form when you try to 99 00:06:15,570 --> 00:06:16,320 select both of them? 100 00:06:16,530 --> 00:06:17,390 It says inside. 101 00:06:17,760 --> 00:06:20,820 And now if I try to also select outside, it switches them. 102 00:06:21,270 --> 00:06:27,030 So now each team is smart enough to understand, Hey, these radio buttons are sharing the same name 103 00:06:27,030 --> 00:06:33,060 space, so I'm not going to allow you to select both of them as on, because in order for them to share 104 00:06:33,060 --> 00:06:35,730 the same name space, I can only have one of them be on. 105 00:06:35,970 --> 00:06:39,830 In order for this feedback to make sense as it goes to the other HTML. 106 00:06:40,290 --> 00:06:46,170 So that is how we're able to link input buttons together by making them share and forcing them to have 107 00:06:46,170 --> 00:06:47,160 the same name. 108 00:06:47,520 --> 00:06:51,930 Then when I hit submit, I can see it just says location is on here. 109 00:06:52,320 --> 00:06:56,580 So that's not actually very helpful as far as saying well which button was clicked. 110 00:06:57,720 --> 00:07:04,320 So what I need to do is assign an attribute known as value, so the value will be able to distinguish 111 00:07:04,320 --> 00:07:06,980 between inside and outside being clicked. 112 00:07:06,990 --> 00:07:12,930 So I'm going to add in here value is equal to and let's have this one be outside or out. 113 00:07:13,530 --> 00:07:16,230 And then we're going to say the value here. 114 00:07:17,180 --> 00:07:19,340 Is equal to in. 115 00:07:20,910 --> 00:07:25,650 So let me just quickly clarify what ID, name and value are doing. 116 00:07:26,130 --> 00:07:30,270 It is connecting the label for this input. 117 00:07:30,900 --> 00:07:33,330 Later on, we'll see that this actually has to do with CSI styling as well. 118 00:07:34,020 --> 00:07:38,880 The name is going to be able to link the actual input together. 119 00:07:39,390 --> 00:07:44,250 The value is going to distinguish which real button is actually being clicked as I send it to the next 120 00:07:44,250 --> 00:07:44,640 page. 121 00:07:45,150 --> 00:07:49,830 So going to come back here and let's go ahead and select inside now. 122 00:07:49,860 --> 00:07:50,610 Hit Submit. 123 00:07:51,800 --> 00:07:56,030 And now I can see that it says, OK, location is equal to out. 124 00:07:56,540 --> 00:08:00,710 You'll notice the default value for the radio buttons was on. 125 00:08:01,190 --> 00:08:04,400 So the default value was looking something like this on. 126 00:08:05,770 --> 00:08:10,120 And on for both buttons, but obviously that's not super helpful as I get to the next page just to know 127 00:08:10,120 --> 00:08:15,640 that location was on because no matter what I do for each input, even though I can only select one, 128 00:08:15,940 --> 00:08:18,460 this name value combination would be the same. 129 00:08:18,790 --> 00:08:25,720 So instead, I don't want to say, OK, this value is inside for the first one, and this value is going 130 00:08:25,720 --> 00:08:27,310 to be outside for the second one. 131 00:08:27,700 --> 00:08:33,520 And hopefully I can get the idea of name value pairs or in Python, we actually call these key value 132 00:08:33,520 --> 00:08:33,880 pairs. 133 00:08:34,150 --> 00:08:40,659 But either way, you get the idea that now I can send back name value pairs to the next page and also 134 00:08:40,659 --> 00:08:41,140 have them linked. 135 00:08:41,140 --> 00:08:44,770 So I can only select one radio button at a time, which is super useful. 136 00:08:45,660 --> 00:08:47,430 OK, so that's the radio button. 137 00:08:47,850 --> 00:08:51,760 The other thing I can begin to ask are things like, let's say, how was your service? 138 00:08:51,780 --> 00:08:56,770 Maybe it was great, OK or bad for this, I can use a dropdown menu. 139 00:08:56,790 --> 00:09:00,630 I'm going to delete what we have here so far for the radio buttons. 140 00:09:01,070 --> 00:09:02,220 Just save a little bit of space. 141 00:09:02,760 --> 00:09:06,480 And for this, I'm going to use the select tag. 142 00:09:06,570 --> 00:09:12,000 It's not quite the same as an input tag, but I can say select and I'm going to give this a name, let's 143 00:09:12,000 --> 00:09:12,930 say stars. 144 00:09:13,710 --> 00:09:20,280 And then right above this, I'll say a paragraph here and say, How was your service? 145 00:09:23,470 --> 00:09:24,120 Question mark. 146 00:09:25,350 --> 00:09:30,360 OK, so it says, how is your service a note by saying select, I give the option to have a little selection 147 00:09:30,360 --> 00:09:36,630 here and then inside, I need to actually put the options that are going to be part of the select tag. 148 00:09:37,140 --> 00:09:38,100 So I say option. 149 00:09:39,440 --> 00:09:42,410 And then I can give it a value like great. 150 00:09:43,490 --> 00:09:45,880 And let's go ahead and copy this couple more times. 151 00:09:48,180 --> 00:09:52,950 And then let's say the Sun was OK, and this one is bad. 152 00:09:53,130 --> 00:09:56,940 You can almost think of this as like three stars, two stars or one star service. 153 00:09:57,360 --> 00:10:03,240 And now you'll notice I have three options here, but don't actually see what they actually say as far 154 00:10:03,240 --> 00:10:05,040 as what's actually shown in the dropdown. 155 00:10:05,280 --> 00:10:09,280 So for that, you can decide what text you want actually put in inside the options. 156 00:10:09,280 --> 00:10:11,940 So I could say three to one. 157 00:10:13,060 --> 00:10:17,740 And no, now I get the options three to one and oops, accidentally put that in there. 158 00:10:17,860 --> 00:10:18,340 There we go. 159 00:10:18,430 --> 00:10:18,670 OK. 160 00:10:18,700 --> 00:10:25,510 Three two one Those go inside in between the option tax and I can see three to one in my dropdown. 161 00:10:26,200 --> 00:10:27,430 So how does this work again? 162 00:10:27,460 --> 00:10:29,290 Well, you have this select call. 163 00:10:29,650 --> 00:10:33,010 You can give it a name and then you have the value that's associated of that name. 164 00:10:33,400 --> 00:10:40,000 So no, I can only select one value either greats, OK or bad to be associated with this name stars. 165 00:10:40,300 --> 00:10:43,270 So all of these options are going to be connected to name. 166 00:10:43,660 --> 00:10:48,790 So let's go ahead and choose two to say that Starz was going to be OK. 167 00:10:49,150 --> 00:10:52,930 Remember, the user sees two, but programmatically on the back end, I'm going to see a name value 168 00:10:52,930 --> 00:10:56,380 pair that says something like Starz is equal to OK. 169 00:10:57,300 --> 00:11:03,540 Now I'm going to save this hit submit and on the back end, they see here stars as equal to OK, now 170 00:11:03,720 --> 00:11:08,250 maybe that wasn't super useful and I would prefer to have something like value is equal the two here 171 00:11:08,490 --> 00:11:10,920 and actually send a two back so it can actually have a number. 172 00:11:10,920 --> 00:11:16,950 But hopefully you get the idea that again, we're just creating name value pairs in order to link options 173 00:11:16,950 --> 00:11:18,330 together within select. 174 00:11:18,930 --> 00:11:22,530 Now, the other different type of input I want to show you is a text area input. 175 00:11:23,010 --> 00:11:29,190 This one also is not really an input tag, but you can just say text area and then note it by default 176 00:11:29,190 --> 00:11:33,720 gives us a name I.D. columns and rows that will actually define the size of the text area. 177 00:11:34,050 --> 00:11:38,700 If I come back here, you can see I have a text area that I can be in the type in. 178 00:11:38,710 --> 00:11:45,360 So this is for the kind of thing that I can say just open ended any other comments, question mark. 179 00:11:45,630 --> 00:11:47,740 And now the person can type any text they want. 180 00:11:47,760 --> 00:11:49,980 They just have a really large text area to play with. 181 00:11:50,280 --> 00:11:55,680 This is different than just a text box, because now I can actually have the user be able to resize 182 00:11:55,680 --> 00:12:00,840 this on their own and rows and columns and give me a default size so I could make this, you know, 183 00:12:01,440 --> 00:12:02,580 much larger, really small. 184 00:12:02,910 --> 00:12:08,370 I can make it just like a three by one, just tiny little text box so they can begin to type in. 185 00:12:08,640 --> 00:12:12,840 But you'll probably to want to have it be larger and the literal looks to be able to adjust the size 186 00:12:12,840 --> 00:12:15,600 of this text area based off the size of the user screen. 187 00:12:16,050 --> 00:12:18,270 That's the last one I want to point out it's text area. 188 00:12:18,540 --> 00:12:19,080 Same idea. 189 00:12:19,080 --> 00:12:21,690 You can have a name and value associated with it. 190 00:12:22,470 --> 00:12:22,800 OK. 191 00:12:23,160 --> 00:12:25,920 That's it for the different types of inputs. 192 00:12:25,950 --> 00:12:28,680 Again, we're going to discover more and more slowly as we go throughout the course. 193 00:12:28,950 --> 00:12:31,500 But just get the idea in your mind that there's a form. 194 00:12:31,710 --> 00:12:33,510 It's going to have labels and inputs. 195 00:12:33,510 --> 00:12:38,910 And sometimes there's special types of inputs like text area or dropdown selects that are also available 196 00:12:38,910 --> 00:12:39,330 to us. 197 00:12:39,750 --> 00:12:40,080 OK. 198 00:12:40,320 --> 00:12:40,760 Thanks. 199 00:12:40,770 --> 00:12:41,810 And I'll see you at the next lecture.