And step three is all about attributes, because with the arrival of HTML5, several new attributes
have been added to buttons.
What attributes specifically?
Well, we've got formaction, formenctype, formmethod, formnovalidate, and
formtarget.
And these attributes define and override certain parameters pertaining how the form must be submitted.
So these new attributes can be used, for example, to provide more than one submit button in a form
and make each of them perform a different type of submission.
How cool.
Let me actually stop and show you an example.
I want to look at a very cool example of using one of the newer HTML5 attributes, and that is
formnovalidate.
We have discussed this in, I think, one of the lectures a while back.
I can remember talking about it, but I want to show you how we can use different submit buttons in
a form that perform different things.
Let me show you.
So here, let's just have a form and we don't need an action.
Let's just do a target for fun because we know how they are used, right?
And we can set this to _blank, meaning that a new blank window will open when the response is returned
to us.
Here we go.
Let's start building our form.
And as you know, a lot of my examples, I just wrap each form widgets in a paragraph.
So here, let's ask for username information and all I want is a input type of text.
Very, very simple.
We can say it's [name attribute] is username, we don't need an ID, but what I do want to do, is I want to create a pattern
here.
And remember the value of the pattern attribute is a regular expression.
We've done this before and they look kind of funky, right?
So here I just want to specify that the user has to start off with a character, and the username I want
to have as a minimum three characters and maximum 15.
Very, very simple.
And if there's an error, let's just customize the error message.
A proper username must begin with a letter and be
between 3 and 15 characters long.
There you go.
And to finish it off, let's make this a required attribute.
So let's go to the browser.
Let's open this up with live server.
Here we go.
If we just try and submit this by hitting the return or enter key, we won't be allowed to do so.
If the user just types two characters, we won't be allowed to do so.
But if we do three, hit enter, the form will submit and open in a new blank page.
(sound effect: congratulations)
Pretty intuitive.
Let's just clear this.
Let's go back to our code and let's continue.
So that's the username.
The only other thing I want to do here is I want another form widget, but here let's do password, input of
type ...
you guessed it, password. Name can be password.
We don't need an ID and let's just put another pattern for the sake of it.
Why not?
Here we can just say, well, okay, we need letters big or small, and we can have numbers 0 to 9.
Okay?
And again, let's just say it needs to consist between 3 and 15 characters
long.
Very, very simple.
We can add title here.
I don't want to spend time on this, "password needs to be between 3 and 15 characters long". And of course
let's set required on here.
So there we go.
We've got our username, we've got password.
The final thing I want to do is I want to have submit buttons on here.
Let's do another paragraph.
Let's do input of type submit.
Its value can be Send, but I want another one.
I want another one.
Input type submit, value can be "Send without
validating
username or password". And this is where I want to use the
formnovalidate attribute.
Right.
And there's another attribute we should use here, and that is formmethod.
I want this to be submitted as a GET request.
Okay.
So it's quite cool.
We can literally specify how we want the form data to be submitted with different buttons.
How awesome.
So here we are defining,
we want no validation and we're going to specify the type as GET.
So if we go here, refresh, there are our buttons. And let's try to do this right.
So if a username has two characters and we try and send, we'll be blocked from doing so.
Same with password, we'll be blocked from doing so.
But if we now click the second button, right, without validating username or password, we click that
and ... boom ðŸ’¥ ... it allows us to do so.
So there was a really cool example - you can have different functionality with different buttons
in a form
by using these cool, funky new attributes.
So there we go.
Cool, cool example, wasn't it?
But as they say, all good things come to an end and we are at the final step of this lecture and that
is to quickly summarize the difference between using the submit type for button and input, because
as developers we have a choice.
So which should we use?
Well, firstly, both cause the forms data to be submitted to the server,
right?
We've seen that.
But there are very important differences.
And in fact, developers prefer to use the button in most cases.
And here's why.
Firstly, the button can have content, whereas the input cannot.
It's a null element.
While the button text of an input can be specified,
you cannot add markup to the text or insert a picture, for example.
So a button has a wider array of display options.
It makes sense.
Secondly, the button is more explicit and it's more readable.
Input suggests that the control is editable,
right?
It's kind of weird using an input for a button, and in that sense, using button is far more explicit
in terms of the purpose it serves.
Thirdly, the button is easier to style in CSS.
In fact, Firefox has a bug.
You can't set the line height of an input based button.
Thus it doesn't match other buttons in Firefox.
That's just one example
by the way.
And fourthly, the button is markup friendly.
We can nest items, for example, icons inside of a button.
You cannot do this with an input.
And for all these reasons, most people, including myself, prefer to use a button when we go to submit
a form.
Whew.
What a lecture.
I told you this was going to be an awesome, awesome lecture.
And it's quite interesting content, isn't it?
You're learning a lot.
But anyway, let me not harp on this because I'm so excited about this.
Let's continue.
We've got a lot more to learn.
See you in the next lecture.