html表单中的自动完成属性不起作用答案

【问题标题】：Autocomplete attribute in html form not workinghtml表单中的自动完成属性不起作用
【发布时间】：2017-05-25 08:23:49
【问题描述】：

我想在我的 html 表单中有一个更新选项，用户可以在其中输入 First_name，然后所有字段都应该自动填充 mysql 表中的相应值。我尝试在几个字段中使用自动完成属性，但它不起作用。请检查代码，如果有任何错误，请告诉我。或任何其他方式来实现要求。

 
    <form method="post" action="demo1.php" autocomplete="on">

    <link rel="stylesheet" href="contact_css.css">
    <!--Create a table -->

    <table>
    <tr><td><b>Contact Information</b></td>
     </tr>
    <tr>
    <div class="leftside">
      <td>ContactID</td>
	  <td><input type="text" name="ContactID" autocomplete="ContactID"></td>
    </div>
	<div class="rightside">
	  <td>ContactOwner</td>
	<!--  <td><input type="text" name="ContactOwner"></td>-->
	    <td><select name="ContactOwner">
     <option value="None">None</option>
     <option value="Malik">Malik</option>
     <option value="Manish">Manish</option>
     <option value="Ankit">Ankit</option>
     <option value="Vikrant">Vikrant</option>
     </select></td>
	  </div>
	   <tr>
	<div class="rightside">
	  <td>LeadSource</td>
	  <td><select name="LeadSource">
     <option value="None">None</option>
     <option value="Advertisement">Advertisement</option>
     <option value="ColdCall">ColdCall</option>
     <option value="EmployeeReferral">EmployeeReferral</option>
     <option value="ExternalReferral">ExternalReferral</option>
     <option value="OnlineStore">OnlineStore</option>
     <option value="Partner">Partner</option>
     <option value="Web">Web</option>
     <option value="TradeShow">TradeShow</option>
    </select></td>
	  <!--<td><input type="text" name="LeadSource"></td>-->
	</div>
      
    <div class="leftside">
	  <td><label for="First_name">First_name</td>
	  <td><input type="text" id="First_name" name="First_name" autocomplete="First_name"></td>
    </div>
    </tr>
    <tr>
    <div class="rightside">
	  <td>Middle_name</td>
	  <td><input type="text" name="Middle_name" autocomplete="Middle_name"></td>
     </div>
      <td>Last_name</td>
     <td><input type="text" name="Last_name" autocomplete="Last_name"></td>
	  </tr>
	  <tr>
	 <td>AccountName</td>
	  <td><input type="text" name="AccountName"></td>
  
   	   <td>EmailID</td>
	  <td><input type="text" name="EmailID"></td>
	  </tr>
	  <tr>
	  <td>Department</td>
	  <td><input type="text" name="Department"></td>
   	  <td>Phone</td>
	  <td><input type="text" name="Phone"></td>
     </tr>
     <tr>
	  <td>Mobile</td>
	  <td><input type="number" name="Mobile"></td>
	  <td>Fax</td>
	  <td><input type="number" name="Fax"></td>
      </tr>
     <tr>
	  <td>DOB</td>
	  <td><input type="date" name="DOB"></td>
	  <td>Assistant</td>
	  <td><input type="text" name="Assistant"></td>
     </tr>
     <tr>
	  <td>AsstPhone</td>
	  <td><input type="number" name="AsstPhone"></td>
	  <td>ReportsTo</td>
	  <td><input type="text" name="ReportsTo"></td>
     </tr>
     <tr>
   	  <td>LinkedIn</td>
	  <td><input type="text" name="LinkedIn"></td>
	  <td>CallStatus</td>
	  <td><select name="CallStatus">
     <option value="None">None</option>
     <option value="AnsweringMachine">AnsweringMachine</option>
     <option value="Callback">Callback</option>
     <option value="NotInterested">NotInterested</option>
     <option value="Prospect">Prospect</option>
     <option value="WrongContact">WrongContact</option>
     <option value="PerformedInternally">PerformedInternally</option>
     <option value="LessThan30Employee">LessThan30Employee</option>
     </select></td>
     </tr>
	  </table>
	  
    <!-- Second table-->
    <table>
    <tr><td><b>Address Information</b></td>
    </tr>
    <tr>
     <div class="leftside">
      <td>Street</td>
	  <td><input type="text" name="Street"></td>
     </div>
	 <div class="rightside">
	  <td>OtherStreet</td>
	  <td><input type="text" name="OtherStreet"></td>
	 </div>
    </tr>
    <tr>
    <div class="leftside">
	  <td>City</td>
	  <td><input type="text" name="City"></td>
      </div>
      <div class="rightside">
	  <td>State</td>
	  <td><input type="text" name="State"></td>
     </div>
     </tr>
     <tr>
	  <td>Zip</td>
	  <td><input type="text" name="Zip"></td>
	  <td>Country</td>
	  <td><input type="text" name="Country"></td>
     </tr>
     </table>
    <!--Third table-->
 	<table>
    <tr><td><b>Description Information</b></td>
    </tr>
    <tr>
    <td>Description</td>
	  <td><input type="text" name="Description" class="Description"></td>
    
	 </table>
	 <button type="button">Cancel</button>
	<!-- <button type="submit">Save and New</button>-->
	 <button type="submit">Save</button>
	 
	  </form>
    </body>

【问题讨论】：

输入自动完成属性的值为on|off
据我所知，HTML 自动完成功能适用于互联网浏览器（因此它会自动完成它知道的值，例如为网站保存的用户名和密码）。使用 PHP 代码将值“强制”到其中。例如你有手机号码，假设你想自动完成它，所以只需写 $>$
在此处阅读自动完成部分：developer.mozilla.org/en-US/docs/Web/HTML/Element/input。它说“允许浏览器根据用户在以前使用期间输入的值自动完成值”。这意味着浏览器自己缓存了该计算机上该用户之前输入的内容，并且并不总是进入您的站点。我不知道您从哪里想到这与从数据库中获取数据有任何关系？为此，您需要一个服务器端数据库和一个 PHP 脚本来查询数据库并将数据返回到网页。
另外，如果您考虑一下，您的代码在哪里提到它是 your 数据库来提取值？没有地方可以添加该信息。我不明白你为什么认为这会起作用，或者你在哪里读到它会起作用。

标签： php html

【解决方案1】：

autocomplete 属性不是这样工作的。

定义和用法

自动完成属性指定是否输入字段应该启用自动完成功能。

自动完成功能允许浏览器预测值。当一个用户开始输入字段，浏览器应显示要填写的选项在字段中，基于之前键入的值。

注意：自动完成属性适用于以下内容类型：文本、搜索、网址、电话、电子邮件、密码、日期选择器、范围、和颜色。

语法

<input autocomplete="on|off">

该属性只能有 on 或 off

值

请参阅w3schools 文档了解更多详情

如果您想在这些字段中设置默认值，您可以在 value 属性中设置它或使用 DEFAULT 值设计您的数据库。

所以你可以把<input type="text" name="ContactID" autocomplete="ContactID">改成<input type="text" name="ContactID" value="ContactID">

【讨论】：