Question

我正在学习HTML，但无法理解某些内容。我正在查看该网站Create Amazing Web Forms。

我从他们的网站复制了以下HTML：

$(document).ready(function () {
        var shouldShowSubmitBtn = true;

        $("input").change(function () {
            $(":input").each(function () {
                if ($(this).val() == '') {
                    shouldShowSubmitBtn = false;
                    return false;
                }
            });
        });
    });

这是我的整个网页供参考。

<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="+1-555-555-1212" 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>

在他们使用我的Google帐户登录的Google Chrome浏览器的网站上，所有表单字段都填充了我的姓名，地址，电话号码，电子邮件等。但是，当我将此HTML粘贴到Visual Studio中的HTML文件中时从Google Chrome浏览器编码并查看我的网页，其中没有填充我的信息。唯一有效的字段是电话和电子邮件。而且，如果我输入电话或电子邮件，则不会填充其他任何字段。

为什么会这样，我想念什么？

Answer 1

我想我可能在这里找到了答案：Google Chrome Help - Fill Out Forms Automatically

根据该页面，Chrome可能无法建议表单数据的原因之一是该网站不够安全。好吧，我正在从C驱动器查看本地html文件，而我的“站点”根本不安全。以下是来自上述Google Chrome帮助网站的报价。

Chrome浏览器不建议我保存的信息

如果您在填写表单时没有得到建议，请执行以下任一操作：



该网站可能不够安全，无法从Chrome获取此信息。   如果网站是安全的，请了解如何解决已保存信息的问题。



Chrome可能无法检测到表单中的某些字段。

希望这是怎么回事。

HTML自动完成表单字段未正确填充

1 个答案: