04 Questions

05 Training Programs

Stop auto-fill in browsers for textbox

27 Mar 2024

Intermediate

66.7K Views

8 min read

Learn via Video Course & by Doing Hands-on Labs

ASP.NET Core Course

Free Course Self Paced Courses Hands-On Labs Interview Q&A

Stop auto-fill in Browsers for Textbox: An Overview

Prevent auto-fill in browser is very essential to maintain security and privacy. In this Tutorial, you will get to know What is auto-fill in browsers?, How to disable auto-fill?, Examples and Reasons to Disable auto-fill. Stay tuned!! Learn about more ASP.NET concepts like this through ASP.NET Certification Training.

What is auto-fill?

In Today’s browsers like Chrome, Firefox, Internet Explorer and Safari has functionality of auto complete values in TextBoxes. If you have enabled this features in your browser, then each and every time when you start to enter value in TextBox you get a drop down of prefilled values in that TextBox. This feature of browser can be disabled by the programming for a specific web form like payment form and other confidential information form of a web application.

In chrome browser, we can enable auto-fill as shown below:

Suppose we have a below form for online payment of product by credit card or debit card then it is mandatory to stop auto complete functionality of browser so that browser doesn’t save the confidential information of a customer’s credit card or debit card.

How to Disable Auto-fill

We can turn off auto-fill for our complete form by setting autocomplete attribute value to off as shown below:

<form id="Form1" method="post" runat="server" autocomplete="off">
 .
 .
</form>

We can also turn off auto-fill for a particular TextBox by setting autocomplete attribute value to off as shown below:

<asp:TextBox Runat="server" ID="txtConfidential" autocomplete="off"></asp:TextBox>

We can also do this from code behind also like as:

txtConfidential.Attributes.Add("autocomplete", "off");

After doing one of above code you will see that there is no auto-fill.

Example of disabling the Auto-fill

Let's try to understand it better through an example program:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Disable Auto-fill Example</title>
</head>
<body>
    <form>
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" autocomplete="off"><br><br>
        
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" autocomplete="off"><br><br>
        
        <input type="submit" value="Submit">
    </form>
</body>
</html>

Here, we have prevented autofill by the 'autocomplete="off"' attribute for username and password, so when the user tries to fill the blanks for these fields, no auto-fill suggestions will appear.

Reasons to Disable Auto-fill

There are many reasons for which it is required to disable auto-fill that include:

A. User privacy concerns

To show auto-fill suggestions, the browser collects and stores data which could be sensitive information like usernames, passwords, credit card numbers or other personal details. Disabling auto-fill helps prevent the browser to store such information so as to protect user's privacy.

B. Avoidance of accidental form submissions

Sometimes, auto-fill leads to accidental form submissions as it could fill incorrect information by itself or the user might click on one of the suggestions by mistake. Disabling auto-fill will help prevent such accidental form submissions and users will have the opportunity fill and review the correct information by themselves.

C. Reduction of data entry errors

Auto-fill can also, many a times, populate certain form fields with incorrect or outdated information which, in result, can lead to data entry errors. But, if the user disables auto-fill, they will have to manually fill in the correct information that will prevent such data entry errors.

D. Customization of user experience

If the auto-fill is disabled, it gives the developers an opportunity to provide a more customizable and controlled user experience within their applications. Custom auto-fill or suggestion mechanisms can be implemented by the developer to suit the application and its users.

Impact and Benefits

Disabling auto-fill in browsers can have many impacts and benefits such as:

It helps to protect the user's privacy as it prevents the browsers from storing and suggesting sensitive information like usernames, passwords and other personal details.
The data needs to be filled manually which, as a result, increases accuracy and correctness of the filled data in form submissions.
It also prevents from the risk of accidental form submissions that can occur when browser fills in incorrect or outdated information without the user's review.
By disabling auto-fill, collection of sensitive information is minimized which contribute to compliance with data protection regulations, such as GDPR (General Data Protection Regulation) and CCPA (California Consumer Privacy Act).

Summary

In this article, I explain how can you stop auto-complete in TextBox by programming. I hope you will use this trick in your web form. I would like to have feedback from my blog readers. Please post your feedback, question, or comments about this article. Explore more about different concepts of ASP.NET through our comprehensive ASP.NET Certification Course that will guide you step by step through your ASP.NET journey.

FAQs

Q1. How do I stop my browser from autofilling?

To stop your browser from autofilling follow these steps:

Open browse settings or preferences.
Find the autofill or autocomplete option.
Uncheck the option to disable autofill.

Q2. How does autofill work in browser?

Autofill in browser works by storing information which was entered previously like usernames, password, etc. So when the user revisits a website that has those input fields, it suggests those stored values.

Q3. Why disable autofill?

You should disable autofill to protect sensitive information, prevent accidental form submissions, reduction of data entry errors and customized user experience.

Q4. Where is autofill settings?

Autofill settings can be easily found in the browser's settings menu often indicated with a three dot icon in the top-right corner.

Q5. Can you turn off autofill in Chrome for specific site?

Yes, you can turn off autofill in Chrome for specific sites like this:

Click on the lock icon which is there on the side of the URL in address bar.
Then, click on 'Site Settings" and find 'Auto-fill'.
Turn off the 'Auto-fill forms' option.

Take our free aspnet skill challenge to evaluate your skill

In less than 5 minutes, with our skill challenge, you can identify your knowledge gaps and strengths in a given skill.

GET CHALLENGE

01 Beginner

02 Intermediate

03 Advanced