I have a xhtml page with transitional doctype having a checkbox that I want to be unchecked after loading. No JavaScript! In Firefox 3.5 (for instance, there may be other browsers) user can check input, than reload page and get input checked. How can I overcome this behaviour?
Use
autocomplete="off"
Also have a look at Why does the checkbox stay checked when reloading the page?
You can't do much to change a document's state with HTML alone. All you can do is set checked="checked" or not.
You need either JavaScript or a server side language to determine whether that attribute should be set or not.
You can't, not without JavaScript. This is Firefox specific behaviour which would occur even if you could explicitly force an "unchecked" state (which you can't, because the absence of checked already means that.)
The only non-Javascript way that I know of is to rename the form element on server-side on every request so FF has no chance of storing the value.
To explicitly set the checkbox to unchecked, the following worked for me:
<input type="checkbox" unchecked>
Try to put in your code this:
<p><label><input id="test" type="checkbox"></input>Test checkbox</label></p>
It will be unchecked when the page starts or refreshes.
Related
I have problem with <input type="file" /> in Chrome - it does not show the textbox near the 'browse' button. What is a best way to show a standard file input (textbox+button) in Chrome?
This is the default behavior of Google chrome as well as Safari. Read this blog for a solution
The box is there, although it is not designed.
It might be on the "wrong" side of the window, but it's there.
Just for the matter - put a border around it - and you'll see it's there.
<input type="file" style="border: solid 1px red">
Also, after you select a file - you get the name of it.
<input type="file"/> has different visual appearance depending on the browser. On some browsers it is a text field with a button in others its just a button. Since the element isn't very styleable there isn't much you can do about it.
If you really want a file upload to look/behave different from the default implementation flash is the way to go.
For example many sites use sfwUpload. For full styleing freedom, you can make it invisible and place it on top of a html button via positioning.
Another way to work with the file upload inputs are to make them invisible via visibility: hidden, position them on top of other elements and thus forgo the use of flash, but the implementations are rarely very nice, so i wouldn't recommend it.
The file input element is styled differently depending on your browser (and probably OS - I've only ever used Windows). If you look at the same page with a file input element in FF, IE and Chrome, it will appear differently in each browser.
Why do you need to display the textbox anyway? In FF and IE you can't type directly into it anyway, so the only usage would be to display the filepath of the selected file; which Chrome already does for you, just not in a box.
I found a link from someone else who was having this problem, solution here.
It doesn't specifically mention chrome, but safari does the same thing apparently. (The link was an accepted answer posted in a chrome discussion)
edit: wow, second time this morning that I've been out googled by another member! at least questions are getting answered!
You could override the default behaviour and swap the control appearence alltogether. Found this today researching how to edit the css on fileupload.
Most of the times type file got display:none style. In that case use !important to display the input field.
<input id="cv_file" type="file" name="cv" style="display:block !important;"/>
Sometimes it is just caused by a javascript code similar to this one:
function someOnClickHandler(e)
{
e.preventDefault(); // it kills the file dialog
}
// somewhere:
$('.some-selector-which-contains-the-file-elem').on('click', someOnClickHandler);
Is it possible to set the default input focus on an HTML form without using JavaScript, for example:
<html>
<form>
Input 1: <input type="text" name="textbox1"/>
<br/>
Input 2: <input type="text" name="textbox2"/>
</form>
</html>
I want to set the default focus to either of the text-boxes when the form loads without using JavaScript (as I want the behaviour to occur when a user has js disabled).
You can do it in HTML5, but otherwise, you must use JavaScript.
HTML5 allows you to add autofocus to your form element, eg:
<input type="text" name="myInput" autofocus />
This does work in browsers which support HTML5 (Or rather, browsers which support this particular part of HTML5) but as you know, not everybody can use it yet.
Something to be aware of ... if you set a focused form element, then anyone using Assisted Technology (AT) like a screen reader will need to back up to see menus and any other content that is before the focused field.
A preferred method, in my opinion , is to not set focus to any field, except a skip-link if its available. That gives them the option to skip into the pages content or read the page from the top down.
As others have said, without Javascript you can't guarantee a default field. An alternative option you might want to try, if you have multiple fields that a user might want to access is using the accesskey attribute. This will essentially mean a user can return to either of the fields instantly later during browsing, which may come in handy for users of screen readers, etc...
Wikipedias article on this subject is quite useful - http://en.wikipedia.org/wiki/Access_key
This is not possible without some form of scripting. Even Google's home page requires Javascript to focus the search field.
You might be able to use the tabindex attribute and use the lowest value on the default textbox though. Check here for browser support:
http://reference.sitepoint.com/html/object/tabindex#compatibilitysection
The site suggests that
(in almost all other cases—namely form controls and links—the tabindex has excellent support)
When using the xhtml1-transitional.dtd doctype, collecting a credit card number with the following HTML
<input type="text" id="cardNumber" name="cardNumber" autocomplete='off'/>
will flag a warning on the W3C validator:
there is no attribute "autocomplete".
Is there a standards-compliant way to disable browser auto-complete on sensitive fields in a form?
Here is a good article from the MDC which explains the problems (and solutions) to form autocompletion.
Microsoft has published something similar here, as well.
To be honest, if this is something important to your users, 'breaking' standards in this way seems appropriate. For example, Amazon uses the 'autocomplete' attribute quite a bit, and it seems to work well.
If you want to remove the warning entirely, you can use JavaScript to apply the attribute to browsers that support it (IE and Firefox are the important browsers) using someForm.setAttribute( "autocomplete", "off" ); someFormElm.setAttribute( "autocomplete", "off" );
Finally, if your site is using HTTPS, IE automatically turns off autocompletion (as do some other browsers, as far as I know).
Update
As this answer still gets quite a few upvotes, I just wanted to point out that in HTML5, you can use the 'autocomplete' attribute on your form element. See the documentation on W3C for it.
I would be very surprised if W3C would have proposed a way that would work with (X)HTML4. The autocomplete feature is entirely browser-based, and was introduced during the last years (well after the HTML4 standard was written).
Wouldn't be surprised if HTML5 would have one, though.
Edit: As I thought, HTML5 does have that feature. To define your page as HTML5, use the following doctype (i.e: put this as the very first text in your source code). Note that not all browsers support this standard, as it's still in draft-form.
<!DOCTYPE html>
HTML 4: No
HTML 5: Yes
The autocomplete attribute is an enumerated attribute. The attribute
has two states. The on keyword maps to the on state, and the off
keyword maps to the off state. The attribute may also be omitted. The
missing value default is the on state. The off state indicates that by
default, form controls in the form will have their autofill field name
set to off; the on state indicates that by default, form controls in
the form will have their autofill field name set to "on".
Reference: W3
No, but browser auto-complete is often triggered by the field having the same name attribute as fields that were previously filled out. If you could rig up a clever way to have a randomized field name, autocomplete wouldn't be able to pull any previously entered values for the field.
If you were to give an input field a name like "email_<?= randomNumber() ?>", and then have the script that receives this data loop through the POST or GET variables looking for something matching the pattern "email_[some number]", you could pull this off, and this would have (practically) guaranteed success, regardless of browser.
No, a good article is here in Mozila Wiki.
I would continue to use the invalid attribute. I think this is where pragmatism should win over validating.
How about setting it with JavaScript?
var e = document.getElementById('cardNumber');
e.autocomplete = 'off'; // Maybe should be false
It's not perfect, but your HTML will be valid.
I suggest catching all 4 types of input:
$('form,input,select,textarea').attr("autocomplete", "off");
Reference:
http://www.w3.org/Submission/web-forms2/#the-autocomplete
http://dev.w3.org/html5/markup/input.html
If you use jQuery, you can do something like that :
$(document).ready(function(){$("input.autocompleteOff").attr("autocomplete","off");});
and use the autocompleteOff class where you want :
<input type="text" name="fieldName" id="fieldId" class="firstCSSClass otherCSSClass autocompleteOff" />
If you want ALL your input to be autocomplete=off, you can simply use that :
$(document).ready(function(){$("input").attr("autocomplete","off");});
Another way - which will also help with security is to call the input box something different every time you display it: just like a captha. That way, the session can read the one-time only input and Auto-Complete has nothing to go on.
Just a point regarding rmeador's question of whether you should be interfering with the browser experience: We develop Contact Management & CRM systems, and when you are typing other people's data into a form you don't want it constantly suggesting your own details.
This works for our needs, but then we have the luxury of telling users to get a decent browser:)
autocomplete='off'
autocomplete="off" this should fix the issue for all modern browsers.
<form name="form1" id="form1" method="post" autocomplete="off"
action="http://www.example.com/form.cgi">
[...]
</form>
In current versions of Gecko browsers, the autocomplete attribute works perfectly. For earlier versions, going back to Netscape 6.2, it worked with the exception for forms with "Address" and "Name"
Update
In some cases, the browser will keep suggesting autocompletion values even if the autocomplete attribute is set to off. This unexpected behavior can be quite puzzling for developers. The trick to really forcing the no-autocompletion is to assign a random string to the attribute, for example:
autocomplete="nope"
Since this random value is not a valid one, the browser will give up.
Documetation
Using a random 'name' attribute works for me.
I reset the name attribute when sending the form so you can still access it by name when the form is sent. (using the id attribute to store the name)
Note that there's some confusion about location of the autocomplete attribute. It can be applied either to the whole FORM tag or to individual INPUT tags, and this wasn't really standardized before HTML5 (that explicitly allows both locations). Older docs most notably this Mozilla article only mentions FORM tag. At the same time some security scanners will only look for autocomplete in INPUT tag and complain if it's missing (even if it is in the parent FORM). A more detailed analysis of this mess is posted here: Confusion over AUTOCOMPLETE=OFF attributes in HTML forms.
Not ideal, but you could change the id and name of the textbox each time you render it - you'd have to track it server side too so you could get the data out.
Not sure if this will work or not, was just a thought.
I think there's a simpler way.
Create a hidden input with a random name (via javascript) and set the username to that. Repeat with the password. This way your backend script knows exactly what the appropriate field name is, while keeping autocomplete in the dark.
I'm probably wrong, but it's just an idea.
if (document.getElementsByTagName) {
var inputElements = document.getElementsByTagName("input");
for (i=0; inputElements[i]; i++) {
if (inputElements[i].className && (inputElements[i].className.indexOf("disableAutoComplete") != -1)) {
inputElements[i].setAttribute("autocomplete","off");
}
}
}
I MADE THIS WORK IN 2020!
I basically create a css class that applies -webkit-text-security to my inputs.
Here's the link to a more recent discussion:
https://stackoverflow.com/a/64471795/8754782
This solution works with me:
$('form,input,select,textarea').attr("autocomplete", "nope");
if you want use autofill in this region: add autocomplete="false" in element
ex:
<input id="search" name="search" type="text" placeholder="Name or Code" autcomplete="false">
Valid autocomplete off
<script type="text/javascript">
/* <![CDATA[ */
document.write('<input type="text" id="cardNumber" name="cardNumber" autocom'+'plete="off"/>');
/* ]]> */
</script>
I'm reloading a web page that has the following code:
<label for="showimage">Show Image</label>
<input id="showimage" name="showimage" type="checkbox" value="1" />
Even though the HTML stays sent to the browser is the same for each reload of the page, the checkbox always takes on the checked value when a reload was performed. In other words, if the user checks the checkbox and reloads, the checkbox is still checked.
Is there some caching going on here?
Edit: I tried Gordon Bell's solution below and find that this is still happening even after removing the value="1". Anything else I might be missing?
<label for="showimage">Show Image</label>
<input id="showimage" name="showimage" type="checkbox" />
Add autocomplete="off" into the form element on the page. The downside is that this isn't valid XHTML, but it fixes the issue without any convoluted javascript.
Yes, I believe it is caching. I see this behaviour on Firefox for example (not Safari, for what that's worth :) ).
you can reload the page and bypass the cache (on Firefox) using CTRL-SHIFT-R and you'll see the check value doesn't carry (a normal CTRL-R will grab the info from the cache however)
edit: I was able to disable this server side on Firefox, setting a cache control header:
Cache-Control: no-store
this seems to disable the "remember form values" feature of Firefox
set autocomplete="off" with js is also working well.
for example using jquery:
$(":checkbox").attr("autocomplete", "off");
This is an old question but still an active issue for firefox. None of the responses i tried solved it, but what did solve it for me was simply this:
document.getElementById('formId').reset();
This simply resets the form to the default options every time the page loads. Not ideal since you lose granular control, but its the only thing that solved this for me.
It is a nice feature of Firefox: if you type something but reload the page, the text remains in the text area. Idem for other settings you have chosen.
Alas, it doesn't work in SO (probably reset by JS) and dumber browsers like IE...
Which suggest a solution: if you really need to do that, reset the form with JS. form.reset() might do the job (acts like the Reset input button).
or instead of f5 press enter on address bar :)
It could be due to a browser caching - very useful for static web sites that are not changed too often, very bad for dynamic web applications.
Try with those two meta tags in the head section of the page. Second meta tag is for older browsers (IE5) that are not recognizing "no-cache" meta tag and although different produces the same result: Each request goes to the server.
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
$("#showimage").prop("checked",false);
the public idea to solve that
make form & reset button
<form>
<checkbox>
<reset>
</form>
$(reset).trigger("click");//to clear the cache and input
$(checkbox).trigger("click");//to mark checkbox
When a user hits Refresh on their browser, it reloads the page but keeps the contents of form fields. While I can see this being a useful default, it can be annoying on some dynamic pages, leading to a broken user experience.
Is there a way, in HTTP headers or equivalents, to change this behaviour?
<input autocomplete="off">
This should do the trick:
<body onload="document.FormName.reset();">
Replace FormName with the name of your form and then all the fields will be reset when the user clicks refresh in his browser.
Or if you only want to reset some fields, add this to the bottom of your page:
<script type="text/javascript">
document.getElementById('field1').value ='';
document.getElementById('field2').value ='';
document.getElementById('field3').value ='';
</script>
That will reset the fields every time a user enters the page, including refreshes
Add the autocomplete attribute set to "off" to the inputs you don't want to be refreshed.
For instance:
<input type="text" name="pin" autocomplete="off" />
see
the W3C reference
although not mentioned in the reference, it works also with checkboxes, at least on firefox.
You could call the reset() method of the forms object from the body load event of your html document to clear the forms.
h1. References
MSDN reset Method - http://msdn.microsoft.com/en-us/library/ms536721(VS.85).aspx
Mozilla developer center form.reset
I wonder, if you set the page not to be cached through meta tags, will that fix the problem? http://lists.evolt.org/archive/Week-of-Mon-20030106/131984.html If it does, it'll have the benefit of working on browser's with Javascript disabled.
The data on forms are not part of w3c specification. It's a browser feature to make your life easy. So, if you don't want to keep the data after reloads, you can set all form's values to null after loading it, as Espo said.
Even if the page is not cached, it will display the data on the form, because the data aren't part of the page's html code.
You can try this too (don't know if it will work):
<input type="text" name="foo" value="">