Home > DeveloperSection > Forums > How to Stop auto-fill in browsers for textbox.
Ankit Singh

Total Post:341

Points:2389
Posted on    January-03-2016 10:12 PM

 ASP.Net ASP.Net  Mvc  Web Application 
Ratings:


 1 Reply(s)
 296  View(s)
Rate this:
I want to use Stop auto-fill in browsers for textbox.how to do ths please help me.


aditya kumar Patel

Total Post:250

Points:1782
Posted on    January-03-2016 10:33 PM

We are looking browsers like Chrome, Firefox, Internet Explorer and Safari has functionality of auto complete values in TextBoxes.
If we have enabled this feture in your browser, then each and every time when you start to enter value in TextBox we
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 Login form and other confidential data form of a web page.
In chrome browser, we can enable auto-fill as shown below :

if we want to set Autofill textbox in browser .then go to browser setting

if  we want to disable prefilled  value in textbox when browser  have enable Autofill.

<form method="post" accept-charset="utf-8" autocomplete="off" role="form" class="form-horizontal">
        </form> 

Like below Full login form code.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Fourm.aspx.cs" Inherits="Forumasp.Fourm" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <meta charset="utf-8">
    <title>jQuery UI Menu - Categories</title>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <link href="Content/bootstrap-theme.css" rel="stylesheet" />
</head>
<body>
   <div class="login-body">
    <article class="login-box center-block">
  <section>
   <ul id="top-bar" class="nav nav-tabs nav-justified">
   
     <li class=""><a href="#login-access">Customer Login</a></li> 
   </ul>
   <div class="tab-content tabs-login col-lg-12 col-md-12 col-sm-12 cols-xs-12">
    <div id="login-access" class="tab-pane fade active in">
     <h2><i class="glyphicon glyphicon-log-in"></i> Login</h2>      
     <form method="post" accept-charset="utf-8" autocomplete="off" role="form" class="form-horizontal">
      <div class="form-group ">
       <label for="login" class="sr-only">Email</label>
        <input type="text" class="form-control" name="login" id="login_value"
         placeholder="Email" tabindex="1" value="" />
      </div>
      <div class="form-group ">
       <label for="password" class="sr-only">Password</label>
        <input type="password" class="form-control" name="password" id="password"
         placeholder="Password" value="" tabindex="2" />
      </div>
      <div class="checkbox">
        <label class="control-label" for="remember_me">
         <input type="checkbox" name="remember_me" id="remember_me" value="1" class="" tabindex="3" /> Remember
        </label>
      </div>
      <br/>
      <div class="form-group ">    
        <button type="submit" name="log-me-in" id="submit" tabindex="5" class="btn btn-lg btn-primary">Login</button>
      </div>
     </form>   
    </div>
   </div>
  </section>
 </article>
</div>
</body>
    <style>       

body {
    font-family: Open Sans;
    font-size: 14px;
    line-height: 1.42857;
    background: #333333;
    height: 350px;
    padding: 0;
    margin: 0;
}
.login-box {
    min-height: 0;
    width: 480px;
    color: #333333;
    margin-top: 40px;
    padding: 0;
}
.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.login-box > section {
    margin-left: 0;
    margin-right: 0;
    padding-bottom: 10px;
}
#top-bar {
    display: inherit;
}
.nav-tabs.nav-justified {
    border-bottom: 0 none;
    width: 100%;
}
.nav-tabs.nav-justified > li {
    display: table-cell;
    width: 1%;
    float: none;
}
.login-box .nav-tabs.nav-justified > li > a,
.login-box .nav-tabs.nav-justified > li > a:hover,
.login-box .nav-tabs.nav-justified > li > a:focus {
    background: #ea533f;
    border: medium none;
    color: #ffffff;
    margin-bottom: 0;
    margin-right: 0;
    border-radius: 0;
}
.login-box .nav-tabs.nav-justified > .active > a,
.login-box .nav-tabs.nav-justified > .active > a:hover,
.login-box .nav-tabs.nav-justified > .active > a:focus {
    background: #ffffff;
    color: #333333;
}
.login-box .nav-tabs.nav-justified > li > a:hover,
.login-box .nav-tabs.nav-justified > li > a:focus {
    background: #de2f18;
}
.tabs-login {
    background: #ffffff;
    border: medium none;
    margin-top: -1px;
    padding: 10px 30px;
}
.login-box h2 {
    color: #ea533f;
}
.form-control {
    background-color: #ffffff;
    background-image: none;
    border: 1px solid #999999;
    border-radius: 0;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    color: #333333;
    display: block;
    font-size: 14px;
    height: 34px;
    line-height: 1.42857;
    padding: 6px 12px;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    width: 100%;
}
.login-box .checkbox {
    margin-top: -15px;
}
.login-box button {
    background-color: #ea533f;
    border-color: #e73e28;
    color: #ffffff;
    border-radius: 0;
    font-size: 18px;
    line-height: 1.33;
    padding: 10px 16px;
    width: 100%;
}
.login-box button:hover,
.login-box button:focus {
    background: #de2f18;
    border-color: #be2815;
}

 


    </style>
</html>

 

 


Don't want to miss updates? Please click the below button!

Follow MindStick