WEBVTT

0
00:03.880 --> 00:10.610
I am super amped about this lecture because now we're going to be getting into relatively advanced concepts.

1
00:10.630 --> 00:16.300
It's not hard code, but it's just the concepts around why we use one element over another,

2
00:16.300 --> 00:22.930
because having a form with lots of input boxes and checkboxes and radio boxes and ranges, it's great.

3
00:22.930 --> 00:25.690
But how does the user submit all the information?

4
00:25.720 --> 00:29.740
Well, that's where we need some type of submit button, right?

5
00:29.740 --> 00:35.260
And this lecture involves four steps and I want to go through each step individually because each step

6
00:35.260 --> 00:36.880
will build on from each other.

7
00:36.880 --> 00:39.070
So let's start off right at the beginning.

8
00:39.070 --> 00:43.870
Why does the input element need to have the ability to create buttons?

9
00:44.080 --> 00:46.810
Well, the answer I'm sure is obvious.

10
00:47.020 --> 00:50.520
How does the user submit all the form information without one?

11
00:50.530 --> 00:56.110
You might be thinking, "Well, Clyde, if they own a laptop, they can hit the enter key." And you are

12
00:56.110 --> 00:57.970
100% correct.

13
00:58.000 --> 00:59.110
Let me show you.

14
00:59.710 --> 01:00.760
Here we go.

15
01:00.760 --> 01:03.290
We've got a very simple HTML form.

16
01:03.290 --> 01:08.270
All I've done is I've got an input of type text and that's it.

17
01:08.300 --> 01:09.020
That's all I've got.

18
01:09.020 --> 01:11.330
I haven't even got a submit button.

19
01:11.420 --> 01:14.240
And if we go to the browser, this is what it looks like.

20
01:14.240 --> 01:17.600
Here we go, a simple input box and it's very simple.

21
01:17.600 --> 01:19.130
Let's type "wally".

22
01:19.310 --> 01:25.940
And now if I hit enter on the keyboard because I'm on a PC, the form does submit.

23
01:25.970 --> 01:32.600
You can see there in the URL, we've got our variable name and we've got the value of "wally", so we

24
01:32.600 --> 01:34.280
don't even need a submit button.

25
01:34.280 --> 01:35.660
Why even have one?

26
01:35.660 --> 01:38.990
Well, before I jump ahead of myself, let's jump back into the lecture.

27
01:39.440 --> 01:40.610
So there you go.

28
01:40.610 --> 01:46.160
We can just use the enter key, but I'm sure you agree with me this is not enough.

29
01:46.160 --> 01:51.770
We need a more functional, more formal way for users to submit their forms.

30
01:52.130 --> 01:53.150
So that's step one.

31
01:53.150 --> 02:00.620
Step one is we need to have the ability for a user to submit a form other than just hitting enter [return] on

32
02:00.620 --> 02:01.340
their keyboard,

33
02:01.340 --> 02:01.850
right?

34
02:01.850 --> 02:04.540
We've established that that's the most simple.

35
02:04.540 --> 02:09.790
Let's move on to the next step of this lecture, and that is how do we then add a button to a form?

36
02:09.790 --> 02:15.760
As developers, we have a lot of flexibility, and there's not just one way to add a button to a form.

37
02:15.760 --> 02:24.190
We have two main ways, and the two main ways are using the button element, and the other way is to use

38
02:24.220 --> 02:26.020
an input element.

39
02:26.020 --> 02:33.430
And both of these types, whether we use button or input, they behave the same way and they accept

40
02:33.430 --> 02:41.920
three types of attributes: (1) the submit attribute, (2) the reset attribute and (3) the button attribute.

41
02:41.950 --> 02:46.930
Now, instead of coding each one up and showing you, I've put it here in the slides so we can go through

42
02:46.930 --> 02:48.610
them one by one.

43
02:48.790 --> 02:52.960
So let's first look at this submit button. A submit button,

44
02:52.960 --> 02:59.380
and by submit button, I mean when it's type attribute is set to submit, this is what we're talking

45
02:59.380 --> 02:59.740
about.

46
02:59.740 --> 03:04.750
And the submit type is the default value for the button.

47
03:04.750 --> 03:12.160
And it sends the form's data to the URL specified by the action attribute in the form element itself.

48
03:12.160 --> 03:13.090
It makes sense.

49
03:13.090 --> 03:15.000
And how does this look?

50
03:15.010 --> 03:16.840
Well, let's first look at the button element.

51
03:16.870 --> 03:19.360
We set its type attribute to submit.

52
03:20.020 --> 03:21.700
Here's an example of code.

53
03:21.730 --> 03:23.410
What do you notice with that?

54
03:24.780 --> 03:31.440
Well, I'm sure you might have picked up that we're adding HTML rich content within the button element

55
03:31.440 --> 03:35.290
itself, so we can do cool things like bold text.

56
03:35.310 --> 03:40.920
So the result of this button is going to look like this with the word cool being bold.

57
03:41.250 --> 03:42.570
Isn't that pretty cool.

58
03:45.290 --> 03:46.950
Wow, that's cool, man
(swoosh sound)

59
03:47.370 --> 03:50.370
So that's the button where its type is set to submit.

60
03:50.370 --> 03:52.590
And as I mentioned, this is the default.

61
03:52.650 --> 03:54.720
Well, what does the input look like?

62
03:55.260 --> 03:58.500
Again, we're setting its type attribute to submit.

63
03:59.620 --> 04:00.730
But look at this.

64
04:00.760 --> 04:06.910
We've got a value attribute, and in there we can't perform rich formatting.

65
04:06.910 --> 04:08.860
We can't insert HTML.

66
04:09.530 --> 04:15.230
So the button in this case is going to look like this, but it's not going to be as cool because that

67
04:15.230 --> 04:16.880
cool is not bolded.

68
04:16.910 --> 04:17.750
Got it.

69
04:18.110 --> 04:18.920
Let's move on.

70
04:20.170 --> 04:21.760
So that's the submit button.

71
04:22.090 --> 04:22.870
That's the default.

72
04:22.870 --> 04:28.530
But we've also got this reset button, and I've mentioned it in previous lectures.

73
04:28.540 --> 04:33.040
This just resets all of the form widgets to their default values.

74
04:33.040 --> 04:37.390
And from a UX point of view, this is considered bad practice.

75
04:37.420 --> 04:38.110
Why?

76
04:38.140 --> 04:40.510
Well, the user may click it by mistake, right?

77
04:40.510 --> 04:46.090
So we should avoid using this type of button unless you really have a good reason to include one.

78
04:46.090 --> 04:51.940
And if you really want to use a reset button, just make sure you style the button very carefully and

79
04:51.940 --> 04:57.930
even give the user a modal pop up asking if they are sure they want to reset the entire form.

80
04:57.940 --> 04:59.080
But enough said on that.

81
04:59.080 --> 05:00.270
How does it look like?

82
05:00.280 --> 05:02.350
Well, let's first look at the button element.

83
05:02.380 --> 05:05.890
We setting its type attribute to reset.

84
05:06.010 --> 05:08.710
It's not submit anymore, it's "reset".

85
05:09.730 --> 05:11.360
So we can do something like this.

86
05:11.380 --> 05:14.950
And again, you'll notice that we can perform rich formatting.

87
05:14.950 --> 05:18.610
We can bold the word unfortunate, for example.

88
05:18.640 --> 05:20.090
So that's what it looks like.

89
05:20.110 --> 05:21.790
Nothing surprising there, is there?

90
05:22.180 --> 05:29.710
And if we look at the input element, we set its type to reset again. We put its content inside the

91
05:29.710 --> 05:30.910
value attribute.

92
05:30.910 --> 05:33.130
And here we cannot insert HTML.

93
05:33.130 --> 05:38.860
So we just get a boring old button - very similar to what we saw previously, right, in terms of design.

94
05:39.130 --> 05:41.740
And now let's look at the final attribute.

95
05:41.770 --> 05:44.320
We can have a button attribute.

96
05:44.350 --> 05:45.040
What?

97
05:45.040 --> 05:46.150
This is weird.

98
05:46.660 --> 05:50.260
So we have a button with a button attribute.

99
05:50.440 --> 05:51.670
What does it do?

100
05:51.850 --> 05:52.810
Well ...

101
05:57.050 --> 05:59.510
a click on a button does nothing.

102
05:59.780 --> 06:01.100
Rah, rah, rah.

103
06:01.220 --> 06:02.450
Nothing at all.

104
06:02.450 --> 06:03.770
And this may sound silly

105
06:03.800 --> 06:09.770
my dear students, but it's actually amazingly useful for building custom buttons because you can define

106
06:09.770 --> 06:12.650
the chosen functionality with JavaScript.

107
06:12.680 --> 06:14.120
Anyway, let's see what it looks like

108
06:14.150 --> 06:15.290
again ... button,

109
06:15.290 --> 06:17.900
and here are we setting its type to button.

110
06:18.590 --> 06:19.240
Here we go,

111
06:19.250 --> 06:20.990
similar example to all the others.

112
06:21.020 --> 06:24.290
And as you can see, we can add HTML within the button.

113
06:24.290 --> 06:26.870
We can perform rich formatting.

114
06:26.870 --> 06:32.840
If we look at now the input we set its type to button, it's pretty much the same as all the other examples

115
06:32.840 --> 06:33.590
we've seen.

116
06:33.830 --> 06:36.410
It's just a boring, plain old button.

117
06:37.630 --> 06:38.530
So there we go.

118
06:39.310 --> 06:40.660
Let's just take a step back.

119
06:41.080 --> 06:43.750
Remember, there are two ways we can add buttons to our form.

120
06:43.750 --> 06:47.290
We can use the button element or the input element.

121
06:47.290 --> 06:54.250
And both of these accept three types of attributes which we've just looked at - submit, reset and button.

122
06:54.250 --> 06:55.270
So there you go,

123
06:55.390 --> 06:57.130
the two ways to create a button.

124
06:57.130 --> 07:04.030
And before we move on, I just want to drive the point home 🏠 ... button elements let you use HTML in the

125
07:04.030 --> 07:04.870
content.

126
07:04.870 --> 07:08.710
Remember, we added the strong element inputs.

127
07:08.710 --> 07:10.900
On the other hand, they [inputs] are empty.

128
07:10.930 --> 07:15.160
We use the value attribute and we have to insert a string.

129
07:15.160 --> 07:17.770
But you already know this, so let's move on.

130
07:18.100 --> 07:19.870
That was step two of this lecture.

131
07:19.870 --> 07:22.900
Now I want to move on to step 3.

132
07:29.780 --> 07:30.200
(background music plays)