Post
Ask Question

Handling the Autocomplete Feature in HTML Input Control

Introduction

 
By default, whenever the HTML input control is used in the form it auto-populates the values based on the values we entered previously while doing the form submit. This default auto-populate/autofill/autocomplete feature of the browser can be handled using an autocomplete attribute in the input control.
 
AutoComplete in Input control
 
By default, the autocomplete attribute is set to on, if it is not defined explicitly.
  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4.   
  5. <form >  
  6. First name: <input type="text" name="FirstName" value="">  
  7. </br>  
  8. </br>  
  9. Last name: <input type="text" name="LastName" value="">  
  10. </br>  
  11. </br>  
  12. <input type="submit" value="Submit">  
  13. </form>  
  14. </body>  
  15. </html>  
From the above code, you can see that the autocomplete attribute is not defined, so by default it will take it as autocomplete=”on”
 
 
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4.   
  5. <form >  
  6. First name: <input type="text" name="FirstName" value="" autocomplete="off">  
  7. </br>  
  8. </br>  
  9. Last name: <input type="text" name="LastName" value="">  
  10. </br>  
  11. </br>  
  12. <input type="submit" value="Submit">  
  13. </form>  
  14. </body>  
  15. </html>  
From the above code, you can see that the autocomplete attribute is set to off for the first name input control, by doing this the autofill feature will be disabled for this control.
 
 

Summary

 
In this post, we saw how to handle the autocomplete feature in HTML input controls, using the autocomplete attribute.
I hope you enjoyed this blog. Happy coding!