How exactly does the form action and target work?

[rocky_88]

I ran into this confusion while trying to write a script for uploading a file using AJAX which would work in IE8. Apparently there is a hack to achieve this which involves the usage of iframes.

 

What I've tried so far is submitting a form with just action attribute which redirects to another page.

<form method="post" action="test.php">
		<input type="text" name="name" />
		<input type="submit" name="send" value="Send" />
</form>

Even if I set the attribute to _self(default value), the page redirects to test.php and shows what ever is printed by the php script.

 

 

Now when I set the target to _blank, the page test.php opens in a new tab and shows what ever is printed by the php script.

<form method="post" action="test.php" target="_blank">
		<input type="text" name="name" />
		<input type="submit" name="send" value="Send" />
</form>

And if I set the target to an iframe name present in the same page, the php response is printed in the iframe(which is the hack to upload a file)

<form method="post" action="test.php" target="some_frame">
		<input type="text" name="name" />
		<input type="submit" name="send" value="Send" />
</form>
<iframe name="some_frame" />

So what I want to know is how does the action and target attribute work once the form is submitted? When the target attribute is set to _self, the page redirects and then prints(action first and then target), but if the target attribute is set to _blank, first a new tab is opened and then the response is printed(first the target and then action) and when the target attribute is set to a frame_name, it prints within the frame(does it load the response from the page into the frame?).

 

It would be really helpful if someone could assist me with a link or an explanation of the flow of a form submission, the order of execution of the action and target attributes and how do they work and in what order do they run.

[requinix]

The W3C has gone through great lengths to explain, in detail, exactly how processes like this work.

 

HTML 5 Form Submission

 

tl;dr: When submitting a form,

1. Browser does everything up to the actual navigation/request as normal

2. Uses the target to figure out where the request should be made

3. Makes the request (and handles the response, and so on) within that target

 

It's not "print within that target" or "load the response in that target". When the browser is ready to submit the form - that is to navigate, with or without a request body - it does so in that tab/window/frame.