Welcome back, my dear students, and here we're looking at a newspaper .... not quite, but I've named this
newspaper "target" because we're looking at the target attribute. "target, target, read all about
it". 🤣
We got to have fun.
We got to have fun in these things.
This is what life is about, enjoying what we do.
Anyway, there are 2 things I want to talk about with target: (1) what is it and (2) what values can it take.
Because, a lot of people get overwhelmed.
They don't fully understand what all the different values mean.
So firstly, what is the target attribute?
What is it all about?
Well, it's pretty simple.
This attribute is used to specify in which browsing context, the new tab, the current window, a certain
iframe, for example, you would like to show the response from the remote server.
In other words, we're specifying where we would like to show the response from the server after submitting
a form.
Is that making sense?
In other words, the target attribute needs to specify a name or keyword that tells the browser where
to display the response that is received after the user submits the form.
Whew!
OK, where can we put this attribute?
Well, as you know, we can put the attribute on the form element itself in the opening tag.
It's just another attribute of a form,
right?
But there are other places we can put it. We can put it on other inputs, other form widgets via the ...
formtarget attribute.
What is this formtarget attribute?
Don't get overwhelmed.
We just don't call it "target".
We call it "formtarget".
That's the name of the attribute.
And when you have this on a form control, it overrides the target that you've placed on the form itself
right, in the opening tag.
It's almost like cascading style rules.
What's found later down takes precedence of what you've kind of defined above.
The most common types of inputs you're going to be putting this on, are input types with "submit", and buttons.
And as I mentioned, if there is a conflict, and by conflict I mean what the target attribute is on
the form itself...
versus what you put on these input types, then these will take precedence.
That will override the target attribute on the form itself.
But you already know this.
Next, I want to just quickly discuss whether this attribute is deprecated.
I just mean, is this target attribute still valid?
The reason for a lot of this confusion is that it was deprecated in previous versions of HTML.
But the good news is that it has been reinstated in HTML5 and it's often useful when we work with
the iframe element. Okay, and don't get overwhelmed.
I'm going to show you an example of using iframe's in a second.
So there we go.
That is the target attribute on the form - it just defines where we want the response to be shown.
Next, I want to look at what values it can take. So then, let's look at values themselves. There are 5
values. You can see they are _blank, _parent, _self, _top and _framename. But what do they all mean?
I'm going to go over these very quickly because in my mind, showing you an example is a much better
way to understand what these different values mean.
But let's look at _blank.
"_blank" is a very common one.
This just returns the data in a new tab, in a new window.
And you may be thinking, that's really cool, but like it or not, this is a change of default behavior.
Links opening within the same page is the default behavior.
And I'm going to show you now that just means that target is set to _self...
okay, that's the default.
And perhaps you've developed a personal taste for opening all of your links in new windows or tabs.
And that's wonderful for you.
But it's safe to assume that most users are comfortable with the default behavior and much less comfortable
with a developer forcing a different behavior.
So I try and avoid _blank whenever I can.
It's also worth noting that users can force a link to open a new window,
right.
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.
What I'm trying to say is it means that both behaviors are available to them for links.
And if the user wants to open a new tab in a new link, they can.
But I never like forcing a user to do so.
OK, so that's the _blank.
Then we've got this _parent. It's pretty straightforward.
It just returns the data in the parent page, or the parent frame or iframe of the forms frame itself.
I know that sounds confusing.
I'm going to show you an example shortly.
Next, we've got _self, which I've already mentioned when we were speaking about _blank, and this is
the default behavior. It just returns the data in the same iframe thats containing the form itself, in
the same page. Easy peasy lemon 🍋🍋 squeezy.
And finally, we've got _top. _top just returns the data in the top most context.
This means the results will open in the entire window, not just one small iframe, for example.
But again, I'm going to be showing you an example shortly.
And then we've got this _framename. _framename returns data in the named iframe.
It's kind of a custom name.
You can call it whatever you want, and it just opens it up in that same frame.
You just need to obviously make sure that the value of the attribute matches the name attribute of the
iframe, whatever you've called that iframe.
For example, if you've called the iframe my_iframe you might want to do your target attribute like
this.
"target='my_iframe'".
Whew. I'm sorry I keep talking about iframes now.
You know, I haven't even introduced you to an iframe and what it is. This course isn't about iframes.
I'm going to be showing you an example though, in the next lecture
where I will be using iframes, and then I will use these various attributes so you can kind of get a feel
for what they do, so it'l become more clear then.
That is the target attribute in a nutshell.
It just gives you more control of where you want the server response to be shown.
And we often use a targeted attribute when we're dealing with iframes.
If you're not dealing with iframes, really, you don't have to use it.
The default is that _self, which opens the page in the context that's containing the form.
So that's just the default behavior.
That's what we all use.
But enough said, let's look at an example.