As promised, let's get into an example, I'm going to be very quick, but it's going to just nail the
point home. Let's create a simple, simple HTML document.
Then here we have a <body>. In the <body>, we want a <form>, because our entire form always has to...
be wrapped within this <form> element - always remember that. We don't need an action attribute because...
we're just going to use a standard GET request here.
We just want to look at how autocomplete works.
And now I want to create some inputs.
Usually when we code, you're going to want a <label>. It just makes the UI better.
Let's call this "fname" and you guessed it...
we're going to be asking for the user's first name.
Then we want an input tag below it, of type text. The name attribute can be fname. And remember how important...
that name is, basically allows browsers to identify what type of input we're asking for.
And it's important because they can mean or to populate different fields.
So that name attribute we've defined here is if name and I'm sure Google have a whole bunch of things
to identify what is first name as it is its first name, is it first and the school name is it first.
And the school begin to name.
They've probably got a whole database.
I'm just going Afnan pretty straightforward.
Seen it a lot in the development industry.
Now the ID has to match.
What we have is the value on that label for attribution.
Right.
So we're just going to have Afnan now.
I want to do the same thing here, but let's do an email and we won't even do Cicconetti because I just
want to show you to.
To we did send email, we've got input type of email.
The name can be email, and it's pretty straightforward.
Lastly, we can have a button of type submit, it cannot get much easier than this, can it?
And if we go onto a lifesaver, the browser and they we go a pretty ugly looking form.
But I want to illustrate something to you.
First thing I want you to do is click on an input.
Nothing happens if we type.
And in the email, we type across at Gmail dot com because we know what you will touch.
Gloves cross if we submit this and we refresh the page if I click on the input box.
Autocomplete.
Oh, you know what, I think it might be in your settings, in your browser, you've got to allow it.
So in Chrome, if I just go to seatings.
Autofill.
Trace's and more eager to switch it on its cadets and network.
Refresh, it's going now, Wally, email can be Groff's at Gmail.
Let's put this refresh the page, click here.
There you go, policies like it's pre populating inputs and if I click on email, it's actually got
a whole bunch here that is auto completion at its finest.
It's working, right.
How cool is that?
But what's even more cool is we can go here now and say, OK, well, let's not allow it for email.
Right.
So we can put the attribute on the email itself and say, no, we want that off our site while still
showing up here.
But those emails have now all disappeared.
This will not alter.
Awesome.
The other thing, what we can do is on our main form, we can turn it off auto complete without our
site, nothing to complete.
It's very simple example, but you can see, you know, as developers, as authors, we have a lot of
control.
It's quite awesome.
It's quite fun.
And you can really give thought, a lot of thought to making this process so easy for use in some fields
you don't want to complete on others.
You do hope this is driving the point home.
See you in the next lecture.