HTML Auto-Complete Form Fields Not Populating Correctly - html

Question

I am learning HTML and I am having trouble understanding something. I was checking out this website Create Amazing Web Forms.
I copied the following HTML from their site:
<form method="post" id="usrForm">
<fieldset>
<legend>Contact Info</legend>
<!-- // [START autocomplete] -->
<label for="frmNameA">Name</label>
<input type="text" name="name" id="frmNameA" placeholder="Full name" required="" autocomplete="name" class="dirty">
<label for="frmEmailA">Email</label>
<input type="email" name="email" id="frmEmailA" placeholder="name#example.com" required="" autocomplete="email">
<label for="frmEmailC">Confirm Email</label>
<input type="email" name="emailC" id="frmEmailC" placeholder="name#example.com" required="" autocomplete="email">
<label for="frmPhoneNumA">Phone</label>
<input type="tel" name="phone" id="frmPhoneNumA" placeholder="[phone]" required="" autocomplete="tel">
<!-- // [END autocomplete] -->
<label for="frmShoeSize">Shoe Size</label>
<input type="number" name="shoe-size" id="frmShoeSize" min="1" max="18" step="0.5">
<!-- // [START datalist] -->
<label for="frmFavChocolate">Favorite Type of Chocolate</label>
<input type="text" name="fav-choc" id="frmFavChocolate" list="chocType">
<datalist id="chocType">
<option value="white">
</option><option value="milk">
</option><option value="dark">
</option></datalist>
<!-- // [END datalist] -->
</fieldset>
<fieldset>
<legend>Shipping</legend>
<!-- // [START labels] -->
<label for="frmAddressS">Address</label>
<input type="text" name="ship-address" required="" id="frmAddressS" placeholder="123 Any Street" autocomplete="shipping street-address">
<!-- // [END labels] -->
<label for="frmCityS">City</label>
<input type="text" name="ship-city" required="" id="frmCityS" placeholder="New York" autocomplete="shipping locality">
<label for="frmStateS">State</label>
<input type="text" name="ship-state" required="" id="frmStateS" placeholder="NY" autocomplete="shipping region">
<label for="frmZipS">Zip</label>
<input type="text" name="ship-zip" required="" id="frmZipS" placeholder="10011" autocomplete="shipping postal-code">
<label for="frmCountryS">Country</label>
<input type="text" name="ship-country" required="" id="frmCountryS" placeholder="USA" autocomplete="shipping country">
<label>
<input type="checkbox" name="billAndShip" id="cbBillAndShip">
Bill to this address.
</label>
</fieldset>
<fieldset>
<legend>Billing</legend>
<label for="frmAddressB">Address</label>
<input type="text" name="bill-address" id="frmAddressB" required="" placeholder="123 Any Street" autocomplete="billing street-address">
<label for="frmCityB">City</label>
<input type="text" name="bill-city" id="frmCityB" required="" placeholder="New York" autocomplete="billing locality">
<label for="frmStateB">State</label>
<input type="text" name="bill-state" id="frmStateB" required="" placeholder="NY" autocomplete="billing region">
<label for="frmZipB">Zip</label>
<input type="text" name="bill-zip" id="frmZipB" required="" placeholder="10011" autocomplete="billing postal-code">
<label for="frmCountryB">Country</label>
<input type="text" name="bill-country" id="frmCountryB" required="" placeholder="USA" autocomplete="billing country">
</fieldset>
<fieldset>
<legend>Payment</legend>
<p>Do <b>NOT</b> provide real credit card information in this field.</p>
<label for="frmNameCC">Name on card</label>
<input type="text" name="ccname" id="frmNameCC" required="" placeholder="Full Name" autocomplete="cc-name">
<label for="frmCCNum">Card Number</label>
<input type="text" name="cardnumber" id="frmCCNum" required="" autocomplete="cc-number">
<label for="frmCCCVC">CVC</label>
<input type="text" name="cvc" id="frmCCCVC" required="" autocomplete="cc-csc">
<label for="frmCCExp">Expiry</label>
<!-- // [START placeholder] -->
<input type="text" name="cc-exp" id="frmCCExp" required="" placeholder="MM-YYYY" autocomplete="cc-exp">
<!-- // [END placeholder] -->
</fieldset>
<div>
<button class="btn" id="butCheckout">Check Out</button>
</div>
</form>
Here is my entire web page for reference.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="author" content="David Warwick">
<meta name="description" content="User Profile">
<meta name="keywords" content="profile">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="CSS/page-format.css">
<link rel="stylesheet" type="text/css" href="CSS/header-navigation.css">
<link rel="stylesheet" type="text/css" href="CSS/advertisement.css">
<script src="scripts/Jscripts.js"></script>
<title>User Profile</title>
</head>
<body>
<div id="container">
<div id="header">
<header>
<h1>User Profile</h1>
<nav>
<a class="navbutton" onmouseover="mouseover(this)" onmouseout="mouseout(this)"
href="index.html">Home</a>
<a class="navbutton" onmouseover="mouseover(this)" onmouseout="mouseout(this)"
href="WarwickDavidAssignment6.html">C# Classes</a>
<a class="navbutton" onmouseover="mouseover(this)" onmouseout="mouseout(this)"
href="about-me.html">About Me</a>
<a class="navbutton" onmouseover="mouseover(this)" onmouseout="mouseout(this)"
href="userprofile.html">User Profile</a>
</nav>
</header>
</div>
<form method="post" id="usrForm">
<fieldset>
<legend>Contact Info</legend>
<!-- // [START autocomplete] -->
<label for="frmNameA">Name</label>
<input type="text" name="name" id="frmNameA" placeholder="Full name" required="" autocomplete="name" class="dirty">
<label for="frmEmailA">Email</label>
<input type="email" name="email" id="frmEmailA" placeholder="name#example.com" required="" autocomplete="email">
<label for="frmEmailC">Confirm Email</label>
<input type="email" name="emailC" id="frmEmailC" placeholder="name#example.com" required="" autocomplete="email">
<label for="frmPhoneNumA">Phone</label>
<input type="tel" name="phone" id="frmPhoneNumA" placeholder="[phone]" required="" autocomplete="tel">
<!-- // [END autocomplete] -->
<label for="frmShoeSize">Shoe Size</label>
<input type="number" name="shoe-size" id="frmShoeSize" min="1" max="18" step="0.5">
<!-- // [START datalist] -->
<label for="frmFavChocolate">Favorite Type of Chocolate</label>
<input type="text" name="fav-choc" id="frmFavChocolate" list="chocType">
<datalist id="chocType">
<option value="white">
</option><option value="milk">
</option><option value="dark">
</option></datalist>
<!-- // [END datalist] -->
</fieldset>
<fieldset>
<legend>Shipping</legend>
<!-- // [START labels] -->
<label for="frmAddressS">Address</label>
<input type="text" name="ship-address" required="" id="frmAddressS" placeholder="123 Any Street" autocomplete="shipping street-address">
<!-- // [END labels] -->
<label for="frmCityS">City</label>
<input type="text" name="ship-city" required="" id="frmCityS" placeholder="New York" autocomplete="shipping locality">
<label for="frmStateS">State</label>
<input type="text" name="ship-state" required="" id="frmStateS" placeholder="NY" autocomplete="shipping region">
<label for="frmZipS">Zip</label>
<input type="text" name="ship-zip" required="" id="frmZipS" placeholder="10011" autocomplete="shipping postal-code">
<label for="frmCountryS">Country</label>
<input type="text" name="ship-country" required="" id="frmCountryS" placeholder="USA" autocomplete="shipping country">
<label>
<input type="checkbox" name="billAndShip" id="cbBillAndShip">
Bill to this address.
</label>
</fieldset>
<fieldset>
<legend>Billing</legend>
<label for="frmAddressB">Address</label>
<input type="text" name="bill-address" id="frmAddressB" required="" placeholder="123 Any Street" autocomplete="billing street-address">
<label for="frmCityB">City</label>
<input type="text" name="bill-city" id="frmCityB" required="" placeholder="New York" autocomplete="billing locality">
<label for="frmStateB">State</label>
<input type="text" name="bill-state" id="frmStateB" required="" placeholder="NY" autocomplete="billing region">
<label for="frmZipB">Zip</label>
<input type="text" name="bill-zip" id="frmZipB" required="" placeholder="10011" autocomplete="billing postal-code">
<label for="frmCountryB">Country</label>
<input type="text" name="bill-country" id="frmCountryB" required="" placeholder="USA" autocomplete="billing country">
</fieldset>
<fieldset>
<legend>Payment</legend>
<p>Do <b>NOT</b> provide real credit card information in this field.</p>
<label for="frmNameCC">Name on card</label>
<input type="text" name="ccname" id="frmNameCC" required="" placeholder="Full Name" autocomplete="cc-name">
<label for="frmCCNum">Card Number</label>
<input type="text" name="cardnumber" id="frmCCNum" required="" autocomplete="cc-number">
<label for="frmCCCVC">CVC</label>
<input type="text" name="cvc" id="frmCCCVC" required="" autocomplete="cc-csc">
<label for="frmCCExp">Expiry</label>
<!-- // [START placeholder] -->
<input type="text" name="cc-exp" id="frmCCExp" required="" placeholder="MM-YYYY" autocomplete="cc-exp">
<!-- // [END placeholder] -->
</fieldset>
<div>
<button class="btn" id="butCheckout">Check Out</button>
</div>
</form>
<div id="body">
<main>
<form>
<label for="frmNameA">Name
<input type="text" name="name" id="frmNameA" required
autocomplete="given-name">
</label>
</form>
</main>
<aside>
<img id="Advertisement" src="Images/ad.png" alt="Advertise with us" draggable="true"
ondragstart="drag(event)" />
</aside>
<div id="DropZone" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
</div>
<footer id="footer">
<p>© 2019 David Warwick</p>
</footer>
</body>
</html>
On their website when I use Google Chrome logged in with my Google Account, all of the form fields populate with my name, address, phone number, email, etc. But when I paste this HTML into my HTML file in Visual Studio Code and view my web page from Google Chrome, it doesn't populate with my information. The only field that works is phone and email. And if I enter my phone or email, none of the other fields populate.
Why is this happening and what am I missing?

Answer 1

I think I may have found the answer here: Google Chrome Help - Fill Out Forms Automatically
According to that page, one of the reasons that form data may not be suggested by Chrome is that the site is not secure enough. Well, I am viewing a local html file from my C drive and my "site" is not secure at all. The following is a quote from the Google Chrome Help site mentioned above.
Chrome doesn't suggest my saved info
If you don't get suggestions when you fill out a form, either:
The website might not be secure enough to get this info from Chrome.
If the website is secure, learn how to fix issues with saved info.
Chrome might not detect certain fields in the form.
Hopefully that is what is going on.