1
00:00:02,050 --> 00:00:06,070
We can use radio buttons to have multiple options

2
00:00:06,070 --> 00:00:08,570
where only one of them should be chosen.

3
00:00:08,570 --> 00:00:12,950
We use checkboxes if we have an either or choice,

4
00:00:12,950 --> 00:00:15,150
which we want to present to the user.

5
00:00:15,150 --> 00:00:17,990
Something like accepting the terms of use

6
00:00:17,990 --> 00:00:20,070
or anything like that.

7
00:00:20,070 --> 00:00:23,620
So for this, we can add another input

8
00:00:23,620 --> 00:00:26,983
and now set the type to checkbox, here.

9
00:00:28,470 --> 00:00:33,470
Now, I will actually reuse my form control inline div here.

10
00:00:34,180 --> 00:00:38,250
Since I also want to have a label next to this checkbox.

11
00:00:38,250 --> 00:00:42,380
So I'll add a label after input type checkbox,

12
00:00:42,380 --> 00:00:45,240
and maybe say, I agree to terms

13
00:00:46,390 --> 00:00:51,390
and point at, agree-terms as an ID

14
00:00:51,680 --> 00:00:54,670
and add that ID to this checkbox

15
00:00:54,670 --> 00:00:56,420
form control here then.

16
00:00:56,420 --> 00:00:57,650
Agree terms.

17
00:00:57,650 --> 00:00:58,483
Like this.

18
00:01:00,110 --> 00:01:03,380
Now with that, I got this checkbox down there

19
00:01:03,380 --> 00:01:04,780
and we can either check it

20
00:01:04,780 --> 00:01:06,330
or not check it.

21
00:01:06,330 --> 00:01:08,163
That's how this works.

22
00:01:09,410 --> 00:01:11,560
Now, that's not all I want to do, though.

23
00:01:11,560 --> 00:01:13,710
I also need to assign a name,

24
00:01:13,710 --> 00:01:15,500
so that when we submit the form,

25
00:01:15,500 --> 00:01:18,840
we have an identifier, which we can use on the server to

26
00:01:18,840 --> 00:01:20,940
extract the submitted value.

27
00:01:20,940 --> 00:01:25,693
And I'll set name=terms here, for example.

28
00:01:27,400 --> 00:01:29,990
And now with that, if I save this,

29
00:01:29,990 --> 00:01:32,040
if I check this and submit this,

30
00:01:32,040 --> 00:01:35,730
you will see that terms is set to on here.

31
00:01:35,730 --> 00:01:39,760
So, on is the value which is submitted, if this is checked.

32
00:01:39,760 --> 00:01:41,887
If I submit this, when it's not checked,

33
00:01:41,887 --> 00:01:44,820
terms is simply omitted.

34
00:01:44,820 --> 00:01:49,480
So, then we don't even have terms as part of the submitted

35
00:01:49,480 --> 00:01:51,070
key value pairs here.

36
00:01:51,070 --> 00:01:56,070
Then that terms input is entirely omitted in the data that

37
00:01:56,230 --> 00:01:58,550
is sent to the server.

38
00:01:58,550 --> 00:02:01,840
And that's just something which is worth noting here.

39
00:02:01,840 --> 00:02:06,529
Now you can also use checkboxes to have a list of

40
00:02:06,529 --> 00:02:07,880
checkable items.

41
00:02:07,880 --> 00:02:11,490
For example, if a user should check all the ways,

42
00:02:11,490 --> 00:02:14,680
which can be used to contact that user and that's

43
00:02:14,680 --> 00:02:17,150
also something I want to show to you.

44
00:02:17,150 --> 00:02:22,150
For this I'll add another input label combination here.

45
00:02:23,070 --> 00:02:26,180
And then here, I'll say contact me via email

46
00:02:27,290 --> 00:02:31,770
and change the ID to contact-email

47
00:02:31,770 --> 00:02:35,870
and for="contact-email,

48
00:02:35,870 --> 00:02:40,840
and then copy this entire div and repeat it again to also

49
00:02:40,840 --> 00:02:43,820
have contact me via phone, let's say.

50
00:02:43,820 --> 00:02:47,950
And then the ID here could be contact-phone and

51
00:02:47,950 --> 00:02:50,453
contact-phone here as well.

52
00:02:51,440 --> 00:02:54,280
And now here, I then want to use the same name

53
00:02:54,280 --> 00:02:56,130
for these two inputs as well,

54
00:02:56,130 --> 00:02:59,120
just as we did it for the radio buttons.

55
00:02:59,120 --> 00:03:02,040
Here, I'll set the name to contact.

56
00:03:02,040 --> 00:03:06,270
And now the interesting thing is that with the checkbox,

57
00:03:06,270 --> 00:03:09,610
we'll actually be able to select multiple values,

58
00:03:09,610 --> 00:03:11,020
not just one.

59
00:03:11,020 --> 00:03:13,960
That's the difference to the radio buttons,

60
00:03:13,960 --> 00:03:18,640
but these selected values will then be grouped together when

61
00:03:18,640 --> 00:03:20,680
they're sent to the server.

62
00:03:20,680 --> 00:03:22,810
And therefore, here in this case,

63
00:03:22,810 --> 00:03:25,130
where we don't use the checkbox

64
00:03:25,130 --> 00:03:28,680
as a single either or choice,

65
00:03:28,680 --> 00:03:32,200
but instead to choose a selection of values,

66
00:03:32,200 --> 00:03:34,760
we should again add a value here.

67
00:03:34,760 --> 00:03:38,470
We did not need this for the agree to terms checkbox,

68
00:03:38,470 --> 00:03:41,520
because they're just getting this on value

69
00:03:41,520 --> 00:03:45,610
or no value at all, was enough to answer this question,

70
00:03:45,610 --> 00:03:48,090
whether the user agrees or not.

71
00:03:48,090 --> 00:03:51,095
But if multiple values can be selected here,

72
00:03:51,095 --> 00:03:55,600
then we have to give these values identifiers,

73
00:03:55,600 --> 00:03:58,990
which we can extract on the server later.

74
00:03:58,990 --> 00:04:01,050
So here I'll just say email.

75
00:04:01,050 --> 00:04:04,913
And on the second input, I'll add a value of phone.

76
00:04:06,100 --> 00:04:08,230
And if I do that and saved this.

77
00:04:08,230 --> 00:04:10,610
Now, we've got these checkboxes here as well,

78
00:04:10,610 --> 00:04:13,300
and I can check one of them or both of them.

79
00:04:13,300 --> 00:04:16,550
And when this is submitted, you see that contact

80
00:04:16,550 --> 00:04:19,450
is now added multiple times with all

81
00:04:19,450 --> 00:04:23,610
those different values, which we selected.

82
00:04:23,610 --> 00:04:26,850
And we're going to dive into how we can parse and use this

83
00:04:26,850 --> 00:04:29,270
on a server later in the course,

84
00:04:29,270 --> 00:04:31,790
when we dive deeply into backend

85
00:04:31,790 --> 00:04:34,340
and service site development.

86
00:04:34,340 --> 00:04:36,982
But these are the two ways of using checkboxes.

87
00:04:36,982 --> 00:04:40,470
To have a single yes no choice,

88
00:04:40,470 --> 00:04:44,300
or to have a list of choices where more than one

89
00:04:44,300 --> 00:04:46,050
choice can be made.

90
00:04:46,050 --> 00:04:49,480
And that's the difference to the radio buttons where only

91
00:04:49,480 --> 00:04:53,053
one option can be selected at the same time.