WEBVTT 0 00:00.300 --> 00:06.960 Welcome back, my dear students, and here we're looking at a newspaper .... not quite, but I've named this 1 00:06.960 --> 00:13.230 newspaper "target" because we're looking at the target attribute. "target, target, read all about 2 00:13.230 --> 00:13.440 it". 🤣 3 00:14.520 --> 00:15.420 We got to have fun. 4 00:15.420 --> 00:16.920 We got to have fun in these things. 5 00:17.040 --> 00:19.460 This is what life is about, enjoying what we do. 6 00:19.960 --> 00:24.780 Anyway, there are 2 things I want to talk about with target: (1) what is it and (2) what values can it take. 7 00:25.170 --> 00:26.880 Because, a lot of people get overwhelmed. 8 00:26.880 --> 00:29.280 They don't fully understand what all the different values mean. 9 00:29.490 --> 00:32.750 So firstly, what is the target attribute? 10 00:32.850 --> 00:33.960 What is it all about? 11 00:35.240 --> 00:36.860 Well, it's pretty simple. 12 00:37.680 --> 00:44.880 This attribute is used to specify in which browsing context, the new tab, the current window, a certain 13 00:44.880 --> 00:49.970 iframe, for example, you would like to show the response from the remote server. 14 00:50.520 --> 00:57.420 In other words, we're specifying where we would like to show the response from the server after submitting 15 00:57.420 --> 00:57.840 a form. 16 00:58.710 --> 00:59.810 Is that making sense? 17 01:00.240 --> 01:07.410 In other words, the target attribute needs to specify a name or keyword that tells the browser where 18 01:07.410 --> 01:11.600 to display the response that is received after the user submits the form. 19 01:12.720 --> 01:13.030 Whew! 20 01:13.440 --> 01:15.810 OK, where can we put this attribute? 21 01:16.590 --> 01:22.340 Well, as you know, we can put the attribute on the form element itself in the opening tag. 22 01:23.070 --> 01:25.270 It's just another attribute of a form, 23 01:25.390 --> 01:25.750 right? 24 01:25.980 --> 01:32.850 But there are other places we can put it. We can put it on other inputs, other form widgets via the ... 25 01:33.030 --> 01:34.310 formtarget attribute. 26 01:34.470 --> 01:35.880 What is this formtarget attribute? 27 01:35.890 --> 01:36.780 Don't get overwhelmed. 28 01:36.780 --> 01:38.180 We just don't call it "target". 29 01:38.190 --> 01:39.660 We call it "formtarget". 30 01:39.660 --> 01:40.860 That's the name of the attribute. 31 01:40.860 --> 01:49.590 And when you have this on a form control, it overrides the target that you've placed on the form itself 32 01:49.740 --> 01:51.030 right, in the opening tag. 33 01:51.330 --> 01:53.280 It's almost like cascading style rules. 34 01:53.280 --> 01:57.240 What's found later down takes precedence of what you've kind of defined above. 35 01:57.540 --> 02:03.840 The most common types of inputs you're going to be putting this on, are input types with "submit", and buttons. 36 02:04.140 --> 02:09.210 And as I mentioned, if there is a conflict, and by conflict I mean what the target attribute is on 37 02:09.210 --> 02:10.320 the form itself... 38 02:10.740 --> 02:15.240 versus what you put on these input types, then these will take precedence. 39 02:15.240 --> 02:18.420 That will override the target attribute on the form itself. 40 02:18.720 --> 02:19.850 But you already know this. 41 02:20.730 --> 02:26.100 Next, I want to just quickly discuss whether this attribute is deprecated. 42 02:27.330 --> 02:30.090 I just mean, is this target attribute still valid? 43 02:30.810 --> 02:38.100 The reason for a lot of this confusion is that it was deprecated in previous versions of HTML. 44 02:38.760 --> 02:46.080 But the good news is that it has been reinstated in HTML5 and it's often useful when we work with 45 02:46.080 --> 02:49.830 the iframe element. Okay, and don't get overwhelmed. 46 02:49.830 --> 02:52.680 I'm going to show you an example of using iframe's in a second. 47 02:54.380 --> 02:55.050 So there we go. 48 02:55.070 --> 03:01.130 That is the target attribute on the form - it just defines where we want the response to be shown. 49 03:02.300 --> 03:10.570 Next, I want to look at what values it can take. So then, let's look at values themselves. There are 5 50 03:10.580 --> 03:15.260 values. You can see they are _blank, _parent, _self, _top and _framename. But what do they all mean? 51 03:15.380 --> 03:20.210 I'm going to go over these very quickly because in my mind, showing you an example is a much better 52 03:20.210 --> 03:22.190 way to understand what these different values mean. 53 03:22.680 --> 03:23.780 But let's look at _blank. 54 03:24.170 --> 03:25.460 "_blank" is a very common one. 55 03:26.240 --> 03:29.980 This just returns the data in a new tab, in a new window. 56 03:30.140 --> 03:36.320 And you may be thinking, that's really cool, but like it or not, this is a change of default behavior. 57 03:37.010 --> 03:40.270 Links opening within the same page is the default behavior. 58 03:40.520 --> 03:43.990 And I'm going to show you now that just means that target is set to _self... 59 03:44.030 --> 03:45.290 okay, that's the default. 60 03:45.470 --> 03:49.940 And perhaps you've developed a personal taste for opening all of your links in new windows or tabs. 61 03:50.210 --> 03:51.410 And that's wonderful for you. 62 03:51.410 --> 03:58.370 But it's safe to assume that most users are comfortable with the default behavior and much less comfortable 63 03:58.640 --> 04:02.210 with a developer forcing a different behavior. 64 04:02.270 --> 04:05.090 So I try and avoid _blank whenever I can. 65 04:05.540 --> 04:09.330 It's also worth noting that users can force a link to open a new window, 66 04:09.350 --> 04:09.720 right. 67 04:09.740 --> 04:16.720 I often use control on my PC and I click on a link and that does open a new tab. So I can do that anyway. 68 04:16.940 --> 04:21.050 What I'm trying to say is it means that both behaviors are available to them for links. 69 04:21.350 --> 04:24.500 And if the user wants to open a new tab in a new link, they can. 70 04:24.830 --> 04:27.480 But I never like forcing a user to do so. 71 04:27.920 --> 04:29.060 OK, so that's the _blank. 72 04:30.150 --> 04:33.130 Then we've got this _parent. It's pretty straightforward. 73 04:33.510 --> 04:39.840 It just returns the data in the parent page, or the parent frame or iframe of the forms frame itself. 74 04:40.080 --> 04:41.340 I know that sounds confusing. 75 04:41.870 --> 04:44.430 I'm going to show you an example shortly. 76 04:46.010 --> 04:49.940 Next, we've got _self, which I've already mentioned when we were speaking about _blank, and this is 77 04:49.940 --> 04:56.120 the default behavior. It just returns the data in the same iframe thats containing the form itself, in 78 04:56.120 --> 04:59.210 the same page. Easy peasy lemon 🍋🍋 squeezy. 79 04:59.510 --> 05:05.150 And finally, we've got _top. _top just returns the data in the top most context. 80 05:06.080 --> 05:12.560 This means the results will open in the entire window, not just one small iframe, for example. 81 05:12.860 --> 05:15.140 But again, I'm going to be showing you an example shortly. 82 05:16.150 --> 05:21.570 And then we've got this _framename. _framename returns data in the named iframe. 83 05:21.820 --> 05:23.170 It's kind of a custom name. 84 05:23.180 --> 05:26.880 You can call it whatever you want, and it just opens it up in that same frame. 85 05:27.190 --> 05:31.420 You just need to obviously make sure that the value of the attribute matches the name attribute of the 86 05:31.420 --> 05:33.630 iframe, whatever you've called that iframe. 87 05:33.940 --> 05:39.490 For example, if you've called the iframe my_iframe you might want to do your target attribute like 88 05:39.490 --> 05:39.790 this. 89 05:40.150 --> 05:42.700 "target='my_iframe'". 90 05:42.700 --> 05:44.800 Whew. I'm sorry I keep talking about iframes now. 91 05:44.800 --> 05:50.320 You know, I haven't even introduced you to an iframe and what it is. This course isn't about iframes. 92 05:50.320 --> 05:53.800 I'm going to be showing you an example though, in the next lecture 93 05:53.980 --> 05:58.720 where I will be using iframes, and then I will use these various attributes so you can kind of get a feel 94 05:58.720 --> 06:02.800 for what they do, so it'l become more clear then. 95 06:02.800 --> 06:05.020 That is the target attribute in a nutshell. 96 06:05.440 --> 06:09.970 It just gives you more control of where you want the server response to be shown. 97 06:10.150 --> 06:13.120 And we often use a targeted attribute when we're dealing with iframes. 98 06:13.120 --> 06:17.300 If you're not dealing with iframes, really, you don't have to use it. 99 06:17.800 --> 06:24.160 The default is that _self, which opens the page in the context that's containing the form. 100 06:24.280 --> 06:25.450 So that's just the default behavior. 101 06:25.450 --> 06:26.300 That's what we all use. 102 06:26.770 --> 06:29.350 But enough said, let's look at an example.