Why use autocomplete with radio buttons?

Question

I am going through the bootstrap 4 documentation. What purpose does it do to set the autocomplete tag to off? Is this something needed for bootstrap, or is it just good practice?

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" autocomplete="off" 
checked> Active
  </label>
</div>

Denominate

Possible duplicate of HTML refuses to check radio button by default? – Inconstant

I have three answers, sort of. The duplicate question suggests that autocomplete works with radio buttons, and @Daemonleak states that it isn't. It suggests that it is good practice to turn it off, just in case, but are radio buttons affected? – Denominate

The duplicate question suggests that autocomplete not only works with radio buttons, but also brings unwanted effects... – Inconstant

Answer 1

Unlike other browsers, Firefox by default persists the dynamic checked state of an <input> across page loads. Use the autocomplete attribute to control this feature.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio

Shipping

Answer 2

Radio inputs are not compatible with autocomplete. However, it doesn’t hurt anything to have it there. It’s up to you if you want to keep it.

Adjudge

Answer 3

The docs are confused on this. The link posted by @dontangg states autocomplete is used on radio buttons by Firefox, but the main doc page for the <input> element type explicitly says the opposite:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autocomplete

It probably doesn't hurt to include it but to me it doesn't make much sense for it to do anything on radio buttons.

Jermayne

Though developer.mozilla.org/en-US/docs/Web/HTML/Attributes/… suggests Firefox might actually use it even for attributes that normally wouldn't. – Jermayne

Answer 4

It's about the browser stage.

<script type="text/javascript">
function fnPickedFlow(){
    return #('input[name=pickedFlow]:checked').val();
}

$( document ).ready(function() {
    console.log( "pickedFlow:" + fnPickedFlow() );
    // The first time return "one"
    // The second time return "two"
});
</script>

<input type="radio" name="pickedFlow" value="one" checked/>
<input type="radio" name="pickedFlow" value="two" />

The first time when page loads, Radio button one is selected by default. When changing the selection to two and submitting, the redirection happens. And user click browser back button (javascript:history.back()) to come back to this page, pickedFlow is pointing to one but the selected button in UI is two.

Change code add autocomplete off for each of radio button to avoid the situation:

<script type="text/javascript">
function fnPickedFlow(){
    return #('input[name=pickedFlow]:checked').val();
}

$( document ).ready(function() {
    console.log( "pickedFlow:" + fnPickedFlow() );
    // Always return "one"
});
</script>

<input type="radio" name="pickedFlow" value="one" autocomplete="off" checked/>
<input type="radio" name="pickedFlow" value="two" autocomplete="off" />

Also see: https://forum.vuejs.org/t/radio-button-retains-old-state-on-browser-back-button/97417

Hallelujah