I have an html page with the following code.
<form method="POST" action="https://formspree.io/email">
<input type="submit" value="SEND"/>
</form>
My browser does not include the referrer header field in the http request when a user submits the form. Why wouldn't it ?
I fixed this by adding <meta name="referrer" content="origin"> to the <head> section of my HTML page.
You are testing your site by opening it in a browser as a static HTML file in your computer's filesystem. In this case its URL will not start with http:// or https://. This will not work, because browsers don't treat these pages as normal web resources and thus they do not automatically send the "Referer" header when you submit a form. Formspree requires that header to work. This can be solved if you just open your HTML files as a web resource from a local web server. If you're on Mac or Linux, just type python -m SimpleHTTPServer 8000 or your HTML files directory and visit http://localhost:8000 on your browser. If you're on Windows, try installing one of the following super simple web servers: Web server for Chrome, thttpd or Quickshare.
You are using an old Safari version, Safari mobile or some other browser that is not recent Chrome, Firefox or Edge. In this case you could have been a victim of an old HSTS policy we had on Formspree that didn't allow sites to post content to non-https versions of Formspree. In this case please change your form's action= attribute to https://formspree.io/.
First use the atributtes that formspree specify:
<form action="https://formspree.io/your#email.com"
method="POST">
<input type="text" name="name">
<input type="email" name="_replyto">
<input type="submit" value="Send">
</form>
and second: maybe you tried the form before in another site (like formspree site), so you'll have to reset it in the formspree site and then try it directly in your site, so you will have to confirm again.
Hope it works for you...
As statosdotcom commented, the issue happened because I was opening my webpage locally.
Related
I want to use chrome extension to open a new window of outlook email which has a specific content and include attachments and all recipient email addresses, while I am logging in the outlook. Is it possible? Because I have no idea, how can I do that? Thanks very much.
No, it is not. To automate the desktop edition of Outlook you need to use the CO automation technology which is not supported in Chrome. You can automate the desktop editions of Outlook from Internet Explorer only. Other browsers are not aware of the COM automation technology (of course, on Windows only). If we speak about opening a web page with O365 mailbox - the best what you could do is to navigate to a specific URL.
As a possible workaround you may consider using the mailto protocol which allows to open a client's e-mail system and begins a new email message. For example:
<a href="mailto:user#example.com?
subject=MessageTitle&
body=Message Content">
Contact Us</a>
Or in the HTML form:
<form action="mailto:user#example.com" method="get">
<input name="subject" type="hidden" value="Message Title">
Feedback:<br/>
<textarea name=body cols="40">
Please share your thoughts here
and then choose Send Feedback.
</textarea>
<input type="submit" value="Send Feedback">
</form>
The Problem
I've built an HTML web form for the purpose of uploading files. When accessed from an iOS device, non-image files (.pdf, .docx, etc.) appear greyed-out when the "Browse" button is chosen to select a file from the iOS file explorer.
I have a fully-featured page (HTML, CSS, JS, PHP), but I've stripped the whole page down to the simplest form element to test functionality. Here's an example of code that does not work on my server (this is all that's in the HTML file besides the boilerplate tags), when viewed on a device running iOS 12.3:
<form action="" enctype="multipart/form-data" method="post">
<input type="file" accept="image/*, .heic, .hevc, .heif, .pdf, .png, .gif, .jpg, .jpeg, .doc, .docx, image/png, image/jpg, image/jpeg, image/gif, application/msword, application/pdf" multiple>
</form>
You can see a similarly simple working example of non-image files being selectable from an iOS device with one of the W3School's "Try It" editors:
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_file
What I've Tried
SSL (extended validation)
Apple technical support (referred to Apple Developer website after a couple hours on the phone)
Multiple browsers (iOS Safari, iOS Chrome, iOS Google App)
Multiple Apple devices (works on Mac, fails on iPhone and iPad)
Competitive platforms (works on Android)
iOS 13 beta (works)
The Question
Something is causing W3School's and other sites' servers to behave differently than mine when working with forms on iOS.
What is the factor on iOS that determines which sites/forms are able to select non-image files for an upload?
You must remove image/* and the other image/ file types.
<form action="" enctype="multipart/form-data" method="post">
<input type="file" accept=".heic, .hevc, .heif, .pdf, .png, .gif, .jpg, .jpeg, .doc, .docx, application/msword, application/pdf" multiple>
</form>
Here is a sample of your code with my corrections:
https://codepen.io/VladimirButakov/pen/XvXxGq?&editable=true
I made a web page that can get pdf files and send them to chats over a telegram bot.
I opened the web page from my Iphone and just selected a pdf and sended it and it worked just fine.
The code I used for the input file is the following.
<form action="inviapdf.php" enctype="multipart/form-data" method="post" class="inputfile">
<input accept=".png, .jpg, .jpeg" class="bott" type="file" name="pdf"/>
<button>SendPDF</button>
</form>
I have an Iphone 7+ with latest IOS release.
If I didn't answer your question can you be a bit more specific about it?
thanks
I'm trying to visualize form data in Chrome Debugger. Data are sent through a from which loads a file and sends some text. Something like this one:
<form action="url" enctype="multipart/form-data" method="post">
<input type="file" name="file"> <br>
<input type="text" name="some_text">
</form>
If I explore the headers of the POST request with dev tools, I do not see form data section but I just find:
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryXGBFWL5ab6g5XoFN
that, according to this post is a kind of separator used to segregate data. However, I do not see anything else about submitted data.
How can I see actual data about the filed some_text in Chrome Debugger.
I tested on my platform: Chrome 79.0.3945.130 (Official Build) (64-bit), Windows 10. I confirm that this problem remains on the up to date version of Chrome (as of 1/22/2020).
To be precise, the problem I found in Chrome 79.0.3945.130 (and Chromium Edge 79.0.309.68 as well) is as follows:
For a multipart/form-data POST request, if we don't specify any file to upload and hit the form submit button, we do see the "Form Data" section under Network tool's headers tab. The "Form Data" section lists all regular form fields, e.g., a form field <input type="text" name="title" value="hello Chrome"/> is shown in the following pic, and the file field shows nothing because I didn't upload any file.
For a multipart/form-data POST request, if we actually upload a file, regardless of its size (such as 0B), the entire "Form Data" section disappears, including regular form fields! See the following pic in which I collapsed all sections under Headers to demonstrate the point.
I agree it makes good sense to hide the file content for performance reasons as described in this question and this discussion, but it makes no sense to hide all regular form fields as well. I believe this is a Chrome bug.
In FireFox, we see all Form Data and uploaded file content under F12 dev tools > Network > Params. In the following example, I uploaded file.txt with the content: hello Firefox from file.txt.
So Firefox offers a temporary solution before Chrome addresses this issue.
The problem still exists with chrome versions 77 and 78. It is working with tools like Fiddler.
See the answers to this question: Should a "multipart/form-data" POST request actually contain a string with the data of an uploaded image?
They suggest to use Fiddler. Chrome developer tools do not show the data, because the developers chose not to for performance reason and acknowledge this is a limitation of current design.
See also this Chrome bug report.
Just looking at the Headers tab in the Network tab in chrome dev tools shows me the entered data (Chrome Version 73):
Keep in mind that in order for requests to show up in the Network tab you have to open the chrome devtools before the request happens.
I have a page in my web app, that page need to save some configurations , include different usernames and passwords. But browsers autofill fills usernames and passwords of this pages with saved Login credentials. autocomplete="off" doesnt seems to work in latest browsers. Is there any other options?
Do you insert autocomplete in the starting form tag?
<form .... autocomplete="off">
It works correct in our web app.
I have a basic form using <input type="file" multiple> to upload multiple files. It works fine when I'm developing (IIS Express) but when I publish the site to IIS, the multi-select only allows one file to be selected at a time. This behavior is consistent across all browsers and the page source at the browser is identical.
Is there a setting on IIS that could be causing this?
Here is the form code:
<form action="/Home/SubmitFiles" enctype="multipart/form-data" method="post" role="form">
<div class="form-group">
<label>Select one or more documents to convert:</label>
<input name="files" id="files" type="file" multiple>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Convert</button>
</div>
</form>
I have exactly the same problem. multiple is a html5 feature for input. After testing in IE10 with "IE7-Emulate" turned on, I've found an interesting thing: I turned proxy server off and multiple selecting suddenly start working with all browsers. First think was: "my proxy rewrites headers". I tried to modify popup page by adding . Multiselection started to work in IE10. There is no support for multiselection in IE7,8,9. If you want to use this versions of IE, you should try Flash or custom ActiveX controls.