WEBVTT 0 00:00.430 --> 00:06.070 As promised, let's get into an example, I'm going to be very quick, but it's going to just nail the 1 00:06.070 --> 00:10.300 point home. Let's create a simple, simple HTML document. 2 00:11.860 --> 00:17.710 Then here we have a <body>. In the <body>, we want a <form>, because our entire form always has to... 3 00:17.710 --> 00:23.290 be wrapped within this <form> element - always remember that. We don't need an action attribute because... 4 00:23.290 --> 00:25.460 we're just going to use a standard GET request here. 5 00:26.050 --> 00:28.540 We just want to look at how autocomplete works. 6 00:28.750 --> 00:30.180 And now I want to create some inputs. 7 00:30.880 --> 00:35.840 Usually when we code, you're going to want a <label>. It just makes the UI better. 8 00:36.730 --> 00:39.730 Let's call this "fname" and you guessed it... 9 00:39.760 --> 00:42.610 we're going to be asking for the user's first name. 10 00:43.670 --> 00:51.770 Then we want an input tag below it, of type text. The name attribute can be fname. And remember how important... 11 00:51.770 --> 00:57.010 that name is, basically allows browsers to identify what type of input we're asking for. 12 00:57.470 --> 01:02.320 And it's important because they can mean or to populate different fields. 13 01:02.630 --> 01:08.720 So that name attribute we've defined here is if name and I'm sure Google have a whole bunch of things 14 01:08.720 --> 01:16.220 to identify what is first name as it is its first name, is it first and the school name is it first. 15 01:16.220 --> 01:18.200 And the school begin to name. 16 01:18.530 --> 01:19.840 They've probably got a whole database. 17 01:20.240 --> 01:22.400 I'm just going Afnan pretty straightforward. 18 01:22.700 --> 01:24.460 Seen it a lot in the development industry. 19 01:25.070 --> 01:26.630 Now the ID has to match. 20 01:26.630 --> 01:29.660 What we have is the value on that label for attribution. 21 01:30.380 --> 01:30.750 Right. 22 01:30.980 --> 01:34.160 So we're just going to have Afnan now. 23 01:34.160 --> 01:40.670 I want to do the same thing here, but let's do an email and we won't even do Cicconetti because I just 24 01:40.670 --> 01:41.480 want to show you to. 25 01:42.350 --> 01:46.640 To we did send email, we've got input type of email. 26 01:48.400 --> 01:51.590 The name can be email, and it's pretty straightforward. 27 01:51.610 --> 01:57.160 Lastly, we can have a button of type submit, it cannot get much easier than this, can it? 28 01:57.430 --> 02:04.080 And if we go onto a lifesaver, the browser and they we go a pretty ugly looking form. 29 02:04.090 --> 02:05.970 But I want to illustrate something to you. 30 02:06.730 --> 02:08.670 First thing I want you to do is click on an input. 31 02:08.680 --> 02:10.600 Nothing happens if we type. 32 02:12.010 --> 02:17.050 And in the email, we type across at Gmail dot com because we know what you will touch. 33 02:17.060 --> 02:22.800 Gloves cross if we submit this and we refresh the page if I click on the input box. 34 02:24.940 --> 02:26.040 Autocomplete. 35 02:27.760 --> 02:33.400 Oh, you know what, I think it might be in your settings, in your browser, you've got to allow it. 36 02:34.490 --> 02:37.330 So in Chrome, if I just go to seatings. 37 02:38.870 --> 02:39.770 Autofill. 38 02:41.580 --> 02:47.250 Trace's and more eager to switch it on its cadets and network. 39 02:48.360 --> 02:54.440 Refresh, it's going now, Wally, email can be Groff's at Gmail. 40 02:55.680 --> 02:59.730 Let's put this refresh the page, click here. 41 02:59.900 --> 03:07.290 There you go, policies like it's pre populating inputs and if I click on email, it's actually got 42 03:07.290 --> 03:12.410 a whole bunch here that is auto completion at its finest. 43 03:12.420 --> 03:13.840 It's working, right. 44 03:13.860 --> 03:14.760 How cool is that? 45 03:14.760 --> 03:20.730 But what's even more cool is we can go here now and say, OK, well, let's not allow it for email. 46 03:21.060 --> 03:21.450 Right. 47 03:21.490 --> 03:28.710 So we can put the attribute on the email itself and say, no, we want that off our site while still 48 03:28.710 --> 03:29.430 showing up here. 49 03:29.730 --> 03:31.740 But those emails have now all disappeared. 50 03:32.010 --> 03:33.300 This will not alter. 51 03:34.530 --> 03:34.810 Awesome. 52 03:35.520 --> 03:43.920 The other thing, what we can do is on our main form, we can turn it off auto complete without our 53 03:43.920 --> 03:45.890 site, nothing to complete. 54 03:46.460 --> 03:51.180 It's very simple example, but you can see, you know, as developers, as authors, we have a lot of 55 03:51.180 --> 03:51.650 control. 56 03:51.660 --> 03:52.440 It's quite awesome. 57 03:52.440 --> 03:53.130 It's quite fun. 58 03:53.580 --> 03:58.980 And you can really give thought, a lot of thought to making this process so easy for use in some fields 59 03:58.980 --> 04:01.320 you don't want to complete on others. 60 04:01.320 --> 04:03.950 You do hope this is driving the point home. 61 04:04.290 --> 04:05.880 See you in the next lecture.