avoid predictive text in html form

You can review a response that I previously gave that resolves part of your problem (at least the autocomplete) by going to the following link: Prevent Chrome autocomplete form, it does not work autocomplete=" off "in input

I briefly explain what was discussed in the link. Even though there is an HTML property called autocomplete which is responsible for checking if you can (directly translating from English) autocomplete a certain HTML element or not all browsers support this feature at least not with the default configuration of "autocomplete = off" it is necessary to carry out an additional process that I will explain later in this same answer.

In your code segment I see that you try to generate a "patch" to avoid the autocompletion of your input rut or dni, however, such a patch only works by placing the autocomplete=off before < strong> input to which you want to override the autocomplete. In your case, it would be like this:

<input style="display:none" type="text" name="parche" autocomplete="off" />
<input type="text" id="username" name="username" class="required rut" placeholder="Rut" maxlength="12" onkeypress="return numbersonly(this, event)" autocomplete="off" required/>

  

The detail of this approach (according to my experience) is that for each   input that you do not want to autocomplete you must generate another extra   before him, that is, for each autocomplete=off two inputs   they will be associated.

A solution that avoids the duplicity of the inputs is what I propose in the answer that I appended to the principle and adapting it to your code would be as follows:

<input type="text" id="username" name="username" class="required rut" placeholder="Rut" maxlength="12" onkeypress="return numbersonly(this, event)" autocomplete="ÑÖcompletes"  required/>  

The idea is to place in the property autocomplete a word that no user would enter or search in this way when the user tries to find any other word that does not match the autocomplete and both the autocomplete will not be shown in the input (which is exactly what you need as you pose). This is necessary because browsers such as Chrome have not optimized the use of this tag. You could say that it is a kind of bug that Chrome has. If you want to read about this Chrome problem and more information about the autocomplete visit the answer I left at the beginning So I avoid duplicating the links unnecessarily in this answer.

Then your complete code with the modification so that it does not autocomplete:

<form  method="POST" target="_top" id="login"   action="">
 <input id="style" autocomplete="off" name="style" value="" type="hidden">
			  <input id="origin" name="origin" value="" type="hidden">
 			  <input id="redirect_uri" name="redirect_uri" value="" type="hidden">
			  <input id="idrequest" name="idrequest" value="" type="hidden">
			  <input id="flow" name="flow" value="" type="hidden">
    <div class="form-group">               
        
      <input type="text" id="username" name="username" class="required rut" placeholder="Rut" maxlength="12" onkeypress="return numbersonly(this, event)" autocomplete="ÑÖcompletes"  required/> 

   <input name="password" id="password" type="password" placeholder="Contraseña" required>  
      <input class="submit" type="submit" value="Ingresar"/>
<a class="no-reg" target="_top" href="recuperarClaveAction.do">¿Olvidaste tu contraseña?</a>
      
             </div>
</form>

I hope it helps. Greetings!

The attribute you're looking for is HTML5 :

<input type="text" autocomplete="off">

Remember that it does not work in very old versions of browsers, it will usually work very well, greetings.