1
00:00:00,220 --> 00:00:03,990
Sometimes you might have a group of
predefined options, but you want the

2
00:00:03,990 --> 00:00:09,010
user to be able to select multiple options
and not just one of them.

3
00:00:09,010 --> 00:00:11,210
That's where checkboxes are useful.

4
00:00:11,210 --> 00:00:13,480
Lets say that we wanted the user to be
able

5
00:00:13,480 --> 00:00:17,610
to tell us which major topic areas are
interesting to them.

6
00:00:17,610 --> 00:00:23,340
They might be interested in more than one
topic, so checkboxes are perfect for this.

7
00:00:23,340 --> 00:00:26,500
I'm going to type out some checkboxes and
then explain them.

8
00:00:27,600 --> 00:00:30,310
So if we jump into our work space here.

9
00:00:30,310 --> 00:00:35,820
And I scroll down pass the Select element
we created earlier.

10
00:00:37,700 --> 00:00:40,080
We'll type out a Label.

11
00:00:40,080 --> 00:00:43,260
Once again without the for attribute
because we're not actually

12
00:00:43,260 --> 00:00:46,705
labelling any specific control here, just
a group of controls.

13
00:00:46,705 --> 00:00:51,010
We'll say interests.

14
00:00:51,010 --> 00:00:55,540
And then, we'll use the input element.

15
00:00:56,590 --> 00:00:59,960
And, for the type attribute, we'll say
checkbox.

16
00:01:01,060 --> 00:01:08,371
We'll give this one the ID of development
and the

17
00:01:08,371 --> 00:01:15,170
value of interest underscore development.

18
00:01:15,170 --> 00:01:23,070
We'll give it a name of user underscore
interest.

19
00:01:23,070 --> 00:01:26,540
And then we can close that input element.

20
00:01:26,540 --> 00:01:28,620
Right after it, we wanna add a label.

21
00:01:30,340 --> 00:01:32,580
And once again we'll give it the class
light.

22
00:01:33,650 --> 00:01:38,490
And we'll add a for attribute of
development because

23
00:01:38,490 --> 00:01:42,580
that matches the ID attribute that we just
created.

24
00:01:42,580 --> 00:01:46,000
And then we'll give it a label of
development.

25
00:01:46,000 --> 00:01:50,480
And right after we'll put a br element to
break down to the next line.

26
00:01:50,480 --> 00:01:56,250
Because just like our radio buttons, we're
going to list these out vertically.

27
00:01:56,250 --> 00:01:59,200
So let's copy that because the code we're
going to

28
00:01:59,200 --> 00:02:03,360
write will be very similar for each one of
these.

29
00:02:03,360 --> 00:02:07,510
For the next one, instead of development,
I'll say design.

30
00:02:07,510 --> 00:02:10,680
So I'll just keep the word design in my
clipboard.

31
00:02:12,040 --> 00:02:16,500
And we'll change the value from interest
development to interest design.

32
00:02:18,190 --> 00:02:23,250
We'll change the for attribute in the
label to match the ID.

33
00:02:23,250 --> 00:02:25,200
So, that will be design as well.

34
00:02:25,200 --> 00:02:29,650
And then, we'll change the content of the
label element to design.

35
00:02:31,320 --> 00:02:36,670
Finally, for the last input, we'll change
the ID to business.

36
00:02:38,160 --> 00:02:42,450
I'll keep the word business in my
clipboard so I've just copied that.

37
00:02:42,450 --> 00:02:46,400
I'll paste it to the value, so now it says
interest_business.

38
00:02:46,400 --> 00:02:53,440
And then we'll change the for attribute to
business so it matches the ID.

39
00:02:53,440 --> 00:02:57,740
And then finally, we'll change the content
to business.

40
00:02:57,740 --> 00:03:06,990
And for this last one, we don't need
another line break, so we'll remove that.

41
00:03:06,990 --> 00:03:12,420
And if we save that out, switch over to
our preview and

42
00:03:12,420 --> 00:03:18,710
refresh the page, you can see that we now
have these checkboxes down at the bottom.

43
00:03:18,710 --> 00:03:21,480
And I can click on the labels or

44
00:03:21,480 --> 00:03:24,560
the actual checkboxes to check each one of
them.

45
00:03:25,630 --> 00:03:28,170
And unlike radio buttons where I can only
select

46
00:03:28,170 --> 00:03:33,005
one at a time, I can select multiple
checkboxes.

47
00:03:33,005 --> 00:03:39,399
[SOUND] So, lets jump back to the code and
take a closer look at this.

48
00:03:39,399 --> 00:03:42,978
Very similar to radio buttons, I've used a
label

49
00:03:42,978 --> 00:03:47,475
for the group and a label for each
individual option.

50
00:03:47,475 --> 00:03:52,670
The syntax is almost identical because
most of the same rules apply.

51
00:03:52,670 --> 00:03:55,460
The only real difference here is the type

52
00:03:55,460 --> 00:04:00,080
attribute, and it's set to checkbox
instead of radio.

53
00:04:00,080 --> 00:04:03,540
This will tell the browser to render
checkboxes, and the user can

54
00:04:03,540 --> 00:04:08,870
select multiple checkboxes instead of just
one of them like with radio buttons.

55
00:04:08,870 --> 00:04:11,480
That about covers the basics of form
elements.

56
00:04:11,480 --> 00:04:14,880
Next up, we'll learn how to take your
knowledge a little bit further.