WEBVTT

0
00:29.160 --> 00:36.180
And step three is all about attributes, because with the arrival of HTML5, several new attributes

1
00:36.180 --> 00:39.270
have been added to buttons.

2
00:39.300 --> 00:41.130
What attributes specifically?

3
00:41.160 --> 00:47.010
Well, we've got formaction, formenctype, formmethod, formnovalidate, and

4
00:47.040 --> 00:48.030
formtarget.

5
00:48.120 --> 00:53.460
And these attributes define and override certain parameters pertaining how the form must be submitted.

6
00:53.490 --> 00:58.560
So these new attributes can be used, for example, to provide more than one submit button in a form

7
00:58.560 --> 01:01.740
and make each of them perform a different type of submission.

8
01:01.920 --> 01:02.910
How cool.

9
01:03.000 --> 01:05.700
Let me actually stop and show you an example.

10
01:06.240 --> 01:12.210
I want to look at a very cool example of using one of the newer HTML5 attributes, and that is 

11
01:12.210 --> 01:13.230
formnovalidate.

12
01:13.260 --> 01:16.230
We have discussed this in, I think, one of the lectures a while back.

13
01:16.230 --> 01:20.790
I can remember talking about it, but I want to show you how we can use different submit buttons in

14
01:20.790 --> 01:24.120
a form that perform different things.

15
01:24.150 --> 01:24.840
Let me show you.

16
01:24.870 --> 01:29.410
So here, let's just have a form and we don't need an action.

17
01:29.410 --> 01:33.310
Let's just do a target for fun because we know how they are used, right?

18
01:33.310 --> 01:39.820
And we can set this to _blank, meaning that a new blank window will open when the response is returned

19
01:39.820 --> 01:40.390
to us.

20
01:40.630 --> 01:41.150
Here we go.

21
01:41.170 --> 01:42.610
Let's start building our form.

22
01:42.610 --> 01:47.380
And as you know, a lot of my examples, I just wrap each form widgets in a paragraph.

23
01:47.380 --> 01:53.600
So here, let's ask for username information and all I want is a input type of text.

24
01:53.620 --> 01:54.850
Very, very simple.

25
01:54.850 --> 01:59.650
We can say it's [name attribute] is username, we don't need an ID, but what I do want to do, is I want to create a pattern

26
01:59.650 --> 01:59.890
here.

27
01:59.890 --> 02:04.270
And remember the value of the pattern attribute is a regular expression.

28
02:04.270 --> 02:07.120
We've done this before and they look kind of funky, right?

29
02:07.150 --> 02:14.920
So here I just want to specify that the user has to start off with a character, and the username I want

30
02:14.920 --> 02:19.300
to have as a minimum three characters and maximum 15.

31
02:19.330 --> 02:20.290
Very, very simple.

32
02:20.290 --> 02:24.640
And if there's an error, let's just customize the error message.

33
02:24.910 --> 02:31.270
A proper username must begin with a letter and be

34
02:32.230 --> 02:36.070
between 3 and 15 characters long.

35
02:36.100 --> 02:36.970
There you go.

36
02:36.970 --> 02:40.120
And to finish it off, let's make this a required attribute.

37
02:40.120 --> 02:41.470
So let's go to the browser.

38
02:41.590 --> 02:43.600
Let's open this up with live server.

39
02:45.360 --> 02:45.850
Here we go.

40
02:45.870 --> 02:51.780
If we just try and submit this by hitting the return or enter key, we won't be allowed to do so.

41
02:51.810 --> 02:55.290
If the user just types two characters, we won't be allowed to do so.

42
02:55.290 --> 03:00.930
But if we do three, hit enter, the form will submit and open in a new blank page.

43
03:00.960 --> 03:02.430
(sound effect: congratulations)

44
03:02.640 --> 03:03.810
Pretty intuitive.

45
03:04.410 --> 03:05.670
Let's just clear this.

46
03:05.670 --> 03:08.670
Let's go back to our code and let's continue.

47
03:08.670 --> 03:09.890
So that's the username.

48
03:09.900 --> 03:16.080
The only other thing I want to do here is I want another form widget, but here let's do password, input of

49
03:16.080 --> 03:16.950
type ...

50
03:16.980 --> 03:20.730
you guessed it, password. Name can be password.

51
03:21.060 --> 03:25.860
We don't need an ID and let's just put another pattern for the sake of it.

52
03:25.890 --> 03:26.670
Why not?

53
03:27.060 --> 03:36.150
Here we can just say, well, okay, we need letters big or small, and we can have numbers 0 to 9.

54
03:36.360 --> 03:36.810
Okay?

55
03:36.810 --> 03:40.890
And again, let's just say it needs to consist between 3 and 15 characters

56
03:40.890 --> 03:41.340
long.

57
03:41.370 --> 03:42.360
Very, very simple.

58
03:42.360 --> 03:44.040
We can add title here.

59
03:44.190 --> 03:52.540
I don't want to spend time on this, "password needs to be between 3 and 15 characters long". And of course

60
03:52.540 --> 03:53.890
let's set required on here.

61
03:53.890 --> 03:54.460
So there we go.

62
03:54.460 --> 03:56.310
We've got our username, we've got password.

63
03:56.320 --> 03:59.980
The final thing I want to do is I want to have submit buttons on here.

64
04:00.010 --> 04:01.320
Let's do another paragraph.

65
04:01.330 --> 04:04.330
Let's do input of type submit.

66
04:04.360 --> 04:07.510
Its value can be Send, but I want another one.

67
04:07.510 --> 04:08.800
I want another one.

68
04:08.800 --> 04:13.960
Input type submit, value can be "Send without

69
04:15.020 --> 04:16.310
validating

70
04:17.440 --> 04:22.390
username or password". And this is where I want to use the

71
04:22.420 --> 04:25.540
formnovalidate attribute.

72
04:25.540 --> 04:26.050
Right.

73
04:26.050 --> 04:30.040
And there's another attribute we should use here, and that is formmethod.

74
04:30.070 --> 04:33.730
I want this to be submitted as a GET request.

75
04:33.730 --> 04:34.300
Okay.

76
04:34.300 --> 04:35.140
So it's quite cool.

77
04:35.140 --> 04:41.020
We can literally specify how we want the form data to be submitted with different buttons.

78
04:41.020 --> 04:42.370
How awesome.

79
04:42.370 --> 04:43.540
So here we are defining,

80
04:43.540 --> 04:47.170
we want no validation and we're going to specify the type as GET.

81
04:47.170 --> 04:52.690
So if we go here, refresh, there are our buttons. And let's try to do this right.

82
04:52.690 --> 04:58.210
So if a username has two characters and we try and send, we'll be blocked from doing so.

83
04:58.480 --> 05:01.690
Same with password, we'll be blocked from doing so.

84
05:01.690 --> 05:07.750
But if we now click the second button, right, without validating username or password, we click that

85
05:07.750 --> 05:11.020
and ... boom 💥 ... it allows us to do so.

86
05:11.020 --> 05:16.150
So there was a really cool example - you can have different functionality with different buttons

87
05:16.150 --> 05:17.660
in a form

88
05:18.410 --> 05:22.250
by using these cool, funky new attributes.

89
05:22.700 --> 05:23.710
So there we go.

90
05:23.720 --> 05:25.640
Cool, cool example, wasn't it?

91
05:25.640 --> 05:31.820
But as they say, all good things come to an end and we are at the final step of this lecture and that

92
05:31.820 --> 05:37.820
is to quickly summarize the difference between using the submit type for button and input, because

93
05:37.850 --> 05:39.770
as developers we have a choice.

94
05:40.040 --> 05:42.050
So which should we use?

95
05:42.950 --> 05:47.180
Well, firstly, both cause the forms data to be submitted to the server,

96
05:47.180 --> 05:47.480
right?

97
05:47.480 --> 05:48.500
We've seen that.

98
05:49.020 --> 05:51.620
But there are very important differences.

99
05:51.630 --> 05:57.280
And in fact, developers prefer to use the button in most cases.

100
05:57.300 --> 05:58.560
And here's why.

101
05:58.950 --> 06:03.660
Firstly, the button can have content, whereas the input cannot.

102
06:03.690 --> 06:05.220
It's a null element.

103
06:05.250 --> 06:08.460
While the button text of an input can be specified,

104
06:08.490 --> 06:12.520
you cannot add markup to the text or insert a picture, for example.

105
06:12.540 --> 06:16.320
So a button has a wider array of display options.

106
06:16.320 --> 06:17.400
It makes sense.

107
06:17.850 --> 06:22.410
Secondly, the button is more explicit and it's more readable.

108
06:22.560 --> 06:25.830
Input suggests that the control is editable,

109
06:25.830 --> 06:26.100
right?

110
06:26.190 --> 06:32.460
It's kind of weird using an input for a button, and in that sense, using button is far more explicit

111
06:32.460 --> 06:34.950
in terms of the purpose it serves.

112
06:35.160 --> 06:39.390
Thirdly, the button is easier to style in CSS.

113
06:39.420 --> 06:41.730
In fact, Firefox has a bug.

114
06:41.730 --> 06:45.630
You can't set the line height of an input based button.

115
06:45.720 --> 06:48.820
Thus it doesn't match other buttons in Firefox.

116
06:48.850 --> 06:49.900
That's just one example

117
06:49.930 --> 06:50.610
by the way.

118
06:50.620 --> 06:54.310
And fourthly, the button is markup friendly.

119
06:54.340 --> 06:59.160
We can nest items, for example, icons inside of a button.

120
06:59.170 --> 07:01.060
You cannot do this with an input.

121
07:01.060 --> 07:08.290
And for all these reasons, most people, including myself, prefer to use a button when we go to submit

122
07:08.320 --> 07:09.010
a form.

123
07:09.310 --> 07:09.640
Whew.

124
07:09.730 --> 07:10.990
What a lecture.

125
07:11.020 --> 07:14.380
I told you this was going to be an awesome, awesome lecture.

126
07:14.830 --> 07:16.990
And it's quite interesting content, isn't it?

127
07:17.170 --> 07:18.700
You're learning a lot.

128
07:18.730 --> 07:22.210
But anyway, let me not harp on this because I'm so excited about this.

129
07:22.240 --> 07:23.170
Let's continue.

130
07:23.200 --> 07:24.580
We've got a lot more to learn.

131
07:24.610 --> 07:26.230
See you in the next lecture.