Now that we learned about
all those important HTML input elements,
and now that we also added
more HTML elements
to structure our form,
I wanna dive into one element again,
which we already did add before.
And that's the button.
The button, when placed inside of a form,
submits that form.
That is what you learned before
and what you saw in action.
If I press this button down there,
the form is submitted.
And then it depends on the attributes set
on the form element,
action and method,
how the form is submitted.
But we can ignore that for now,
we're going to dive into that later again,
once we also explore server-size development.
And once we also write code that handles
this form submission on a server.
But let's have a look at this button again.
This default behavior,
which I described that the buttons submits the form
when placed inside of a form can be overwritten.
Now, in most cases you want buttons to submit the form,
but you could also add a button
which should do something else.
For example, with help of JavaScript,
which we are going to explore very soon in the course.
And you can control the behavior of the button
with the type attribute then.
Just as a side note,
because it is worth mentioning it,
you can use buttons outside of forms as well.
You don't have to use them in forms.
It's just that inside of a form,
they have this default behavior of submitting the form.
Outside of a form,
you will always have to use JavaScript to do anything
when a button is clicked.
You have to write your own logic with JavaScript.
But we are going to explore that later.
Inside of a form,
if you wanna overwrite the default behavior,
you can do it as with the type attribute.
And here, the type by default is submit.
So you don't have to set this,
though, you can set it to be more explicit.
But you could also set this to type button.
And the difference is that if you do set it to type button,
the button will not submit the form.
We can tell the difference.
For example, if I enter Max here into the email field,
which is an invalid email address,
you might remember that in the past,
we got to this warning from the browser then.
Now, if I press submit,
we don't get a warning because the form wasn't submitted.
We can also tell by the fact that I'm entering something
here in the name field.
Before when I clicked submit,
this field was cleared
when the form was submitted.
Now, if I click Submit, nothing happens,
again, because the form isn't submitted.
If I clear all that stuff here in the URL,
so that we just visit our domain slash nothing
or slash index HTML.
If I do that and I enter something here,
then if I click submit,
you see the URL does not change as it did before.
Because when we use type button on a button,
this button will not submit the form.
And of course here, that's not what I want.
Hence, I'll set it back to type submit.
But we can also add a second button now,
which we use to reset the form or clear the form.
And we can achieve this by using yet another type,
the type reset.
If we use this type,
then the button does what the name implies
when placed inside of a form,
this button with type reset,
will reset that form.
It will clear that form.
So here, if I enter Max here,
if I click this clear button now,
then you see the form is not submitted.
We have no content in the URL,
but still this first field is empty again
because of the reset button.
We can also see this if I check
the "Agree to terms" check box,
if I click Clear, it's unchecked again.
And that's of course a useful behavior.
I will get rid of that button here
because we don't need it here,
but sometimes you want such a clear button,
such a reset mechanism,
and then you can achieve it with a button of type reset.