I am super amped about this lecture because now we're going to be getting into relatively advanced concepts.
It's not hard code, but it's just the concepts around why we use one element over another,
because having a form with lots of input boxes and checkboxes and radio boxes and ranges, it's great.
But how does the user submit all the information?
Well, that's where we need some type of submit button, right?
And this lecture involves four steps and I want to go through each step individually because each step
will build on from each other.
So let's start off right at the beginning.
Why does the input element need to have the ability to create buttons?
Well, the answer I'm sure is obvious.
How does the user submit all the form information without one?
You might be thinking, "Well, Clyde, if they own a laptop, they can hit the enter key." And you are
100% correct.
Let me show you.
Here we go.
We've got a very simple HTML form.
All I've done is I've got an input of type text and that's it.
That's all I've got.
I haven't even got a submit button.
And if we go to the browser, this is what it looks like.
Here we go, a simple input box and it's very simple.
Let's type "wally".
And now if I hit enter on the keyboard because I'm on a PC, the form does submit.
You can see there in the URL, we've got our variable name and we've got the value of "wally", so we
don't even need a submit button.
Why even have one?
Well, before I jump ahead of myself, let's jump back into the lecture.
So there you go.
We can just use the enter key, but I'm sure you agree with me this is not enough.
We need a more functional, more formal way for users to submit their forms.
So that's step one.
Step one is we need to have the ability for a user to submit a form other than just hitting enter [return] on
their keyboard,
right?
We've established that that's the most simple.
Let's move on to the next step of this lecture, and that is how do we then add a button to a form?
As developers, we have a lot of flexibility, and there's not just one way to add a button to a form.
We have two main ways, and the two main ways are using the button element, and the other way is to use
an input element.
And both of these types, whether we use button or input, they behave the same way and they accept
three types of attributes: (1) the submit attribute, (2) the reset attribute and (3) the button attribute.
Now, instead of coding each one up and showing you, I've put it here in the slides so we can go through
them one by one.
So let's first look at this submit button. A submit button,
and by submit button, I mean when it's type attribute is set to submit, this is what we're talking
about.
And the submit type is the default value for the button.
And it sends the form's data to the URL specified by the action attribute in the form element itself.
It makes sense.
And how does this look?
Well, let's first look at the button element.
We set its type attribute to submit.
Here's an example of code.
What do you notice with that?
Well, I'm sure you might have picked up that we're adding HTML rich content within the button element
itself, so we can do cool things like bold text.
So the result of this button is going to look like this with the word cool being bold.
Isn't that pretty cool.
Wow, that's cool, man (swoosh sound)
So that's the button where its type is set to submit.
And as I mentioned, this is the default.
Well, what does the input look like?
Again, we're setting its type attribute to submit.
But look at this.
We've got a value attribute, and in there we can't perform rich formatting.
We can't insert HTML.
So the button in this case is going to look like this, but it's not going to be as cool because that
cool is not bolded.
Got it.
Let's move on.
So that's the submit button.
That's the default.
But we've also got this reset button, and I've mentioned it in previous lectures.
This just resets all of the form widgets to their default values.
And from a UX point of view, this is considered bad practice.
Why?
Well, the user may click it by mistake, right?
So we should avoid using this type of button unless you really have a good reason to include one.
And if you really want to use a reset button, just make sure you style the button very carefully and
even give the user a modal pop up asking if they are sure they want to reset the entire form.
But enough said on that.
How does it look like?
Well, let's first look at the button element.
We setting its type attribute to reset.
It's not submit anymore, it's "reset".
So we can do something like this.
And again, you'll notice that we can perform rich formatting.
We can bold the word unfortunate, for example.
So that's what it looks like.
Nothing surprising there, is there?
And if we look at the input element, we set its type to reset again. We put its content inside the
value attribute.
And here we cannot insert HTML.
So we just get a boring old button - very similar to what we saw previously, right, in terms of design.
And now let's look at the final attribute.
We can have a button attribute.
What?
This is weird.
So we have a button with a button attribute.
What does it do?
Well ...
a click on a button does nothing.
Rah, rah, rah.
Nothing at all.
And this may sound silly
my dear students, but it's actually amazingly useful for building custom buttons because you can define
the chosen functionality with JavaScript.
Anyway, let's see what it looks like
again ... button,
and here are we setting its type to button.
Here we go,
similar example to all the others.
And as you can see, we can add HTML within the button.
We can perform rich formatting.
If we look at now the input we set its type to button, it's pretty much the same as all the other examples
we've seen.
It's just a boring, plain old button.
So there we go.
Let's just take a step back.
Remember, there are two ways we can add buttons to our form.
We can use the button element or the input element.
And both of these accept three types of attributes which we've just looked at - submit, reset and button.
So there you go,
the two ways to create a button.
And before we move on, I just want to drive the point home 🏠 ... button elements let you use HTML in the
content.
Remember, we added the strong element inputs.
On the other hand, they [inputs] are empty.
We use the value attribute and we have to insert a string.
But you already know this, so let's move on.
That was step two of this lecture.
Now I want to move on to step 3.
(background music plays)