1
00:00:01,260 --> 00:00:07,320
Hello, in this video, I am going to show you how to implement check, so that's what the code in blue

2
00:00:07,320 --> 00:00:11,100
strip checks informed the basically checkboxes radio boxes.

3
00:00:11,520 --> 00:00:12,980
Those are selection items.

4
00:00:13,170 --> 00:00:17,250
So I would provide a link to the Bootstrap API guide.

5
00:00:17,250 --> 00:00:19,080
We can see all the different features.

6
00:00:19,200 --> 00:00:23,600
I will cover the basic features and everything that you generally need to get going.

7
00:00:24,330 --> 00:00:26,450
And if you are, check, check it.

8
00:00:26,460 --> 00:00:31,080
You know, they call it a check, but, you know, you probably know it as a checkbox on your radio

9
00:00:31,080 --> 00:00:32,220
button as well, though.

10
00:00:32,220 --> 00:00:35,280
Always show you a fair bit of the functionality.

11
00:00:35,280 --> 00:00:37,150
So let's get straight to it.

12
00:00:37,320 --> 00:00:40,650
I'm already using the code from a previous video.

13
00:00:40,650 --> 00:00:42,180
You could have an empty form.

14
00:00:42,180 --> 00:00:43,260
Does not matter.

15
00:00:43,680 --> 00:00:48,500
OK, so I am going to just just copy this and delete the content.

16
00:00:48,780 --> 00:00:52,170
I'm basically just going to be using the this structure.

17
00:00:52,200 --> 00:01:01,130
So get rid of this and I'm going to put a div class and this is for Dasch check.

18
00:01:03,090 --> 00:01:13,200
And in here we need an input and this is going to have a class of form that check that input.

19
00:01:13,720 --> 00:01:15,090
It's going to have a type.

20
00:01:16,380 --> 00:01:18,450
And this is going to be checkbox.

21
00:01:18,840 --> 00:01:20,310
I'm going to have a value.

22
00:01:20,820 --> 00:01:23,350
And this is we're going to leave it empty.

23
00:01:23,370 --> 00:01:26,750
But maybe you want to assign some sort of value with it.

24
00:01:26,760 --> 00:01:28,170
It might be numerical.

25
00:01:28,350 --> 00:01:33,950
It might be string based that when the user selects it, you can use something like jobs, cryptologic

26
00:01:33,990 --> 00:01:39,150
query to get that value when they submit the form, depending on what selected, they could get the

27
00:01:39,150 --> 00:01:42,410
value and stored in a database, for example.

28
00:01:42,930 --> 00:01:44,700
So that is possible.

29
00:01:45,150 --> 00:01:50,460
So already you could only put checkbox one.

30
00:01:54,520 --> 00:02:01,000
OK, so we're going to put a label now, and this is just optional, but it's always good to have a

31
00:02:01,000 --> 00:02:03,280
label for a couple of reasons.

32
00:02:03,280 --> 00:02:11,290
One, we allow you to describe what that actual check box is for.

33
00:02:11,520 --> 00:02:17,890
Otherwise, the use is just literally random labels at random check boxes.

34
00:02:18,010 --> 00:02:21,700
And to utilize this feature, which I'll show you in a second.

35
00:02:21,850 --> 00:02:23,650
So you want to put the same idea here.

36
00:02:24,310 --> 00:02:31,090
And I think this is really cool and I'm going to put a picture, but obviously feel free to make it

37
00:02:31,090 --> 00:02:32,080
more contextual.

38
00:02:32,520 --> 00:02:39,880
And one example is if you go into a login page below the email address and let's say the password fields,

39
00:02:40,060 --> 00:02:42,270
you might have a remember checkbox.

40
00:02:42,280 --> 00:02:43,870
So that's a great example.

41
00:02:44,110 --> 00:02:46,600
If I can click on it, you know, enable disabled.

42
00:02:46,750 --> 00:02:53,230
But because I've done that for and linked to the date for click on the text, it also checks it as well.

43
00:02:53,240 --> 00:02:55,200
So that's a great feature.

44
00:02:55,940 --> 00:02:57,010
You can also make.

45
00:02:57,430 --> 00:03:00,520
You know, you can make them disabled as well.

46
00:03:00,530 --> 00:03:04,750
So to make one of the disabled, it is really simple.

47
00:03:04,970 --> 00:03:06,670
Just put the disabled attribute.

48
00:03:06,670 --> 00:03:08,460
It is not equal to anything.

49
00:03:09,040 --> 00:03:12,340
Reload that, you know, trigger in that.

50
00:03:12,340 --> 00:03:18,400
And that is because I have not updated the four and the data.

51
00:03:18,400 --> 00:03:19,360
Make sure you do that.

52
00:03:19,360 --> 00:03:27,220
I made I made that mistake before and you'll be triggering a previous element of the death of disabled

53
00:03:27,970 --> 00:03:28,690
checkbox.

54
00:03:28,690 --> 00:03:32,200
So if I reload now, it is all good.

55
00:03:32,200 --> 00:03:38,350
But we cannot select the may be the user needs to do something else for that to become enabled.

56
00:03:38,740 --> 00:03:45,610
Next, where I'm going to show you is a radio box on a horizontal rule just to separate the radio box,

57
00:03:45,610 --> 00:03:50,550
because the radio buttons usually also link to each other.

58
00:03:51,010 --> 00:03:54,790
And so what we're going to do is have this.

59
00:03:58,090 --> 00:04:05,160
I think I have all of this because the code is pretty similar to be fair, so I'll have this form check

60
00:04:05,160 --> 00:04:05,310
him.

61
00:04:06,120 --> 00:04:08,340
This will be now radio.

62
00:04:10,300 --> 00:04:12,610
We're going to have a.

63
00:04:17,580 --> 00:04:18,000
A name

64
00:04:20,880 --> 00:04:22,950
and put.

65
00:04:27,210 --> 00:04:33,450
Name I just put radio box one, you can whoever you want, this is what you would be using, you know,

66
00:04:33,810 --> 00:04:36,240
when you submit the form to to get hold of it.

67
00:04:37,110 --> 00:04:43,410
Radio box one, I'm going to put the I'm not going to have any value.

68
00:04:43,980 --> 00:04:50,040
And we're going to have radio box one, radio box one.

69
00:04:51,450 --> 00:04:57,030
Don't want to make the disable so we can leave that and we're going to have one checked by default.

70
00:04:57,030 --> 00:04:59,300
That's what you always want to do with a radio button.

71
00:04:59,540 --> 00:05:05,100
That's one of the unique things about radio button is you have multiple only one of them can be selected

72
00:05:05,100 --> 00:05:05,860
at any given time.

73
00:05:05,860 --> 00:05:12,120
If you select one, the previously selected one will be disabled, not disabled, unchecked, and you

74
00:05:12,120 --> 00:05:17,730
generally have one always enabled at the start and pretty common practice to make it.

75
00:05:17,760 --> 00:05:25,860
The first one, though, will put this as radio box one and I'm going to put radio box one.

76
00:05:28,310 --> 00:05:35,550
OK, so what we're going to do is duplicate the phone check inside of there and we're going to train

77
00:05:35,550 --> 00:05:38,970
this to bring the box to box to.

78
00:05:39,180 --> 00:05:43,200
We only want one of them checked radio box to read it to you.

79
00:05:43,200 --> 00:05:48,300
Jerry will only probably have one of the one set of these in any given form.

80
00:05:48,300 --> 00:05:56,640
So if I said that reload, here we go so far and select advocacy on deselected before select radio box

81
00:05:56,640 --> 00:06:00,560
to something has messed up.

82
00:06:03,800 --> 00:06:08,630
The name sorry needs to be the same, so I'm going to put.

83
00:06:10,430 --> 00:06:13,520
Radio box EPIK.

84
00:06:19,080 --> 00:06:19,570
There we go.

85
00:06:19,770 --> 00:06:26,040
So if I try and deselected in the work force and number one, your deselect, whatever, what previously

86
00:06:26,040 --> 00:06:30,850
selected, you can have as many of you once you make sure the name is the same for all of them.

87
00:06:30,870 --> 00:06:37,090
That's how it is linked and that's how you could have separate sections of radio buttons.

88
00:06:37,320 --> 00:06:43,590
The last one I'm going to show you is the form switch and I will provide a pattern of a horizontal rule

89
00:06:43,590 --> 00:06:49,440
just for formatting purposes, and I will copy this one.

90
00:06:52,300 --> 00:06:54,460
Put their form check.

91
00:06:54,520 --> 00:06:59,840
We also need a switch that will form check input.

92
00:06:59,860 --> 00:07:02,710
That's a good typist checkbox.

93
00:07:03,220 --> 00:07:08,290
You can have a values day if you want to put the switch.

94
00:07:08,320 --> 00:07:09,450
I don't want to say, but.

95
00:07:09,460 --> 00:07:11,950
But you can put the disabled label.

96
00:07:11,950 --> 00:07:13,470
I mean, attribute there.

97
00:07:15,070 --> 00:07:23,350
And the only thing I need to do here is put that switch and optionally change is to switch text before

98
00:07:23,350 --> 00:07:23,820
we load.

99
00:07:24,100 --> 00:07:26,930
We've got the switch and I see the knife, the animation.

100
00:07:27,130 --> 00:07:33,580
This is more akin to what you would see on mobile, especially this sort of design is very similar to

101
00:07:33,580 --> 00:07:35,290
what you see on iOS.

102
00:07:35,470 --> 00:07:39,120
And as you can see, it looks very good on screen sizes.

103
00:07:39,340 --> 00:07:42,910
There are a lot more different options that you can do.

104
00:07:43,410 --> 00:07:45,100
You can stack in line.

105
00:07:46,070 --> 00:07:47,560
This is a pretty cool one.

106
00:07:48,070 --> 00:07:57,190
You can, you know, toggle it and the radio button, so single toggle like so you can do that sort

107
00:07:57,190 --> 00:07:57,520
of stuff.

108
00:07:57,520 --> 00:08:01,090
You know, there's quite a bit of showing you the basics.

109
00:08:01,090 --> 00:08:07,610
If you have any questions, feel free to call me a message on Dischord or any other way, or the links

110
00:08:07,610 --> 00:08:08,470
on the description.

111
00:08:08,710 --> 00:08:11,780
Plus a link to this Web page will also be there.

112
00:08:12,010 --> 00:08:14,890
So I look forward to seeing you in the next video.