WEBVTT 00:00:08.730 --> 00:00:15.950 Now we're going to move to TX areas check boxes radio buttons and so on. 00:00:15.960 --> 00:00:19.060 So we're going to create another form. 00:00:19.420 --> 00:00:24.130 OK let's have a break. 00:00:24.150 --> 00:00:27.100 And then the horizontal line. 00:00:27.590 --> 00:00:30.970 Then let's create a new form. 00:00:31.290 --> 00:00:34.460 We're going to place all these other inputs. 00:00:34.470 --> 00:00:34.700 OK. 00:00:34.710 --> 00:00:37.400 So it starts with the text areas. 00:00:37.470 --> 00:00:40.520 So let's take Syria 00:00:43.800 --> 00:00:46.840 to use the six area tag. 00:00:47.230 --> 00:00:51.120 OK let's define 00:00:54.960 --> 00:00:56.910 a number of rows 00:01:00.150 --> 00:01:05.360 five rows of this give you of the comments for example. 00:01:05.400 --> 00:01:07.480 OK. 00:01:08.220 --> 00:01:08.770 OK. 00:01:09.090 --> 00:01:14.600 Now we're going to use the same gloves we use for the other inputs earlier. 00:01:14.790 --> 00:01:16.080 So it's going to be 00:01:19.140 --> 00:01:21.800 form control. 00:01:21.860 --> 00:01:22.550 OK. 00:01:22.660 --> 00:01:29.070 Now you can already see that the with is now head of percent's let's on the label. 00:01:29.640 --> 00:01:30.600 So it's just 00:01:35.280 --> 00:01:45.830 going to use the attributes that we took in those comments and text columns. 00:01:48.360 --> 00:01:50.490 OK so let's move to something else. 00:01:50.490 --> 00:01:55.160 Let's move to checkboxes. 00:01:56.790 --> 00:02:01.600 OK let's create a simple checkbox so if you remember the syntax. 00:02:01.860 --> 00:02:09.010 So we were going to go for an input tag and then the type is checkbox. 00:02:09.090 --> 00:02:10.260 OK. 00:02:11.310 --> 00:02:17.340 OK let's have a value for our checkbox Safeways value 1. 00:02:17.400 --> 00:02:18.450 Let's give us an ID 00:02:21.780 --> 00:02:25.060 checkbox one for example. 00:02:25.100 --> 00:02:35.930 Let's let's place all these inside a label check box 1. 00:02:37.290 --> 00:02:37.560 OK 00:02:47.690 --> 00:02:53.130 . 00:02:53.880 --> 00:02:54.430 All right. 00:02:54.780 --> 00:03:06.240 So we are going to do we are going to place the whole checkbox with a label inside a div. 00:03:08.030 --> 00:03:08.460 OK. 00:03:08.470 --> 00:03:16.880 And we're going to give Steve a special class checkbox so that we can see some basic styling. 00:03:16.890 --> 00:03:19.560 Where are we going to have some. 00:03:19.800 --> 00:03:27.390 We can optimize the spacing basically so so so Dave would be of class 00:03:30.240 --> 00:03:33.480 checkbox. 00:03:33.600 --> 00:03:36.790 Now you can see how the checkbox is tied. 00:03:37.230 --> 00:03:39.250 OK. 00:03:39.260 --> 00:03:47.530 All right so let's create another checkbox using the same method this time. 00:03:48.120 --> 00:03:51.530 Change is all used to. 00:03:51.670 --> 00:03:54.990 And it's checkbox to. 00:03:55.090 --> 00:03:58.880 OK. 00:03:58.930 --> 00:04:01.330 OK. 00:04:02.130 --> 00:04:07.780 So we can disable the checkbox by other than another class to the Dave. 00:04:08.070 --> 00:04:16.270 It's going to be class disabled though you can see there's this checkbox is disabled. 00:04:16.400 --> 00:04:18.280 All right. 00:04:19.770 --> 00:04:24.380 OK so now let's move to radio buttons. 00:04:24.790 --> 00:04:28.680 Let's have a late break 00:04:31.800 --> 00:04:34.800 what is a line. 00:04:36.120 --> 00:04:37.520 OK. 00:04:37.870 --> 00:04:43.450 So let's create a simple radio button using the basic DML. 00:04:43.470 --> 00:04:49.930 So it's going to be inputs of type radio. 00:04:50.710 --> 00:04:55.170 Let's give it a name. 00:04:55.170 --> 00:04:59.150 Radios and least have an idea for this one. 00:04:59.160 --> 00:05:05.450 Read you one and also does have a value. 00:05:05.610 --> 00:05:07.890 Option 1 for example. 00:05:08.020 --> 00:05:11.400 OK let's place everything inside a label 00:05:14.540 --> 00:05:19.530 some text the radio one. 00:05:19.820 --> 00:05:21.840 OK. 00:05:28.920 --> 00:05:31.710 All right. 00:05:34.040 --> 00:05:34.420 OK. 00:05:34.430 --> 00:05:41.270 And now as we have done with that checkbox is we're going to take the whole thing the inputs with the 00:05:41.270 --> 00:05:45.980 label and place everything inside a div. 00:05:46.510 --> 00:05:47.040 OK. 00:05:47.430 --> 00:05:49.520 And we're going to give this Dave a glass 00:05:55.490 --> 00:06:00.350 radio Caig and see how this tiling has changed. 00:06:00.840 --> 00:06:01.450 OK. 00:06:01.880 --> 00:06:02.960 So let's have 00:06:10.220 --> 00:06:14.520 another video of Watson and another one. 00:06:14.530 --> 00:06:15.710 And to just change the 00:06:19.550 --> 00:06:20.550 idea and evolve. 00:06:20.550 --> 00:06:23.630 So this is going to be really to option to 00:06:26.750 --> 00:06:28.920 read you three. 00:06:29.030 --> 00:06:30.510 Option three. 00:06:30.770 --> 00:06:33.150 OK you got the same name for. 00:06:33.620 --> 00:06:35.370 OK. 00:06:36.750 --> 00:06:43.130 You can see that we can only select one of these. 00:06:43.310 --> 00:06:45.830 All right. 00:06:47.120 --> 00:06:50.390 If you want to display these red your buttons 00:06:52.910 --> 00:06:57.570 using the inline display we can just add another class 00:06:59.160 --> 00:07:02.450 . 00:07:03.750 --> 00:07:04.820 OK. 00:07:05.150 --> 00:07:10.080 Next to the radio class can use radio. 00:07:11.130 --> 00:07:16.740 OK then you can do the same thing for all of them. 00:07:18.430 --> 00:07:21.250 And you can see they can play. 00:07:21.840 --> 00:07:24.530 You can do the same thing for checkboxes. 00:07:25.660 --> 00:07:26.840 OK. 00:07:26.980 --> 00:07:30.730 The class is going to be checkbox inline. 00:07:31.010 --> 00:07:36.260 Pretty straightforward and the same thing for the other two works 00:07:47.430 --> 00:07:50.980 OK. 00:07:53.840 --> 00:07:54.140 OK. 00:07:54.140 --> 00:07:59.860 Now let's move to the selects inputs. 00:08:00.620 --> 00:08:06.710 So let's create a radius of the lame break 00:08:11.750 --> 00:08:13.700 reasons. 00:08:16.400 --> 00:08:23.120 Let's create a simple selects using the select tag. 00:08:25.100 --> 00:08:26.120 So we need to 00:08:28.940 --> 00:08:30.060 have options 00:08:30.050 --> 00:08:36.090 . 00:08:36.240 --> 00:08:38.850 OK so the first ones one. 00:08:39.100 --> 00:08:48.780 It is three options so Option 1 then Option 2 and option 3. 00:08:50.290 --> 00:08:57.380 Ok so far we have used basic ASML and we have just a drop down menu where we can select any of these 00:08:57.600 --> 00:08:58.700 options. 00:08:58.700 --> 00:09:05.270 Now we going to add a class to the select tag. 00:09:05.810 --> 00:09:09.950 So is the form control KLAUSE. 00:09:10.010 --> 00:09:15.490 Now we can see Cordilleras has changed. 00:09:17.100 --> 00:09:26.030 Also if we want to be able to select multiple options in one go then we can just add 00:09:28.380 --> 00:09:31.870 the word multiple. 00:09:32.640 --> 00:09:33.800 OK. 00:09:33.860 --> 00:09:40.910 Inside it's I know we be able to select many options so consulate's option 1 and 2 selects him both 00:09:41.190 --> 00:09:48.350 so Nixon selects all of them play or select one and 3 using the control. 00:09:49.100 --> 00:09:58.280 OK OK so now let's add one more thing. 00:09:59.210 --> 00:10:08.930 This creates a simple text inputs and make it's disabled. 00:10:09.180 --> 00:10:09.560 So 00:10:12.970 --> 00:10:17.580 inputs so toy text 00:10:21.740 --> 00:10:25.930 so close control OK 00:10:34.220 --> 00:10:43.370 six inputs with a placeholder page so to make this text inputs disabled we just add the word disabled 00:10:43.460 --> 00:10:44.950 inside it's like. 00:10:45.090 --> 00:10:45.530 So now 00:10:50.880 --> 00:10:57.760 you see that we cannot add any text inside that inputs and we can do the same thing. 00:10:58.140 --> 00:11:02.460 So we have done that with check boxes we can do the same thing with the radios. 00:11:02.750 --> 00:11:12.900 So let's say the third radio button and disabled there will not be able to X that way. 00:11:14.010 --> 00:11:14.240 OK