1
00:00:02,029 --> 00:00:05,490
So let's work on that next section of inputs

2
00:00:05,490 --> 00:00:06,450
for this all.

3
00:00:06,450 --> 00:00:09,620
Add a new section here and give this a title

4
00:00:09,620 --> 00:00:14,173
with h2 tag where I say, how should we reply?

5
00:00:15,580 --> 00:00:19,600
Now in here, I then wanna have an unordered list again

6
00:00:19,600 --> 00:00:21,490
with multiple list items

7
00:00:21,490 --> 00:00:25,070
where every list item holds a label input combination.

8
00:00:25,070 --> 00:00:29,010
But here, I'll now render a couple of radio buttons.

9
00:00:29,010 --> 00:00:32,940
Hence I'll have to input first and set the type to radio.

10
00:00:32,940 --> 00:00:35,970
And then I'll add the label there after.

11
00:00:35,970 --> 00:00:39,300
And for the first radio button,

12
00:00:39,300 --> 00:00:43,820
I'll say call me as a preferred way of replying.

13
00:00:43,820 --> 00:00:48,010
And I'll give that input a name of reply.

14
00:00:48,010 --> 00:00:50,250
The name here will be the same one

15
00:00:50,250 --> 00:00:54,740
for all the radio buttons that belong to this group,

16
00:00:54,740 --> 00:00:58,330
but I'll then also give it an id of reply-phone

17
00:00:58,330 --> 00:01:00,880
and the ids will be unique.

18
00:01:00,880 --> 00:01:04,453
Every radio button has its own unique id.

19
00:01:05,610 --> 00:01:08,060
I will also add the value attribute

20
00:01:08,060 --> 00:01:10,430
to set this machine readable value,

21
00:01:10,430 --> 00:01:13,460
which will actually be submitted to a server

22
00:01:13,460 --> 00:01:16,210
when that radio button is selected,

23
00:01:16,210 --> 00:01:19,580
because you learned that if we don't set this,

24
00:01:19,580 --> 00:01:23,120
there actually is no value that would be submitted

25
00:01:23,120 --> 00:01:25,050
because this is not a input

26
00:01:25,050 --> 00:01:29,750
where a user types something into a input field.

27
00:01:29,750 --> 00:01:32,510
The label text is definitely not submitted

28
00:01:32,510 --> 00:01:35,400
and hence without the value attribute here,

29
00:01:35,400 --> 00:01:37,670
nothing would be sent to a server.

30
00:01:37,670 --> 00:01:39,370
So we absolutely want that.

31
00:01:39,370 --> 00:01:42,200
And here, I'll use phone as a value

32
00:01:42,200 --> 00:01:43,960
that should be sent to a server

33
00:01:43,960 --> 00:01:46,373
if this first radio button is selected.

34
00:01:47,630 --> 00:01:50,530
And now as a last step, I'll set the for attribute here

35
00:01:50,530 --> 00:01:54,610
on the label and point at the reply-phone radio button,

36
00:01:54,610 --> 00:01:56,163
so at this id.

37
00:01:57,470 --> 00:01:59,200
And then we can copy this

38
00:01:59,200 --> 00:02:01,540
and create a second radio button

39
00:02:01,540 --> 00:02:05,073
where we say, send me an email.

40
00:02:06,100 --> 00:02:09,630
And here the name is still reply because as mentioned,

41
00:02:09,630 --> 00:02:13,590
they all belong to the same group, all those radio buttons.

42
00:02:13,590 --> 00:02:18,590
But the id here is reply-email and the value is email.

43
00:02:19,380 --> 00:02:23,583
And therefore the for value is reply-email as well.

44
00:02:24,980 --> 00:02:26,740
And then I'll copy this again.

45
00:02:26,740 --> 00:02:31,740
Create another radio button where we can say don't reply.

46
00:02:32,840 --> 00:02:37,840
So we're sending a message, but we don't want a response.

47
00:02:37,870 --> 00:02:41,660
And here did, could be reply-none,

48
00:02:41,660 --> 00:02:44,330
the value could be none and here

49
00:02:44,330 --> 00:02:47,730
for the for attribute we point at reply-none.

50
00:02:47,730 --> 00:02:51,350
Name as mentioned, still is reply

51
00:02:51,350 --> 00:02:53,490
so that all these radio buttons belong

52
00:02:53,490 --> 00:02:54,750
to the same group.

53
00:02:54,750 --> 00:02:58,143
And only one of them can be checked at the same time.

54
00:03:00,170 --> 00:03:02,050
Now, I'll add one more section here,

55
00:03:02,050 --> 00:03:03,670
which will hold a checkbox,

56
00:03:03,670 --> 00:03:06,523
which we can use to accept the terms.

57
00:03:07,440 --> 00:03:10,200
And for this- in this section here,

58
00:03:10,200 --> 00:03:15,200
I'll also display a input of type checkbox here now,

59
00:03:16,070 --> 00:03:18,570
and then the label after this input

60
00:03:18,570 --> 00:03:22,383
and later we'll style it such that it sits in the same line.

61
00:03:23,390 --> 00:03:26,820
And then here, I'll just say, accept terms.

62
00:03:26,820 --> 00:03:28,030
And on this input,

63
00:03:28,030 --> 00:03:32,110
we can give this a name which is accept terms maybe,

64
00:03:32,110 --> 00:03:35,480
and an id, which could be accept terms.

65
00:03:35,480 --> 00:03:38,280
And it's this id at which we now point

66
00:03:38,280 --> 00:03:41,370
with that for attribute.

67
00:03:41,370 --> 00:03:43,630
So we're doing the same thing over and over again

68
00:03:43,630 --> 00:03:44,463
in the end.

69
00:03:44,463 --> 00:03:46,560
And that is very common of course

70
00:03:46,560 --> 00:03:49,120
when you're building forms because after all,

71
00:03:49,120 --> 00:03:52,003
you are just dealing with a bunch of user input.

72
00:03:53,190 --> 00:03:56,280
And now last but not least, here in this form,

73
00:03:56,280 --> 00:04:00,460
I'll add a last section with my buttons.

74
00:04:00,460 --> 00:04:02,270
And here I wanna have two buttons

75
00:04:02,270 --> 00:04:05,980
because I had two buttons on this challenge,

76
00:04:05,980 --> 00:04:07,760
which I showed you earlier.

77
00:04:07,760 --> 00:04:10,780
And here, I want to have a button that clears the form.

78
00:04:10,780 --> 00:04:12,610
We can achieve this by setting the type

79
00:04:12,610 --> 00:04:14,193
to reset as you learned,

80
00:04:15,160 --> 00:04:18,110
and add a button that submits the form.

81
00:04:18,110 --> 00:04:21,930
And here we could set the type to submit,

82
00:04:21,930 --> 00:04:25,270
or we omit the type that would also work

83
00:04:25,270 --> 00:04:29,230
because then the default behavior of a button in a form

84
00:04:29,230 --> 00:04:31,953
is that it does submit that form.

85
00:04:33,390 --> 00:04:36,220
But with that, with all that added,

86
00:04:36,220 --> 00:04:39,360
we wrote a bunch of HTML code.

87
00:04:39,360 --> 00:04:41,430
And now we got this form.

88
00:04:41,430 --> 00:04:46,120
It's not pretty, but it there and it also would work.

89
00:04:46,120 --> 00:04:48,480
We could use it.

90
00:04:48,480 --> 00:04:51,310
However, of course the styling is missing

91
00:04:51,310 --> 00:04:56,020
and I also then want to configure it a little bit.

92
00:04:56,020 --> 00:04:59,290
I wanna make sure that it's submitted in a certain way.

93
00:04:59,290 --> 00:05:01,973
And I also wanna add some validation.