Man ...
we've been having a lot of fun,
haven't we?
And I just, you know, we've finished pretty much on the <form> element itself.
I know.
I know you don't believe me, right?
But it's true.
It's true.
We've done a lot.
We've looked at a ton of attributes just on the <form> element itself.
We haven't even started talking about how to build forms.
We've just spoken about the <form> wrapper.
And it's not just theory.
This is really practical stuff.
And I just want to show you here, if we look at Mailchimp and look at their form. I just want to show
you their form.
Let's go "Sign Up Free".
It's a very cool, intuitive form
um, because they've got, you know, all these, you know, frontside checks in place, you know, for
the password, for example, one lower character, one uppercase, one number, one special character,
and then eight characters in minimum.
And then it gives you nice visual representations of when you've passed the password test, a very cool
intuitive form, very simple to understand.
And this is what I like with sites,
you know, I want it to be easy.
You don't want the user to battle.
Let's inspect how they built this form though.
Let's see what they did, just so you can kind of see, you know, some of the attributes that they used.
Let's click on email and let's just work our way up to the <form>.
Here we go.
So here's the <form>, right?
We can see it's wrapped.
Look at this.
It's super, super cool ðŸ˜Ž.
Trying to zoom in too much.
That's why.
Look at that.
Isn't this cool?
So the first thing I want you to see is that the entire form is wrapped within a <form>.
Okay?
I'm not making these things up.
Here's the <form> tag.
You can see those three little dots "..." and then the closing form tag </form> just tells you everything is wrapped
within this <form> tag.
That's how we build forms.
And then I don't even want to examine inside, right?
I don't want to examine all these input types and the fieldsets, etc
we're going to get into that later in the course.
But I want you to look at the attributes.
Okay.
Let's look at the first attribute, "action".
Well, we've already discussed action at length.
It tells the browser WHERE to send the form data
when the user clicks submit.
Here, it's going to a URL called "/signup/post".
Pretty straightforward.
We've got method.
The default is GET. Here,
it's set to POST.
You know, as soon as you're dealing with passwords, you don't really want to be sending these kind
of things in a GET request, do you?
It's not safe.
That's why they've set the method to POST. No ways,
look at that.
novalidate
novalidate, my dear students. Just when you were wondering when would I ever use a novalidate ðŸ¤” ...
well, here is a very good example because we saw there's so much of their own validation logic they're
using,
they don't want the browser to get involved.
So there you go.
They've used the novalidate attribute.
They've assigned it to the value of novalidate.
But actually they don't even need to do that, because that novalidate is just a binary value -
it's either there or it's not.
What else have they got?
Okay.
And then they've just got ID, class and putting in data for CSS and all that kind of stuff.
So that's more for styling purposes.
We don't have to worry about that.
But I just wanted to show you a very practical example of, you know, a form that I think is very simple
and intuitive to use and how they built it.
You know, these are attributes we've literally been discussing in the course.
It's very practical.
This is a huge, successful company.
This is a website where they've paid millions to developers to develop and you can see that they are
using the same attributes we're talking about.
It's super, super practical! Enough blibber-blabber
Clyde, we've spoken about the <form>.
I want to now get into some of the widgets.
I want to talk about URL encoding.
I'm just, I'm just super, super excited.
So I'm going to go grab a coffee â˜• and then let's continue.
See you now.