WEBVTT

0
00:00.860 --> 00:02.810
Welcome back, my dear students.

1
00:02.820 --> 00:03.740
Hope you're having fun.

2
00:03.740 --> 00:06.440
I just wanted to take this time and thank you for supporting me.

3
00:06.440 --> 00:08.720
Thank you for sticking with me.

4
00:08.870 --> 00:10.400
I know it can seem quite daunting.

5
00:10.400 --> 00:15.410
We literally are covering a ton of information, but trust me, it's going to help you in your web development

6
00:15.410 --> 00:18.200
career and you will be dealing with forms a lot.

7
00:18.230 --> 00:20.420
That is something we can't avoid.

8
00:20.420 --> 00:24.950
So stick with me, continue to stick with me and we'll get through it together.

9
00:24.980 --> 00:30.980
Anyway, I just thought I'd take this lecture to discuss some of the common attributes that we'll see

10
00:31.010 --> 00:32.570
on most form widgets.

11
00:32.570 --> 00:38.780
So most of the elements used to define form controls have some of their own specific attributes.

12
00:38.810 --> 00:43.310
However, there is a set of attributes common to pretty much all form elements.

13
00:43.400 --> 00:48.230
We've seen a lot of these already in the course, but for your reference, I just thought, let me have

14
00:48.230 --> 00:53.810
one lecture where I discuss the common attributes that you'll see. So, we can see we've got disabled, autofocus

15
00:53.810 --> 00:56.180
form, name and value.

16
00:56.480 --> 00:58.190
Let me discuss each one.

17
00:58.190 --> 01:00.990
First, let's look at disabled.

18
01:01.560 --> 01:04.530
It's an attribute and that's how it looks, right?

19
01:04.530 --> 01:07.440
We just put it within the input element.

20
01:07.440 --> 01:09.000
And why would we want to put this on?

21
01:09.000 --> 01:15.900
Well, disabled inputs do not receive the click event and disabled inputs are not submitted with the

22
01:15.900 --> 01:17.310
form to the server.

23
01:17.310 --> 01:26.010
So it basically makes all inputs, textareas and fieldsets or descendants of them non-editable and

24
01:26.010 --> 01:26.810
unclickable.

25
01:26.820 --> 01:32.130
Another thing I want to actually say here is that what's interesting is that a disabled field can't

26
01:32.130 --> 01:38.970
be modified, tabbed to, highlighted or have its contents copied, right. And obviously its value is going to

27
01:38.970 --> 01:42.330
be ignored when the form goes through constraint validation.

28
01:42.330 --> 01:46.440
As you can see on the example on the screen, it is a boolean value.

29
01:46.440 --> 01:48.210
It's either there or it's not.

30
01:48.210 --> 01:50.490
So you don't need to assign it a value.

31
01:50.520 --> 01:53.670
What's interesting is that setting it to null does not remove it.

32
01:53.670 --> 01:54.930
It's still going to be there.

33
01:54.930 --> 01:59.880
And as I mentioned, the element will inherit this setting from its parent.

34
01:59.880 --> 02:06.900
So if you put the disabled attribute on a form, its elements within it will inherit that property.

35
02:07.320 --> 02:10.080
And of course the default value is false.

36
02:10.110 --> 02:14.460
Or another way of saying it, is by default that disabled attribute is not there.

37
02:14.810 --> 02:14.950
Cool.

38
02:15.120 --> 02:16.980
So those are the main points about disabled,

39
02:16.980 --> 02:20.610
but I do have a few more, and I thought I'll put them in a light bulb 💡 just to break things up.

40
02:20.610 --> 02:24.300
Did you know that setting the value of disabled to null does not remove the control.

41
02:24.300 --> 02:24.840
Yes.

42
02:24.840 --> 02:27.450
You do know that because I mentioned that a few seconds ago.

43
02:27.870 --> 02:34.020
The other interesting thing is we can target elements that are disabled with the :disabled pseudo class.

44
02:34.020 --> 02:39.780
Similarly, we can target elements that are enabled with the :enabled pseudo class, or we can even use

45
02:39.780 --> 02:41.880
the new CSS, "not" keyword.

46
02:41.880 --> 02:48.450
So, input:not([disabled]). And we can use the disabled attribute on most form controls such as all input

47
02:48.480 --> 02:51.920
types, textarea, buttons, select, fieldsets and keygen [elements].

48
02:52.510 --> 02:54.910
So it's widely in use.

49
02:54.940 --> 02:57.340
That's exactly why I want you to know about it.

50
02:57.370 --> 02:57.790
All right.

51
02:57.790 --> 02:58.820
So that's disabled.

52
02:58.840 --> 03:02.800
Next, I want to talk about the autofocus attribute.

53
03:03.310 --> 03:04.180
How does that look?

54
03:04.230 --> 03:07.270
Well, here I've just applied it to an input of type text.

55
03:07.300 --> 03:08.020
What does it do?

56
03:08.050 --> 03:13.450
It lets you specify that the element should automatically have focus when the page loads.

57
03:13.450 --> 03:17.140
What about if you have it on more than one element, which one will get focus?

58
03:17.410 --> 03:18.880
Well, it depends.

59
03:18.910 --> 03:24.640
Originally in the specification, the last element with the autofocus attribute received the focus.

60
03:24.670 --> 03:29.140
Safari still does this, but Internet Explorer, Firefox, Chrome, Opera,

61
03:29.170 --> 03:32.920
they all focus on the first occurrence of the attribute.

62
03:32.920 --> 03:37.840
And if you do want to use a fallback or a polyfill, for example, just in case a browser doesn't support

63
03:37.840 --> 03:45.280
this, make sure to fire it on the DOM Ready Event [aka: DOMContentLoaded] rather than the window.onload event, because it's

64
03:45.280 --> 03:47.920
going to be jarring to have the page position jump after

65
03:47.920 --> 03:50.380
the user may already be interacting with the page.

66
03:50.680 --> 03:52.700
So try not to use the onload event. 

67
03:52.710 --> 03:54.680
So that's the autofocus.

68
03:54.680 --> 03:55.550
Should you use it?

69
03:55.580 --> 04:00.950
Well, I've got a bomb 💣 there and the reason for the bomb is I want you to beware when using this.

70
04:00.950 --> 04:05.360
The AutoFocus forces a page scroll and it can get quite annoying.

71
04:05.390 --> 04:11.300
It can also confuse visually impaired people and screen readers, and it can also cause dynamic keyboards

72
04:11.300 --> 04:13.670
to display on some touch devices.

73
04:13.670 --> 04:18.050
While a screen reader will announce the label of the form control receiving focus,

74
04:18.080 --> 04:23.780
the screen reader will not announce anything before the label, and a sighted user on a small device

75
04:23.780 --> 04:28.670
will equally miss the context created by the preceding content.

76
04:28.670 --> 04:34.880
So to cut a long story short, it's probably good that mobile WebKit doesn't support the autofocus attribute

77
04:34.880 --> 04:41.150
as the zooming keyboard opening would be far too much in your face in most circumstances, and even

78
04:41.150 --> 04:44.990
more than this, MDN advises against using it altogether.

79
04:44.990 --> 04:48.350
So for those reasons, try and avoid it, please.

80
04:48.380 --> 04:50.630
Next, I want to talk about this form attribute.

81
04:50.660 --> 04:52.450
We've actually already seen the form attribute.

82
04:52.460 --> 04:57.710
We've used it a few times in a few examples. And that's an example, where you just put it on an element,

83
04:57.740 --> 05:03.320
you use the form attribute and remember you have to match it to the actual main form ID you want it to

84
05:03.320 --> 05:03.950
relate to.

85
05:03.950 --> 05:11.180
And previously, and by previously I just mean HTML4, they or that spec insisted that all form widgets

86
05:11.180 --> 05:13.340
were contained in one form block.

87
05:13.340 --> 05:18.500
But now we know by using the form attribute, we can associate a widget with a form, even if it's not

88
05:18.530 --> 05:20.300
within the main form.

89
05:20.300 --> 05:26.450
But remember, the value of that form attribute in the widget must be equal to the form

90
05:26.450 --> 05:32.480
ID. Remember, we looked at an example of this ages ago where we had the form split up between the top

91
05:32.480 --> 05:36.980
of the page and the bottom of the page, and we submitted the form and we could see that all the widgets

92
05:36.980 --> 05:39.410
data was submitted with that main form.

93
05:39.410 --> 05:40.910
So it can be quite useful.

94
05:41.420 --> 05:48.530
The next one is super, super important and that is this value attribute, right. Here, with type checkbox,

95
05:48.530 --> 05:56.930
we set its value to accept. When specified in HTML, the value attribute specifies the initial value,

96
05:56.930 --> 06:02.630
but it doesn't have to stay like that because from then on, it can be altered or retrieved at any time

97
06:02.630 --> 06:07.850
using JavaScript to access the respective HTML input element

98
06:08.060 --> 06:10.050
objects value property.

99
06:10.070 --> 06:12.650
We've seen examples of this numerous times.

100
06:12.680 --> 06:13.700
Is it compulsory?

101
06:13.730 --> 06:17.150
Well, yes and no.

102
06:17.180 --> 06:23.630
The value attribute is optional though should be considered mandatory for checkbox, radio and inputs

103
06:23.630 --> 06:24.440
of type

104
06:24.440 --> 06:28.430
hidden. In those instances, the value is crucial.

105
06:28.460 --> 06:33.380
The next thing I want to mention here is that the value attribute is used differently for different

106
06:33.380 --> 06:36.020
types of elements, and I guess this is intuitive, right?

107
06:36.020 --> 06:37.760
For button, reset and submit

108
06:37.760 --> 06:43.460
for example, it defines the text on the button. For the input element where the type is set to text,

109
06:43.460 --> 06:44.900
password or hidden,

110
06:44.930 --> 06:51.260
it defines the initial or default value of the input field. For a checkbox, radio or image

111
06:51.260 --> 06:55.190
for example, It defines the value associated with the input.

112
06:55.220 --> 06:57.710
This is also the value that is sent on submit.

113
06:57.710 --> 07:00.980
But as I mentioned, it's not always mandatory. For the file type,

114
07:00.980 --> 07:03.410
for example, the value attribute is not valid.

115
07:03.410 --> 07:05.350
In fact, it's entirely ignored.

116
07:05.360 --> 07:06.170
So there you go.

117
07:06.170 --> 07:07.190
That's the value attribute.

118
07:07.190 --> 07:12.560
And last but not least, this name attribute is very, very important, right?

119
07:12.560 --> 07:18.320
And that's how we set it, for example, on an input where its type is set to text. And as the name suggests,

120
07:18.320 --> 07:23.870
it specifies the name for the form control. And you can use the name attribute in many ways.

121
07:23.870 --> 07:27.290
You can use it to reference elements in JavaScript or to reference the form

122
07:27.290 --> 07:33.110
data after the form is submitted to a server. And remember the name is submitted along with its value when

123
07:33.110 --> 07:34.970
the form data is submitted.

124
07:34.970 --> 07:40.220
So in most instances you should consider the name attribute as a required one.

125
07:40.460 --> 07:42.860
It's very, very important.

126
07:42.860 --> 07:44.540
And I've got a few

127
07:44.570 --> 07:49.550
"did you knows". The name attribute is unique for radio buttons.

128
07:49.550 --> 07:51.920
What I mean by this is that only one radio button

129
07:51.960 --> 07:57.360
in a same named group of radio buttons, can be checked at any given time.

130
07:57.360 --> 08:03.270
So by selecting any radio button in that group, will automatically deselect any currently selected radio

131
08:03.270 --> 08:10.220
buttons in the same group. And the name of that one checked radio button is sent along with the name

132
08:10.230 --> 08:12.000
if the form is submitted.

133
08:12.000 --> 08:14.730
So just remember to create a group of radio buttons

134
08:14.730 --> 08:19.880
we have the same name attribute, so it kind of plays a very unique role when it comes to radio buttons.

135
08:19.890 --> 08:25.110
The second thing I want to mention is that the name of an element becomes a property of the owning form

136
08:25.110 --> 08:28.560
element's HTMLFormElement.elements property! 

137
08:28.560 --> 08:29.310
(sound effect: What do you say?)

138
08:29.340 --> 08:29.940
What 😵?

139
08:29.970 --> 08:30.960
"That sounds strange

140
08:30.960 --> 08:32.700
Clyde". I know, I know.

141
08:32.730 --> 08:36.300
Let me quickly show you. What do I mean by what I just said?

142
08:36.300 --> 08:37.590
I know it sounded confusing.

143
08:37.590 --> 08:46.770
This is all that I mean. Let's set up a very quick HTML document here. And a body. Inside the body,

144
08:46.770 --> 08:48.750
let's create an input of type text.

145
08:48.750 --> 08:52.420
And its name can be "guest". 

146
08:52.450 --> 08:53.260
How about that?

147
08:53.290 --> 08:53.880
Guest. 

148
08:54.680 --> 08:54.920
Okay.

149
08:54.920 --> 08:55.850
So there is one.

150
08:55.880 --> 08:57.350
Let's do another one now,

151
08:58.340 --> 08:59.330
also text.

152
08:59.750 --> 09:01.460
But here we can go "member".

153
09:02.870 --> 09:04.550
Okay, let's say we've got these two.

154
09:04.580 --> 09:07.100
Now, what I want to do is I want to use JavaScript.

155
09:07.100 --> 09:08.870
I want to grab our form.

156
09:08.990 --> 09:09.590
You know what?

157
09:09.620 --> 09:11.360
Sorry, I forgot to have the form here.

158
09:12.790 --> 09:13.690
There we go.

159
09:13.690 --> 09:17.650
We can give it an ID of mainform.

160
09:18.630 --> 09:21.020
Take these two inputs and put them in the form ... done.

161
09:22.220 --> 09:23.930
The first step is I want to grab the form.

162
09:23.930 --> 09:29.510
So let's define a JavaScript variable using the "let" keyword. We can call it form, and here we can

163
09:29.510 --> 09:34.640
just document.getElementById(), and we can grab the form. 

164
09:35.640 --> 09:36.120
No.

165
09:36.150 --> 09:36.750
I mean "mainform".

166
09:36.750 --> 09:37.350
Sorry.

167
09:38.830 --> 09:39.400
So there we go.

168
09:39.400 --> 09:42.850
We've got the form in JavaScript. And now this is what I mean, right.

169
09:42.850 --> 09:47.620
This is what I mean when I said, when an input element is given a name,

170
09:48.570 --> 09:53.290
that name becomes a property of the owning form element's

171
09:53.730 --> 09:55.020
HTMLFormElement.elements

172
09:55.020 --> 09:55.890
property.

173
09:56.460 --> 09:58.470
haha ... that is a proper tongue twister.

174
09:58.470 --> 09:59.490
But this is what I mean.

175
09:59.490 --> 10:04.680
We can say let guestName be assigned the value of our form. 

176
10:04.680 --> 10:10.680
On our form, we can access the HTML form elements ".elements" property.

177
10:10.980 --> 10:18.960
So automatically the DOM gives us this ".elements" property and we defined the name as guest.

178
10:18.960 --> 10:20.910
So we can type guest.

179
10:21.030 --> 10:23.700
We can do the same with a member.

180
10:23.700 --> 10:25.020
So let member,

181
10:25.020 --> 10:26.720
but this time I want to do it differently.

182
10:26.730 --> 10:30.210
Let's access our form, our ".elements" property.

183
10:30.210 --> 10:33.300
And now I want to return an object

184
10:33.330 --> 10:36.690
okay, where the name is member.

185
10:36.690 --> 10:44.610
And what we can do here is why don't we console.log this out so we can console.log(guestName) 

186
10:46.390 --> 10:47.590
and we can console

187
10:47.590 --> 10:48.160
log,

188
10:48.370 --> 10:49.480
console

189
10:49.480 --> 10:51.130
log member.

190
10:51.820 --> 10:53.530
Let's now open our browser.

191
10:53.650 --> 10:55.180
There are the two inputs we just created.

192
10:55.180 --> 10:56.530
Let's inspect the console.

193
10:59.420 --> 11:00.500
And there we go.

194
11:00.530 --> 11:03.110
The first console, of course, is the guest.

195
11:03.200 --> 11:03.890
Right.

196
11:03.920 --> 11:04.590
How cool.

197
11:04.610 --> 11:07.940
And the second one is the member. How awesome is that?

198
11:07.940 --> 11:12.020
And we just did literally two ways to do exactly the same thing.

199
11:12.230 --> 11:16.820
If you really want to see something else as well, why don't we just console log quickly ...

200
11:17.120 --> 11:18.110
let me just go here.

201
11:18.350 --> 11:22.160
Console log the form ".elements"

202
11:23.380 --> 11:24.100
property.

203
11:24.130 --> 11:25.120
Let's see what that does.

204
11:25.150 --> 11:26.010
Let's go here.

205
11:26.030 --> 11:26.520
Right.

206
11:26.530 --> 11:31.330
Let's just clear everything up, refresh the page, and you can see you've got an HTMLFormControlsCollection.

207
11:31.330 --> 11:32.140
HTMLFormControlsCollection.

208
11:32.210 --> 11:32.440
Okay.

209
11:32.440 --> 11:37.690
And if we open up that, you can see both of our inputs are included within this collection.

210
11:37.690 --> 11:39.670
That's exactly how this code works.

211
11:39.670 --> 11:43.290
That's why we were able to access our guestName and member.

212
11:43.300 --> 11:44.050
So there you go.

213
11:44.050 --> 11:47.500
That's all I meant by that very long tongue twister.

214
11:47.710 --> 11:48.520
So there you go

215
11:48.550 --> 11:54.820
my students, these are common attributes that you'll find on just about every input element there is.

216
11:54.850 --> 11:59.890
And that's why I listed these 5, because these 5 are very, very universal.

217
11:59.890 --> 12:01.570
Yes, they have slight nuances.

218
12:01.570 --> 12:07.780
Like name, for example, has a very specific meaning for radio buttons as opposed to its use on a checkbox,

219
12:07.780 --> 12:08.680
for example.

220
12:09.040 --> 12:12.220
So these are just very, very good ones for you to know about.

221
12:12.220 --> 12:13.150
I hope it's making sense.

222
12:13.150 --> 12:15.970
I hope you're staying motivated and I'll see you soon.