WEBVTT 0 00:00.480 --> 00:00.910 Whoo! 1 00:01.080 --> 00:04.410 I'm super, super excited because now we're getting into inputs. 2 00:04.410 --> 00:11.940 And this, my dear students, is one of the most, if not the most powerful HTML element there is, just because 3 00:11.940 --> 00:15.810 of the plethora of different things we can do with it. 4 00:15.840 --> 00:22.650 To put it simply, how an input works depends on the value of its type attribute. 5 00:22.680 --> 00:28.470 Hence, we're going to be discussing the plethora of different types in a lot of detail in this course. 6 00:28.470 --> 00:31.080 What about if a type is not specified? 7 00:31.110 --> 00:34.920 Well, then the default type of "text" is adopted. 8 00:34.920 --> 00:38.580 Now, because this is such a powerful element. 9 00:38.610 --> 00:42.480 I want to discuss where it's from. 10 00:42.480 --> 00:43.770 Let me show you now, quickly. 11 00:44.700 --> 00:45.000 All right. 12 00:45.000 --> 00:47.610 Very quickly, let me show you where this input is from. 13 00:47.640 --> 00:50.480 Firstly, let's define a variable called input. 14 00:50.490 --> 00:56.960 And all I want to do here is I want to create an element, not create attribute, createElement. 15 00:56.970 --> 01:00.690 And the element I want to create is an input element. 16 01:00.930 --> 01:04.110 I'm just here in a normal browser console, by the way. 17 01:04.230 --> 01:08.760 I've created that input, and all I want to do now is I don't want to console.dir() it out, 18 01:08.790 --> 01:09.090 okay. 19 01:09.120 --> 01:15.660 If I do this directly, and we open up this input, there's going to be a ton of properties and methods. 20 01:16.320 --> 01:17.010 Actually, you know what? 21 01:17.010 --> 01:20.760 I could just do this, and scroll all the way to the bottom. 22 01:20.940 --> 01:23.850 But it's that __proto__ that I'm interested in. 23 01:23.850 --> 01:25.110 I want to know where it's from. 24 01:25.110 --> 01:30.600 So instead of doing all of this and scrolling down and seeing all the properties and methods, I could 25 01:30.600 --> 01:32.520 just console 26 01:33.690 --> 01:39.560 dir out the input, but I want to look specifically at its __proto__. 27 01:40.380 --> 01:46.290 I want to see where its inherited all its properties and methods from. And its immediate prototype is 28 01:46.290 --> 01:48.630 this HTMLInputElement 😱. 29 01:48.660 --> 01:49.740 And don't panic. 30 01:49.770 --> 01:55.740 The HTMLInputElement is just an interface that provides special properties and methods for manipulating 31 01:55.740 --> 02:01.130 the options, layouts and presentation of, you guessed it, input elements. 32 02:01.140 --> 02:07.080 And in case you haven't done my DOM courses, what is this HTMLInputElement? 33 02:07.110 --> 02:08.280 Don't panic. 34 02:08.310 --> 02:10.320 It's just a Web API. 35 02:10.350 --> 02:17.130 So what actually happens is there are a large number of Web APIs available to us provided by the browser, 36 02:17.130 --> 02:23.010 and one of these is called the HTMLInputElement, and it's just loaded with a whole lot of properties 37 02:23.010 --> 02:25.080 and methods that we can use. 38 02:25.080 --> 02:30.060 And you typically use Web APIs with JavaScript, although you don't have to. 39 02:30.090 --> 02:33.580 Anyway, that's enough of a side tangent. 40 02:33.610 --> 02:35.500 Let's hop back into the lecture. 41 02:35.530 --> 02:35.920 Cool. 42 02:35.950 --> 02:36.850 Have you got it? 43 02:37.210 --> 02:38.130 Nice. 44 02:38.140 --> 02:47.260 So, we've seen that every input element is based on the HTMLInputElement interface. And since every 45 02:47.260 --> 02:53.920 input element, regardless of type, is based on this HTMLInputElement interface, technically they 46 02:53.920 --> 02:57.880 should share the exact same set of attributes. 47 02:58.090 --> 03:06.490 However, in reality, most attributes have an effect on only a specific subset of input types. 48 03:07.090 --> 03:13.990 In addition, the way some attributes impact an input, depends on the input type, impacting different 49 03:13.990 --> 03:16.870 input types in different ways. 50 03:16.900 --> 03:21.250 I just wanted to give you a quick, quick intro to the input element itself. 51 03:21.250 --> 03:28.270 Right now I want us to discuss the most important type, and that is "text" - the input of type text. 52 03:28.270 --> 03:31.060 So let's pick up in the next lecture.