Can I use HTML5 download attribute for HTML forms?

Question

HTML5 introduced a nice feature for marking <a> links as download endpoints, by simply adding download attribute to the <a> tag (see description).

Is it possible to do the same for HTML forms?

Here is a simple use case for example: I have a form that requests the user for some details, and after the user submits the form the server should return a file according to these details.

Not sure if it's quite to the point or not, but if the main thing you want is for the "submit" operation to **not** affect page state (i.e. not to trigger the start of a navigation to the download URL), you can target a `_blank` window/tab, or better, put a hidden iframe on your page and target that. (Of course this doesn't "mark" the form as a download endpoint to the programmer or to CSS via [download], as you might wish). — Doin, May 05 '20 at 16:43

score 4 · Accepted Answer · answered Sep 30 '14 at 08:04

4

This is not possible. According to the specification is the "download" attribute only specified for a and area.

http://www.w3.org/html/wg/drafts/html/master/links.html#downloading-resources

answered Sep 30 '14 at 08:04

yncyrydybyl

56
2

@StijnBernards: Why add code if there is no code involved? His answer is 'not possible'. What code did you want to see? – Patrick Hofman Sep 30 '14 at 08:15

score 1 · Answer 2 · edited Dec 11 '21 at 03:04

1

No, form doesn't have a download attribute, so it is not possible to have that exact behavior with a form.

You can set the output file name through a post though, by setting the Content-Disposition HTTP header:

Content-Disposition: attachment; filename="yourPicture.png"

edited Dec 11 '21 at 03:04

ZachB

13,051
4
61
89

answered Sep 30 '14 at 07:57

Patrick Hofman

153,850
22
249
325

@gamliela: Need more help? – Patrick Hofman Sep 30 '14 at 10:14
1

Thank you for your answer, I'm aware to `Content-Disposition` header. My question was specific about HTML forms. – gamliela Sep 30 '14 at 10:20
That was the first sentence of my answer, right? I just don't like not giving options, and the `Content-Disposition` is the closest you get to the second part of the specs. – Patrick Hofman Sep 30 '14 at 10:21
It’s not quite the same thing though. The more useful aspect of `download` is that it doesn’t cause all running AJAX requests to be cancelled and put the page in a weird state. A closer usable-now alternative I think would be something like [FileSaver.js](https://github.com/eligrey/FileSaver.js). – binki Jan 14 '19 at 22:23
1

@binki You could avoid changing page state by using `
` (which does temporarily create a new browser tab when submitted), or better, `
` targetting a hidden iframe on your page named "myHiddenIFrame" (which gets around the new-tab creation problem). As long as you're *certain* the response will be a file to save and not a HTML page, this'll basically give you the same functionality as (the hypothetical) `
` with no filename specified would (though I admit it's kinda clumsy).
– Doin May 05 '20 at 16:31

score -1 · Answer 3 · answered Sep 30 '14 at 08:04

Yes after submitting data you can return file in form of pdf or else. By using header function

<?php
//create pdf with details
.....
.
.
// We'll be outputting a PDF
header('Content-type: application/pdf');

// It will be called downloaded.pdf
header('Content-Disposition: attachment; filename="downloaded.pdf"');
?>

But this is not possible using download attribute

Can I use HTML5 download attribute for HTML forms?

3 Answers3

Linked