This is just something I coded up that I think is pretty cool.
It just drives the point home.
It's like hitting the nail on the coffin.
And it would be really cool if you tried to do this yourself.
But let me explain what I did first.
I've got a heading:
"Defining the type in buttons is important".
That's the heading at the top.
Then I've got kind-of two sections, two main sections.
The one is a form and can you see I've used the fieldset element to create that cool dotted pink border.
And yes, I use the legend to give it a heading:
"This is a cool form".
So I've used fieldset.
I've used legend.
You've seen these all before.
And I wrapped this entire block within a form. And you can see I've got an input there.
It's actually just of type text, and then I've included different buttons at the bottom just with different
stylings and more importantly, different types.
I've got submit, I've got button, I've got reset, and then I just didn't define a type.
I just left it blank.
In other words, it's got no type.
So that's the one block.
Then I did the same buttons, but I did it outside of a form.
I just wanted to prove to you that when it's outside of form, the types do nothing.
They only work,
they are only relevant when it comes to forms.
And what do I want to show you here?
Well, every time a submit event is fired on the form, I want to change the background color,
okay.
For all other purposes, I want nothing else to happen.
So let's see this in action.
If a user clicks a button with type submit in a form, what's going to happen?
100 percent correct.
A submit event is going to get fired, and every time the user clicks this button, the background color
is going to change.
How awesome.
The next type is type "button", and remember what this does?
It's kind of silly in one way, because it does nothing, right?
If the user clicks it, it does nothing.
And this means the background color won't change because no submit event has been fired.
But just because it does nothing doesn't mean it's useless.
As I mentioned, we often use JavaScript to customize what action we want to take place, so it does
have its place.
Next, we've got type "reset". And if we just click type reset now, we know the submit event doesn't get
fired.
But that's why I wanted this input here, because I wanted to show you if the user types in their name,
Wally, for example, hits type reset all form widgets will get reset to their default values.
So that's all the type of reset does.
It doesn't submit the form.
And then finally, we've got nothing.
If we don't specify any type, what happens?
Well, if you've been paying attention, you'll remember that the default type is submit.
So if we specify nothing, we would expect a submit event to still be fired because it's the same as
type being set to submit. The user clicks that there we go.
We get different background colors.
How cool.
Okay, so that's the first thing I wanted to show you.
Now, if we have the exact same buttons, but outside of a form, nothing happens.
These buttons are useless.
They only work inside of a form.
In fact, if we type Wally here and click on type reset out the form, nothing happens.
It doesn't reset.
So all these attributes only work inside of forms.
That's an important point.
But anyway, this was kind of a cool little example that I loved coding up.
I'll provide the code for you that you can download and go through it, but try and do it yourself.
You know, it's a lot of fun doing these things.
You can see how much power you have just with plain CSS, HTML and a bit of JavaScript.
That really, really is cool.
And you know, just in case you're wondering how I set it up, I'll just briefly go over it in like 30s.
So here we go.
Here's my file.
We've got an HTML file, right?
No dir.
And then I just reference this buttons.css file, and that just contains all my CSS so I won't get
into that, but it's pretty straightforward stuff.
Then I've got our heading in its own div wrapper.
Okay.
That's that top heading.
Defining the type in buttons is important.
Let's just refresh this.
There's our default styling. So that first section is in a wrapper, and so are the bottom three sections.
If we go to our code, we've got another div of class wrapper ... another div class of wrapper ...
and yes, the final section is in its own div class of wrapper.
And the reason I did that was we putting this cool little funky border with some box shadows there in
each section.
So it just makes it easy to style.
So that's what I did.
Of course, the first wrapper we put within this form element, right, with all those buttons.
In a form element.
The next set of buttons are not in the form element.
We've got a fieldset, we've got a legend, but it's not wrapped within a form.
And then finally, we've got this paragraph at the bottom.
But more importantly, we've got this JavaScript and it's a very, very simple script.
All we do is we grab our forms and it's very easy to grab our form.
We've only got one form on the page, so all we need to do is look at our DOM.
In other words, we grab the document. On there, we can look for a property called "forms" which returns
a collection to us.
And we just want the first form
there is, in fact the only form there is, which is why we have zero.
Okay, then we want to add an event listener called submit.
And the first thing we want to do is we want to use the JavaScript's preventDefault() method because
the default is for the browser to refresh the page.
We don't want that to happen.
Okay, so the first thing is we prevent the default and then we execute a function called change background,
or
changeBg(), and that's very, very simple.
All we do is we execute a function where we're using Math.random numbers to generate a hexadecimal
value, which HTML uses to determine a color.
Very, very simple.
In fact, I can even console this, let's just console log this random hex value out, and you can see it.
Let's go to our browser,
inspect the page, go to the console, click on submit, and there is the hex value.
And each hex value is corresponding to an HTML color.
So that's all we're doing there.
Very, very simple.
And that's, that's about it
my dear students, very high level.
I will provide this code for you, play around with it.
But before you do, try and recreate it, you really will learn the most that way.
Hope you're having fun and I'll see you shortly.