Difference between TAG hierarchies of BOOTSTRAP NAV and NAVBAR components

  --NAVBAR--                 --NAV--

NAVBAR                  ----------

NAVBAR-NAV                         NAV

NAV-ITEM                 NAV-ITEM

NAV-LINK                 NAV-LINK

Browser autocomplete behaviors

 Found the following strange autocomplete behaviors on both Google and Edge. 

Consider the following html for input : 

  <div class="form-group">

    <label for="emailid">Email Id :</label>

    <input type="email" class="form-control" placeholder="Enter User" id="emailid">

  </div>

In this code, note the following "HOTSPOTS" :

  <div class="form-group">

    <label for="emailid">Email Id :</label>

    <input type="email" class="form-control" placeholder="Enter User" id="emailid">

  </div> 

If you ever set these two hotspots to values like "email" , "emailaddress" , "user" , "password", the browser is likely to autofill this field. (tested with chrome and edge). 

To avoid this, just change the name slightly. e.g. from "email" to "emailid" . You will have to test which name is working by trial and error. But you have to make changes in these two places mostly, plus may be in the <label for="XXXX"> place. 

If you google on autocomplete behavior, most of the links will tell you to set autocomplete to "off" or some junk value "dsf" or some different value "differentname" or set name to some different value that id of the control. But practically none of these tricks work. 

I also found this SO https://stackoverflow.com/questions/55591018/autocomplete-off-in-html5 

which tells to include autocomplete="off" in form tag and then include a hidden input in the form with autocomplete="false". But this also did not work. 

<form autocomplete="off" >
    <input autocomplete="false" name="hidden" type="text" style="display:none;">