极客笔记HTML 如何在网络表单字段/输入标签上禁用浏览器自动完成
在本文中，我们将学习如何禁用浏览器在网络表单字段或其输入元素上的自动完成功能，并使用“form”和“input” HTML标签提供的“autocomplete”属性。
浏览器自动完成是一个建议过去输入和提交到表单中的值的功能。默认情况下，浏览器中启用了自动完成功能，所以当用户点击一个输入框时，该输入框的建议值就会显示出来，用户可以直接选择任何一个建议值来自动填充内容。
为了禁用这种行为，我们将介绍两种方法，这些方法利用了“form”和“input” HTML元素中可用的“autocomplete”属性。
方法1
在此方法中，我们将直接在“form” HTML标签上使用“autocomplete”属性，以禁用所有“form”标签内存在的“input”元素上的浏览器自动完成行为。
示例
让我们通过一个示例来检查上述方法：
<html lang="en">
<head>
<title>How to disable browser Autocomplete on web form field/input tag?</title>
</head>
<body>
<h3>How to disable browser Autocomplete on web form field/input tag?</h3>
<h4>Form with autocomplete ON</h4>
<form>
<label for="email">Email</label>
<input type="email" name="email" id="email" />
<br />
<label for="firstName">First Name</label>
<input type="text" name="firstName" id="firstName" />
<br />
<label for="lastName">Last Name</label>
<input type="text" name="lastName" id="lastName" />
<br />
<input type="submit" value="Submit" />
</form>
<h4>Form with autocomplete OFF</h4>
<form autocomplete="off">
<label for="email">Email</label>
<input type="email" name="email" id="email" />
<br />
<label for="firstName">First Name</label>
<input type="text" name="firstName" id="firstName" />
<br />
<label for="lastName">Last Name</label>
<input type="text" name="lastName" id="lastName" />
<br />
<input type="submit" value="Submit" />
</form>
</body>
</html>
方法二
在这种方法中，我们将直接在“input”HTML标记上使用“autocomplete”属性，以仅禁用浏览器在特定的“input”元素上的自动完成行为。
示例1
让我们通过一个示例来验证上述方法：
<html lang="en">
<head>
<title>How to disable browser Autocomplete on web form field/input tag?</title>
</head>
<body>
<h3>How to disable browser Autocomplete on web form field/input tag?</h3>
<form>
<label for="email">Email (With Autocomplete)</label>
<input type="email" name="email" id="email" />
<br />
<label for="firstName">First Name (Without Autocomplete)</label>
<input type="text" name="firstName" id="firstName" autocomplete="off" />
<br />
<label for="lastName">Last Name (Without Autocomplete)</label>
<input type="text" name="lastName" id="lastName" autocomplete="off" />
<br />
<input type="submit" value="Submit" />
</form>
</body>
</html>
示例2
在本示例中，我们使用两种方法来禁用自动完成行为。一种是使用JavaScript将”autocomplete”设置为false，另一种是通过将表单的autocomplete属性设置为off来禁用表单自动填充功能。
文件名：index.html
<html lang="en">
<head>
<title>How to disable browser Autocomplete on web form field/input tag?</title>
<script>
// Method 1: Setting autocomplete to false using JavaScript
function disableAutocomplete() {
document.getElementById("email").autocomplete = "off";
}
// Method 2: Disabling form autofill
function disableAutofill() {
var form = document.getElementById("myForm");
form.setAttribute("autocomplete", "off");
form.addEventListener("submit", function() {
this.removeAttribute("autocomplete");
});
}
</script>
</head>
<body>
<h3>How to disable browser Autocomplete on web form field/input tag?</h3>
<form id="myForm">
<label for="email">Email (With Autocomplete)</label>
<input type="email" name="email" id="email" />
<br />
<label for="firstName">First Name (Without Autocomplete)</label>
<input type="text" name="firstName" id="firstName" autocomplete="off" />
<br />
<label for="lastName">Last Name (Without Autocomplete)</label>
<input type="text" name="lastName" id="lastName" autocomplete="off" />
<br />
<input type="submit" value="Submit" />
</form>
<button onclick="disableAutocomplete()">Disable Autocomplete for Email Field</button>
<button onclick="disableAutofill()">Disable Form Autofill</button>
</body>
</html>
结论
在本文中，我们学习了如何通过两种不同的方法和三个示例来禁用Web表单字段或输入标签上的默认浏览器自动填充行为。在第一种方法中，我们在“form”标签上应用了“autocomplete”属性来禁用整个表单上的自动填充行为；在第二种方法中，我们在“input”标签上应用了“autocomplete”属性，仅禁用了该特定输入元素上的行为。