Let's start by looking at the input type of password.
Firstly, the password attribute is also a text input field, and it's one of the original input types
introduced by the HTML specification.
It's been around for a very, very long time. And it's very similar to using other input text fields.
So don't fool yourself.
There are no constraints and no security benefits by having the password attribute.
What do I mean by no constraints?
Well, it doesn't add any special constraints to the entered text.
All it does is obscures the value entered into the form with dots or asterisks, so it can't easily
be read by others.
Actually, it also does prevent users from copying the text to a clipboard.
So in that sense, maybe I shouldn't be saying no constraints, I should say "not many" constraints because
the user can still type whatever they want into that password field.
Secondly, it provides us with no added security.
Keep in mind the password type is just a user interface.
So unless you submit your form securely, it will get sent in plain text.
And this is bad for security for obvious reasons, right?
A malicious party could interpret your data, steal passwords, credit card details or whatever else
a user has submitted.
But this doesn't render this type useless.
We can use it and we do use it as developers.
So I want to show you two examples.
And in example number one, I want to make use of HTML5's placeholder attribute, and I want it to be
the most simple use of the password attribute.
Let's have a look.
Example number one - the most simple case -
let's create a very, very simple form.
And we're going to use this password attributes. Form.
We don't need an action.
And the default method you already know is set to GET.
And let's wrap, often what I do,
I'll wrap form controls within a paragraph. So, username, and let's give an input
of type text. The name can be user,
or we could have said username, it doesn't really matter. And I want a placeholder here.
Placeholder can be "Login username".
Very straightforward.
If we save this, go to our browser.
Refresh.
There we go.
Username: Login username.
Let's go back to our text editor.
And now I want to do the password.
Okay.
Password:
input. But now I want its type set to password.
This is the first time we've done this.
How cool.
The name submitting to the server,
let's just say is "password".
We don't need an ID here.
Let's have a placeholder.
We can just say "Choose a strong
password."
Right.
And then finally, we just need a submit button.
So let's have another paragraph, [with] input of type submit.
This is another type, right?
And we haven't spoken about it yet in detail.
So for now, just just take it on as face value.
So there we go.
Let's save this.
Go to our browser and there we go.
Okay, we've got a Username, Password and Send. But now, let's type username of Wally.
Choose a strong password.
Let me choose a strong password.
You'll never, never guess it.
Okay.
There we go.
Now I'm going to submit it.
And you're never going to guess my password.
What ðŸ˜±?
(sound: uh oh)
Can you see the GET request?
Can you see the URL?
"thisIsACoolCourse".
That was my password.
No ways.
Now I'm really, really exposed.
So can you see that the password doesn't give us much security at all?
It's just a UI feature.
So there you go.
Told you it's not that great, right?
And it doesn't help with security.
You can see the actual password in the URL bar itself.
So then let's move on to example number two.
And in example number two, I want to look at two HTML5 attributes, the "pattern" and "required" attributes.
They normally work very well together and their importance becomes evident when the author needs to
set rules about the format and type of data that can be inserted into an input control.
So what are these two types?
What does pattern and required mean?
The pattern attribute allows us to use regular expressions to define what the user is supposed to enter
into the field.
And when we use the pattern attribute, we usually also use another one called Title.
The title attribute takes particular relevance when we use this, because its responsibility is to provide
an explanation about the rules that apply on the field.
In other words, the browser is going to use the information in the title attribute to compose the error
message shown to a user after an unsuccessful submission.
The required attribute is pretty straightforward, pretty intuitive.
It just disallows users to leave the field empty.
So by using both attributes together means that the form submission will be prevented until their requirements
have been met, or the requirements of that form control has been met.
Super, super useful.
But I know, words are just words.
Let me hop over to the text editor and show you an example of using both of these.