html - Disable browsers Form inputs prefill/autofill feature when hitting "back" button

Question

I want to "prevent browsers from prefilling form inputs when hitting the "back" button". Indeed, I want the initial values to be filled in (added via jsp), not the browser's (cached) values.

Solution 1: I found out that this can be done by disabling the browser caching for the current page. This seems a rather extreme solution considering that I "only" want to disable this prefill feature for a "form" (hence disable caching for the form only, not the whole page).

Solution 2: Then, the obvious next solution is to use javascript: that is, store the initial value in a data-* attribute, then, on page load, replace the input value by the initial value if they differ.

Both solutions seem rather unperfect (these are rather work arounds) I turn to you guys hoping to hear of a better one.

Resources:

• How does SO's form remember previous input values?
• Disable Firefox's Auto-fill
• Pressing back prefills inputs with value from right before submit
• HTML form values and 'Back' button

Answer 1

The first thing that comes to my mind is to use a <input type="reset"> button. These aren't seen often nowadays because the user rarely actually wants to reset the form, but here it might just be what you need.

You could also do it in javascript on page load with form.reset(); instead of providing a button for the user.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement.reset

This is similar to your solution 2 and thus still a workaround of the browser behavior, but it is a(n old) part of standard forms and I think it'll do the trick with very little additional code (no need for data-* attributes), so wanted to throw it out there.