1 00:00:02,080 --> 00:00:04,390 Now that's it for these input fields 2 00:00:04,390 --> 00:00:08,560 which display input fields like this. 3 00:00:08,560 --> 00:00:11,820 I got two other input types, and then a couple of other 4 00:00:11,820 --> 00:00:14,730 interesting input elements we could use, 5 00:00:14,730 --> 00:00:17,370 but let's start with those other types. 6 00:00:17,370 --> 00:00:20,510 And the first one is the radio type. 7 00:00:20,510 --> 00:00:23,900 Let's say we have a multiple choice value. 8 00:00:23,900 --> 00:00:27,160 And for this here, I'll add this hr element, 9 00:00:27,160 --> 00:00:30,370 to render a little horizontal line. 10 00:00:30,370 --> 00:00:32,189 That's basically all this does, 11 00:00:32,189 --> 00:00:36,080 it displays such a horizontal separator. 12 00:00:36,080 --> 00:00:39,470 And below this hr element here, 13 00:00:39,470 --> 00:00:42,350 which I only added for visual purposes, 14 00:00:42,350 --> 00:00:44,560 I'll add yet another input element, 15 00:00:44,560 --> 00:00:47,370 but now I'll set the type to radio. 16 00:00:47,370 --> 00:00:49,580 And the special thing about the radio type, 17 00:00:49,580 --> 00:00:51,350 is that we typically use it 18 00:00:51,350 --> 00:00:55,390 to display multiple options, 19 00:00:55,390 --> 00:00:58,210 where only one of them should be picked. 20 00:00:58,210 --> 00:01:00,300 Let's say we're building a form 21 00:01:00,300 --> 00:01:04,920 where a user creates an account, and we now want to have 22 00:01:04,920 --> 00:01:08,408 the user choose how the account should be verified. 23 00:01:08,408 --> 00:01:11,080 For this we could offer three options. 24 00:01:11,080 --> 00:01:14,640 We send a text message, we call the user, 25 00:01:14,640 --> 00:01:16,860 or we send an email. 26 00:01:16,860 --> 00:01:20,240 And hence, we might wanna show these three options, 27 00:01:20,240 --> 00:01:24,385 where only one of them can be picked at the same time. 28 00:01:24,385 --> 00:01:27,720 For this, I'll first of all add a little title here, 29 00:01:27,720 --> 00:01:32,290 a h2 title maybe, because we could have a main h1 title, 30 00:01:32,290 --> 00:01:34,610 somewhere above, we don't have it here, 31 00:01:34,610 --> 00:01:36,800 but we could have such a h1 title. 32 00:01:36,800 --> 00:01:40,473 So here I'll add this subtitle then, where I say, 33 00:01:41,330 --> 00:01:46,330 how should we verify your account? 34 00:01:47,370 --> 00:01:49,960 And then I wanna have three options, 35 00:01:49,960 --> 00:01:53,460 so I'll display three radio buttons. 36 00:01:53,460 --> 00:01:56,970 Now every input needs it's own label, 37 00:01:56,970 --> 00:01:58,620 because of course I wanna describe 38 00:01:58,620 --> 00:02:01,190 what this button represents. 39 00:02:01,190 --> 00:02:03,120 So for this, I'll now add my label, 40 00:02:03,120 --> 00:02:05,550 and I'll actually now add it after the input, 41 00:02:05,550 --> 00:02:08,410 so that I first have the button and then the label. 42 00:02:08,410 --> 00:02:13,410 And here I'll say, via text message, SMS. 43 00:02:13,440 --> 00:02:16,830 Copy that, and on the next radio button I say, 44 00:02:16,830 --> 00:02:21,830 via a phone call, and then on the third input I say, 45 00:02:23,870 --> 00:02:26,863 via an email. 46 00:02:28,350 --> 00:02:29,560 Now we need to connect this, 47 00:02:29,560 --> 00:02:33,280 and hence I'll give these three inputs different IDs. 48 00:02:33,280 --> 00:02:38,280 Here I'll say, verify, dash text, dash message. 49 00:02:40,270 --> 00:02:42,760 Of course, the ID is up to you, but that sounds like 50 00:02:42,760 --> 00:02:46,120 a fitting identifier for this first input. 51 00:02:46,120 --> 00:02:48,800 And hence on this label, we can say for, 52 00:02:48,800 --> 00:02:51,633 verify text, dash message. 53 00:02:53,020 --> 00:02:56,370 Here on the next input we could set an ID of, 54 00:02:56,370 --> 00:03:01,370 verify phone, and of course therefore set the for attribute 55 00:03:02,370 --> 00:03:05,053 to verify phone here. 56 00:03:06,750 --> 00:03:11,383 And on that last input we say, verify email, 57 00:03:14,790 --> 00:03:18,023 and set for equal to verify email. 58 00:03:20,799 --> 00:03:22,540 Now we got this connected, 59 00:03:22,540 --> 00:03:25,200 but I also wanna set the name attribute now, 60 00:03:25,200 --> 00:03:28,900 so that we have that field, that identifier, 61 00:03:28,900 --> 00:03:31,630 which we can use on the server, later, 62 00:03:31,630 --> 00:03:35,720 to get and extract that entered data. 63 00:03:35,720 --> 00:03:39,200 And now here's the special thing which is very important, 64 00:03:39,200 --> 00:03:42,210 to ensure that the browser forces the user 65 00:03:42,210 --> 00:03:44,640 to only pick one of these options, 66 00:03:44,640 --> 00:03:48,070 all these options must have to same name. 67 00:03:48,070 --> 00:03:51,740 So they have different IDs, but the same name. 68 00:03:51,740 --> 00:03:56,170 And that's also why name and ID is not the same thing, 69 00:03:56,170 --> 00:04:00,380 name can be used to group multiple inputs together, 70 00:04:00,380 --> 00:04:01,840 and that is something which we use 71 00:04:01,840 --> 00:04:04,340 when we work with radio buttons. 72 00:04:04,340 --> 00:04:07,010 Now we got one identifier, 73 00:04:07,010 --> 00:04:09,270 that will be submitted to the server, 74 00:04:09,270 --> 00:04:14,270 but the concrete value will be one of three possible values. 75 00:04:15,320 --> 00:04:19,000 And here I'll just set the name to verify, 76 00:04:19,000 --> 00:04:21,540 though of course the value is up to you, 77 00:04:21,540 --> 00:04:24,910 and I'll add that same name, attribute value pair, 78 00:04:24,910 --> 00:04:28,423 to all my three radio inputs here. 79 00:04:29,870 --> 00:04:32,483 With that, if I save this, 80 00:04:33,361 --> 00:04:37,150 you'll notice that the styling of course, isn't that great 81 00:04:37,150 --> 00:04:39,260 because the input is a block element, 82 00:04:39,260 --> 00:04:43,230 and hence, not in the same line as this button here, 83 00:04:43,230 --> 00:04:44,840 we'll fix this in a second. 84 00:04:44,840 --> 00:04:46,920 But if I click in there, 85 00:04:46,920 --> 00:04:48,610 and I then choose a different option, 86 00:04:48,610 --> 00:04:53,210 you see that the first option automatically got deselected. 87 00:04:53,210 --> 00:04:55,430 And that's that behavior which I meant, 88 00:04:55,430 --> 00:04:57,870 we can only select one of these options, 89 00:04:57,870 --> 00:05:01,799 and the other option is then unselected automatically. 90 00:05:01,799 --> 00:05:05,740 And that's this radio button feature in action, 91 00:05:05,740 --> 00:05:08,500 but we're not done with the radio buttons. 92 00:05:08,500 --> 00:05:10,920 For one to styling is of course broken, 93 00:05:10,920 --> 00:05:11,970 but in addition, 94 00:05:11,970 --> 00:05:16,160 the radio buttons are also not configured correctly yet. 95 00:05:16,160 --> 00:05:19,110 I mean, I said that we set one name 96 00:05:19,110 --> 00:05:21,190 for all three radio buttons, 97 00:05:21,190 --> 00:05:23,580 and that then the value would differ 98 00:05:23,580 --> 00:05:25,927 based on which button is selected. 99 00:05:25,927 --> 00:05:30,927 But what is the value that will be submitted to the server? 100 00:05:31,141 --> 00:05:34,630 We could think that it's our label here, 101 00:05:34,630 --> 00:05:38,930 but that actually should just be a human readable label. 102 00:05:38,930 --> 00:05:43,930 Later on the server, when we parse and extract that data, 103 00:05:44,100 --> 00:05:47,850 we typically wanna have short, clear identifiers, 104 00:05:47,850 --> 00:05:50,000 for these different inputs. 105 00:05:50,000 --> 00:05:53,570 We're not interested in the human readable message. 106 00:05:53,570 --> 00:05:57,700 And therefore, we can add another attribute on the input, 107 00:05:57,700 --> 00:06:01,730 and that's the value attribute. 108 00:06:01,730 --> 00:06:06,730 The value attribute allows us to set a value for that input. 109 00:06:07,310 --> 00:06:09,690 And we could use it on all inputs, 110 00:06:09,690 --> 00:06:11,711 also on the other inputs up here. 111 00:06:11,711 --> 00:06:14,850 If I go to that username input, and enter a value, 112 00:06:14,850 --> 00:06:19,360 and enter Max here, you'll notice that if I save this, 113 00:06:19,360 --> 00:06:22,350 Max is pre entered here. 114 00:06:22,350 --> 00:06:24,510 This can also sometimes be useful, 115 00:06:24,510 --> 00:06:26,950 sometimes you want to have default values 116 00:06:26,950 --> 00:06:29,570 which are filled in out of the box. 117 00:06:29,570 --> 00:06:32,700 The user is still able to overwrite that by the way. 118 00:06:32,700 --> 00:06:35,410 But you can enter such a default value, 119 00:06:35,410 --> 00:06:37,593 by setting that value attribute. 120 00:06:38,470 --> 00:06:39,960 But I don't need it here, 121 00:06:39,960 --> 00:06:42,510 I do need it for these radio buttons though, 122 00:06:42,510 --> 00:06:44,920 because those work a bit differently. 123 00:06:44,920 --> 00:06:47,700 Here the user doesn't enter anything, 124 00:06:47,700 --> 00:06:50,460 instead the user selects something. 125 00:06:50,460 --> 00:06:53,400 And to then have a machine readable value, 126 00:06:53,400 --> 00:06:57,600 that will be sent to the server, based on that selection, 127 00:06:57,600 --> 00:07:01,360 we have to set this value, which is a value the user 128 00:07:01,360 --> 00:07:04,860 will never see for these radio buttons. 129 00:07:04,860 --> 00:07:08,003 So here we could have a value of verify text, 130 00:07:08,930 --> 00:07:13,553 or just, text message maybe, let's use that. 131 00:07:14,400 --> 00:07:16,460 On the second radio button input here, 132 00:07:16,460 --> 00:07:18,563 I'll set a value of phone. 133 00:07:19,520 --> 00:07:22,623 And on the last one, I'll set a value of email. 134 00:07:23,470 --> 00:07:26,210 And then I'll press this auto format shortcut, 135 00:07:26,210 --> 00:07:28,113 which makes it a bit more readable. 136 00:07:30,260 --> 00:07:31,760 If we now save this, 137 00:07:31,760 --> 00:07:35,120 the radio buttons look exactly as they did before, 138 00:07:35,120 --> 00:07:37,600 and they work as they did before, 139 00:07:37,600 --> 00:07:42,400 but now this value, which is not shown to the user, 140 00:07:42,400 --> 00:07:45,630 will actually be sent if that form is submitted. 141 00:07:45,630 --> 00:07:50,360 And you can see this, if I click submit in that URL up here, 142 00:07:50,360 --> 00:07:54,653 you see that verify equals phone pair here. 143 00:07:55,570 --> 00:07:57,030 And verify of course, 144 00:07:57,030 --> 00:08:01,040 is my name which I used for this input group. 145 00:08:01,040 --> 00:08:04,550 So for all the inputs here, for all the radio inputs. 146 00:08:04,550 --> 00:08:08,590 And then phone is that value of that input 147 00:08:08,590 --> 00:08:10,290 which I had selected. 148 00:08:10,290 --> 00:08:12,410 I selected the second input before, 149 00:08:12,410 --> 00:08:16,290 hence if I submit this, verify is set to phone. 150 00:08:16,290 --> 00:08:20,610 If I select the email radio button here and submit this, 151 00:08:20,610 --> 00:08:22,750 verify is set to email. 152 00:08:22,750 --> 00:08:24,260 And that will be the data 153 00:08:24,260 --> 00:08:27,763 which we later can extract on the server. 154 00:08:29,220 --> 00:08:31,510 Now with that, let's fix the styling though, 155 00:08:31,510 --> 00:08:34,220 because we now know how radio buttons work, 156 00:08:34,220 --> 00:08:36,340 and it's definitely a nice feature, 157 00:08:36,340 --> 00:08:39,809 but the styling is not the styling we wanna have. 158 00:08:39,809 --> 00:08:42,159 Now when it comes to styling radio buttons, 159 00:08:42,159 --> 00:08:45,100 there are different ways of doing that. 160 00:08:45,100 --> 00:08:48,323 I will go there and add a div, 161 00:08:49,180 --> 00:08:52,160 which is a semantically meaningless element, 162 00:08:52,160 --> 00:08:56,650 but a block element which I can use to group other elements 163 00:08:56,650 --> 00:08:58,200 to then apply some styling, 164 00:08:58,200 --> 00:09:00,200 and that's exactly what I wanna do here. 165 00:09:00,200 --> 00:09:03,830 And I'll then take this first input label combination 166 00:09:03,830 --> 00:09:05,568 and move that into this div. 167 00:09:05,568 --> 00:09:10,568 And I'll repeat that for my other input label combinations. 168 00:09:10,840 --> 00:09:13,100 Only for the radio buttons here though. 169 00:09:13,100 --> 00:09:16,730 So I'll grab all those label input, 170 00:09:16,730 --> 00:09:21,350 radio button combinations here and move them into divs, 171 00:09:22,660 --> 00:09:25,263 and then press the auto format shortcut. 172 00:09:26,290 --> 00:09:28,000 And then on these divs, 173 00:09:28,000 --> 00:09:32,430 I'll add some CSS classes with the class attribute. 174 00:09:32,430 --> 00:09:34,750 And the class name is up to you, 175 00:09:34,750 --> 00:09:39,750 I'll name it form control inline. 176 00:09:40,050 --> 00:09:41,650 But again, this is up to you, 177 00:09:41,650 --> 00:09:44,340 I'll then just copy this class attribute 178 00:09:44,340 --> 00:09:46,603 and add it on the other divs as well. 179 00:09:47,660 --> 00:09:50,760 And now we can target this form control inline 180 00:09:50,760 --> 00:09:54,210 class selector in the style CSS file, 181 00:09:54,210 --> 00:09:56,830 with that class selector syntax here, 182 00:09:56,830 --> 00:10:01,520 dot and then the class name, to apply some styles. 183 00:10:01,520 --> 00:10:06,500 And what I wanna do here is, I will just use flexbox, 184 00:10:06,500 --> 00:10:11,090 with display flex to put these labels 185 00:10:11,090 --> 00:10:12,963 and inputs back into one line. 186 00:10:14,350 --> 00:10:19,350 And then I'll also target the input element, 187 00:10:19,460 --> 00:10:23,340 inside of that div with a class of form control inline, 188 00:10:23,340 --> 00:10:25,810 and set the width back to auto, 189 00:10:25,810 --> 00:10:28,880 so that the width is just based on the content, 190 00:10:28,880 --> 00:10:32,900 and not set to this fixed width of 100% 191 00:10:32,900 --> 00:10:34,233 of the parent container. 192 00:10:35,320 --> 00:10:37,000 Now this looks better. 193 00:10:37,000 --> 00:10:40,010 And then I'll just give as input 194 00:10:40,010 --> 00:10:42,700 in that form control inline div, 195 00:10:42,700 --> 00:10:47,163 a margin to the right of dot five REM, maybe. 196 00:10:48,130 --> 00:10:51,330 Like this, and that's looking better. 197 00:10:51,330 --> 00:10:53,610 Now we got that style set up, 198 00:10:53,610 --> 00:10:57,520 and we've still get the same behavior as before of course. 199 00:10:57,520 --> 00:11:00,440 And these are radio buttons in action, 200 00:11:00,440 --> 00:11:03,363 now let's have a look at checkboxes next.