As we mentioned in the previous lecture, we need to start now talking about form attributes. And do you...
know what an attribute is? It's very simple.
It's just extra functionality we can give to our element.
So form attributes are just extra functionality we can give to our forms, straight out of the box.
The important point to note is that all HTML elements, including forms, can have attributes and attributes...
are always specified in the opening tag.
Why?
I don't know.
That's just the way the Web and HTML has been designed.
Now, the important point I want to get across is that the browser recognizes standard attributes and...
it creates DOM properties automatically when it sees those attributes.
Man, that is a bit of a mouthful.
What does it mean and why do we even care about what the attributes are for a certain element?
Well, that is a great question.
Let's hop over to the coding editor and let me show you why it's so important.
So here we go, I've got the IDE on the left, I've got our browser on the right, and I'm running Live
Server, so we can see things in real time.
Remember what I just said?
That the browser recognizes standard attributes and automatically creates properties for them.
This makes understanding attributes very important for developers, because not only will we be able...
to add extra functionality to our forms, but will also be able to access information on the fly as...
most of these attributes become properties of our object, our form object for example.
So this is what I want you to remember.
When the browser parses your HTML to create DOM objects, it recognizes standard attributes and it creates...
DOM properties from them.
This means when an element has an ID or another standard attribute, the corresponding property gets created.
But this doesn't happen if the attribute is non-standard, and this is why it's so important for us...
to learn about attributes.
Let me show you what I mean.
So let's just create a very simple <body> element that we all know.
What I want to do, is I want to add a well-known attribute called "id".
If you know of any HTML, you'll be very familiar with this attribute.
And this ID is a standard attribute.
It's not something I've created.
So far, so good, right?
So you'd expect if we now include JavaScript on our page, if we want to alert, say this body.id...
it should work.
So let me hit save here.
Why is it not working? Let's refresh there.
Oh, I just needed to refresh the browser.
There we go...
it's given us an alert ðŸ“£, and its given us the value of that ID attribute, which we've named...
standardAttribute.
This is created automatically by the browser on the fly.
How cool.
But say now, we don't have a standard attribute. Say now, we created an attribute called "random" and we...
gave that a value of "non-standard".
What's going to happen now? Well now, when we go and try and access this random attribute...
let me click save, it's going to give us "undefined".
(sound effect: uh-oh, stinky) And this is the point that I'm trying to make - the browser will not create a property, automatically.
In fact, it is and can still be found in the DOM. Let me show you.
But it's just not a direct property.
So if we now go into to console...
and of course, as I just mentioned to you, we can access our body.id automatically, and that's what...
we gave it.
We cannot do the same with that random attribute, right?
We get undefined, pretty straightforward.
You can see it, though, if we console.dir() out the body...
sorry...
it's going to be a document, of course, document.body.
By the way, if you're wondering what console.dir() is, you should really check out my JavaScript Complete...
Grandmaster â™Ÿ Course.
It really goes into detail about how JavaScript works. "console.dir()" just gives us a kind-of JSON...
like format representation of an object, not the HTML itself.
So let's open up this object...
let's scroll down.
There should be something saying attributes.
There we go.
And if we open up that attribute, we can see we've got two - the "id" and "random". But it is not automatically...
a property of our object.
So it's just harder for us to access. Whew,
this was a very long, roundabout way of saying it's so important to know what are the standard attributes...
associated with elements in our code.
Let's jump back into the lecture.
Can you begin to see how important attributes are? I hope that's starting to make sense...
and I hope you start appreciating the fact now, why we need to learn about what the standard attributes...
are for elements, specifically the form element.
So, as a very quick recap...
remember, a form is nothing else but an HTML element. We type it out.
We have all the widgets in the middle, and of course we have to have a closing tag on that form.
There's nothing special about it.
It's just another HTML element.
So for now, let's ignore all the form widgets and the closing tag.
Let's remove that and let's just look at this opening form tag. And remember what we said,
attributes have to be inserted in the opening tag, and each attribute can be assigned a value.
You know this already. And we've mentioned the fact that there are quite a lot of different attributes...
available to the form.
And there are so many might even feel like your mind is going to explode ðŸ¤¯.
Don't worry. Because the form element is so important...
I want to take time to understand what each attribute means, and why they can be so useful.
So without further ado, let's start specifically targeting each attribute and digging into more detail.
I can't wait.