Whoo!
I'm super, super excited because now we're getting into inputs.
And this, my dear students, is one of the most, if not the most powerful HTML element there is, just because
of the plethora of different things we can do with it.
To put it simply, how an input works depends on the value of its type attribute.
Hence, we're going to be discussing the plethora of different types in a lot of detail in this course.
What about if a type is not specified?
Well, then the default type of "text" is adopted.
Now, because this is such a powerful element.
I want to discuss where it's from.
Let me show you now, quickly.
All right.
Very quickly, let me show you where this input is from.
Firstly, let's define a variable called input.
And all I want to do here is I want to create an element, not create attribute, createElement.
And the element I want to create is an input element.
I'm just here in a normal browser console, by the way.
I've created that input, and all I want to do now is I don't want to console.dir() it out,
okay.
If I do this directly, and we open up this input, there's going to be a ton of properties and methods.
Actually, you know what?
I could just do this, and scroll all the way to the bottom.
But it's that __proto__ that I'm interested in.
I want to know where it's from.
So instead of doing all of this and scrolling down and seeing all the properties and methods, I could
just console
dir out the input, but I want to look specifically at its __proto__.
I want to see where its inherited all its properties and methods from. And its immediate prototype is
this HTMLInputElement ðŸ˜±.
And don't panic.
The HTMLInputElement is just an interface that provides special properties and methods for manipulating
the options, layouts and presentation of, you guessed it, input elements.
And in case you haven't done my DOM courses, what is this HTMLInputElement?
Don't panic.
It's just a Web API.
So what actually happens is there are a large number of Web APIs available to us provided by the browser,
and one of these is called the HTMLInputElement, and it's just loaded with a whole lot of properties
and methods that we can use.
And you typically use Web APIs with JavaScript, although you don't have to.
Anyway, that's enough of a side tangent.
Let's hop back into the lecture.
Cool.
Have you got it?
Nice.
So, we've seen that every input element is based on the HTMLInputElement interface. And since every
input element, regardless of type, is based on this HTMLInputElement interface, technically they
should share the exact same set of attributes.
However, in reality, most attributes have an effect on only a specific subset of input types.
In addition, the way some attributes impact an input, depends on the input type, impacting different
input types in different ways.
I just wanted to give you a quick, quick intro to the input element itself.
Right now I want us to discuss the most important type, and that is "text" - the input of type text.
So let's pick up in the next lecture.