1 00:00:05,370 --> 00:00:10,350 Welcome back in this final lecture in our crash course section of each team all we're going to quickly 2 00:00:10,350 --> 00:00:16,900 discuss form selections basically we're just going to explore a few more form input types that require 3 00:00:16,900 --> 00:00:18,670 some extra element Tex. 4 00:00:18,670 --> 00:00:19,480 Let's get started. 5 00:00:19,600 --> 00:00:22,310 All right here we are back in our basic watched him l file. 6 00:00:22,360 --> 00:00:27,760 I have a form object and we're just going to cover three types of inputs extra ones and those are linking 7 00:00:27,760 --> 00:00:32,620 radio buttons dropdown menus and text area inputs. 8 00:00:32,710 --> 00:00:36,760 So let's create an example form for asking if someone owns a dog. 9 00:00:37,050 --> 00:00:42,600 Or create a heading inside of this and say do you already own a dog. 10 00:00:42,730 --> 00:00:43,360 Question mark. 11 00:00:43,360 --> 00:00:44,600 Save this. 12 00:00:44,680 --> 00:00:48,100 I refreshed the page and now I see do you already own a dog. 13 00:00:48,160 --> 00:00:56,080 So what I can do is I can have an input type and the type I can provide is radio and if you just refresh 14 00:00:56,090 --> 00:00:59,910 this you should now see a little radio button show up. 15 00:00:59,950 --> 00:01:03,700 So let's give this some names and values. 16 00:01:03,700 --> 00:01:10,250 So I'll say the name of this is dog choice and the value is yes. 17 00:01:10,440 --> 00:01:12,520 And let's connect it to a label. 18 00:01:12,860 --> 00:01:16,620 So the label will say call it. 19 00:01:16,870 --> 00:01:17,950 Yes. 20 00:01:18,130 --> 00:01:22,540 And then give it an idea of yes as well. 21 00:01:22,540 --> 00:01:25,320 So that way we can connect this label to this radio button. 22 00:01:26,640 --> 00:01:32,510 And also yes save that and when it refreshed us I now see the already own a dog. 23 00:01:32,530 --> 00:01:33,550 Yes. 24 00:01:33,670 --> 00:01:35,400 And then the radio button. 25 00:01:35,440 --> 00:01:36,140 OK. 26 00:01:36,340 --> 00:01:38,150 So that's a single radio button. 27 00:01:38,290 --> 00:01:42,770 Often however you'll see multiple radio buttons and you'll see them connected to each other. 28 00:01:42,850 --> 00:01:52,340 So what we can do for that is zoom out a little bit here and I'm going to copy and paste these values 29 00:01:52,700 --> 00:01:54,360 so I see label again. 30 00:01:54,560 --> 00:02:02,850 Except this time we'll have this setup for no I'll type out instead of four yes we'll make this no. 31 00:02:03,360 --> 00:02:09,100 We'll make the label know as well and change the ID to be No. 32 00:02:09,210 --> 00:02:14,310 We can still have the same name because we're basically going to connect this radio button to this radio 33 00:02:14,310 --> 00:02:14,640 button. 34 00:02:14,670 --> 00:02:18,300 So only one of them can be selected and that will change the value 35 00:02:21,080 --> 00:02:23,670 save this refresh your page. 36 00:02:23,690 --> 00:02:26,190 Now you'll notice you have a yes and no radio button. 37 00:02:26,210 --> 00:02:27,800 So do you already own a dog. 38 00:02:28,100 --> 00:02:29,630 Yes or no. 39 00:02:29,750 --> 00:02:34,040 And notice when they click YES NO automatically gets de-selected. 40 00:02:34,160 --> 00:02:39,590 And the reason that happens because these two input radio types are connected because they're sharing 41 00:02:39,590 --> 00:02:40,900 the same name. 42 00:02:40,910 --> 00:02:46,850 If I were to change one of these names for instance stock choice to save that refresh you'll notice 43 00:02:46,850 --> 00:02:51,260 that all of a sudden I can actually select both if I want these to be connected. 44 00:02:51,290 --> 00:02:55,790 I should set them up to have the same name which makes sense because that way when I actually submit 45 00:02:55,820 --> 00:03:00,990 the form I'll just have a name and then select the value either yes or no. 46 00:03:02,340 --> 00:03:07,220 So we'll save that and that's the basics of using a radio button. 47 00:03:07,470 --> 00:03:12,340 And that's the basics of also linking or connecting to radio buttons. 48 00:03:12,340 --> 00:03:12,580 All right. 49 00:03:12,580 --> 00:03:17,030 So we already have the already own a dock set up and then the linked radio buttons to them. 50 00:03:17,290 --> 00:03:19,890 We also have the option of using dropdown menu. 51 00:03:20,350 --> 00:03:29,270 So let's come back in here and zoom in a bit we'll create a paragraph just asking someone how clean 52 00:03:29,780 --> 00:03:30,910 is your house. 53 00:03:32,100 --> 00:03:36,700 Let's say from 1 to 3 so we'll say three is the cleanest. 54 00:03:36,780 --> 00:03:40,480 The next step of tag we're going to talk about is the select tag. 55 00:03:40,860 --> 00:03:46,380 So the select 10 we can go ahead and not worry about class and that's going to be related to success 56 00:03:46,730 --> 00:03:52,140 but we can give it a name we'll say something like stars for one two three stars. 57 00:03:52,140 --> 00:03:53,760 How clean is the house. 58 00:03:53,760 --> 00:03:57,060 And then instead of this we have option tags. 59 00:03:57,060 --> 00:04:00,860 So we'll say option and then we can give a value here. 60 00:04:01,170 --> 00:04:06,580 So our internal value will be great and we'll say 3 as the option that the user sees. 61 00:04:07,170 --> 00:04:16,800 I will copy this two more times and we'll say this next one is good at level 2 and then we'll say this 62 00:04:16,800 --> 00:04:18,260 last one is just bad. 63 00:04:18,270 --> 00:04:19,890 So it's not a very clean house. 64 00:04:20,410 --> 00:04:25,110 At one so let's save that and refresh. 65 00:04:25,110 --> 00:04:27,010 And now I see how clean is your house. 66 00:04:27,020 --> 00:04:29,090 That's that paragraphed how we have here. 67 00:04:29,370 --> 00:04:31,800 And then we have this selection of various options. 68 00:04:31,830 --> 00:04:36,240 And this is the dropdown menu so I can say 3 2 or 1. 69 00:04:36,300 --> 00:04:41,190 And what happens is the viewer of your web site is going to see what's in between these options text 70 00:04:41,190 --> 00:04:42,690 3 to one. 71 00:04:42,810 --> 00:04:48,300 But when you actually submit this form you're going to connect this name to whatever value was chosen 72 00:04:48,630 --> 00:04:50,500 just as we saw in the last lecture. 73 00:04:50,550 --> 00:04:55,710 Instead of that you URL where we said the name is equal to some value in the same way that when you 74 00:04:55,710 --> 00:05:00,210 submit this form you'll have Daag choice connected to either yes or no. 75 00:05:00,480 --> 00:05:04,630 You'll have name stars connected to either great good or bad. 76 00:05:04,890 --> 00:05:08,770 And this is how you can create a dropdown menu inside your form. 77 00:05:08,780 --> 00:05:12,650 Lastly we can show you how to create a text area. 78 00:05:12,930 --> 00:05:22,270 So I'll say any other comments inside of my form and then we'll say text area and here we can give it 79 00:05:22,280 --> 00:05:27,890 a name we can give it a number of rows and number of columns that basically defines how large the text 80 00:05:27,890 --> 00:05:29,560 area box should appear. 81 00:05:29,840 --> 00:05:35,210 So if we save that and refresh then I get to see this text area box show up. 82 00:05:35,210 --> 00:05:41,200 And in fact we can expand this so I can see that this is essentially just a large text box. 83 00:05:41,240 --> 00:05:42,510 And if you wanted to be smaller. 84 00:05:42,710 --> 00:05:49,500 All we need to do is release or reduce the number of columns. 85 00:05:49,520 --> 00:05:53,310 So for instance I want three columns maybe by four rows. 86 00:05:53,510 --> 00:05:58,130 Save those changes refresh and I'll get a much smaller box to begin with. 87 00:05:58,130 --> 00:06:04,620 Keep in mind most browsers allow the user to automatically resize that text area once that's all done. 88 00:06:04,670 --> 00:06:12,770 You can just have an input button at the end for submit type save that and then we should give it a 89 00:06:12,770 --> 00:06:16,030 value something like Submit Feedback. 90 00:06:17,860 --> 00:06:20,480 Save it refresh. 91 00:06:20,510 --> 00:06:21,000 Now I see. 92 00:06:21,020 --> 00:06:21,830 Any other comments. 93 00:06:21,830 --> 00:06:23,410 Submit Feedback. 94 00:06:23,410 --> 00:06:23,650 All right. 95 00:06:23,660 --> 00:06:28,890 Let's finish off this lecture by actually submitting our form and expand my window here a bit. 96 00:06:28,970 --> 00:06:31,560 We're just going to provide some general values. 97 00:06:31,560 --> 00:06:32,690 You already own a dog. 98 00:06:32,690 --> 00:06:33,800 I'll say yes. 99 00:06:33,800 --> 00:06:34,840 How Clean Is Your House. 100 00:06:34,840 --> 00:06:37,230 I'll say two and then any other comments. 101 00:06:37,250 --> 00:06:38,810 I will say none. 102 00:06:38,810 --> 00:06:44,730 Keep in mind that right now my form actually doesn't have an action parameter and that's because Wolfville 103 00:06:44,780 --> 00:06:49,670 in the action attribute later if you don't actually fill it in what happens is you just end up refreshing 104 00:06:49,670 --> 00:06:52,830 the page with the name value pairs. 105 00:06:52,940 --> 00:07:01,430 So I have yes two and none hit Submit Feedback and now I get to see the name value pairs appear Mayerle 106 00:07:01,520 --> 00:07:02,730 from the get method. 107 00:07:02,810 --> 00:07:07,910 It says Daag choice is equal to yes Starrs is equal to good in name is equal to none. 108 00:07:07,910 --> 00:07:11,570 Keep in mind it says stars is equal to good because that's a name value pair. 109 00:07:11,600 --> 00:07:18,350 I chose back in the form so even though the user gets to see these three to ones if he come back down 110 00:07:18,350 --> 00:07:21,710 here and take a look at the options three to 1. 111 00:07:21,740 --> 00:07:28,880 That's what the user sees in the back and you're only dealing with name and value pairs. 112 00:07:28,880 --> 00:07:32,330 OK so that's it for those extra. 113 00:07:32,330 --> 00:07:33,860 Form selection types. 114 00:07:33,960 --> 00:07:38,270 Won't be using them too often but you should be aware of them and you can check out the documentation 115 00:07:38,270 --> 00:07:39,930 links from the previous lectures. 116 00:07:39,980 --> 00:07:44,530 Inside those H.A. files to explore various other H.A. him forum types. 117 00:07:44,720 --> 00:07:49,530 Keep in mind in the future we're going to be automating a lot of this through the use of a flask. 118 00:07:49,550 --> 00:07:53,870 Thanks and we'll see at the next lecture where we're going to have just a quick final assessment for 119 00:07:53,870 --> 00:07:55,580 the tonight crash course.