数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 HTML 中使用 autocomplete 属性？
HTML 的 **autocomplete** 属性用于表单元素，以设置 autocomplete 属性 **开启** 或 **关闭**。如果 autocomplete 属性值设置为 **开启**，浏览器将根据用户之前在字段中输入的内容自动推荐值。如果该值设置为 **关闭**，浏览器将不会在该字段中推荐之前填写的值。
在这篇文章中，我们有两个输入字段，我们的任务是演示如何在 HTML 中使用 autocomplete 属性。
使用 autocomplete 属性的不同方法
以下是我们在 HTML 文档中使用 autocomplete 属性的不同方法列表。
在 form 标签中使用 autocomplete 属性
在这种方法中，我们已将 **autocomplete** 属性与表单元素一起使用。这将为 form 标签内的所有表单元素提供自动完成输入字段（基于之前输入的值）的建议。
- 为了设计该框，我们使用了 **container** 类，在其中添加了 背景颜色 和 边框，使用 CSS 的 高度 和 宽度 属性设置 填充 和容器的尺寸。
- 我们使用 display 属性将容器变成了 弹性盒，然后使用 justify-content 和 align-items 属性将表单元素居中。
- 我们在 form 标签中使用了 **autocomplete="on"** 属性，该属性使 autocomplete 属性能够根据输入字段中之前输入的值自动填充输入字段。
示例
这是一个完整的示例代码，实现了上述步骤，演示了如何在 HTML 中使用 **form** 标签的 **autocomplete** 属性。
<!DOCTYPE html>
<html>
<head>
<title> HTML autocomplete attribute</title>
<style>
.container {
border: 1px solid black;
height: 120px;
width: 350px;
padding: 15px;
display: flex;
justify-content: center;
align-items: center;
background-color: antiquewhite;
}
</style>
</head>
<body>
<h3>
Using autocomplete Attribute in HTML
</h3>
<p><strong>When autocomplete is enabled</strong></p>
<div class="container">
<form action="" method="get" autocomplete="on">
Student Name:
<input type="name" name="sname">
<br><br>
Mail:
<input type="email" name="email">
<br><br>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
在 input 标签中使用 autocomplete 属性
在这种方法中，我们已将 **autocomplete** 属性与 input 标签一起使用。我们将对具有不同属性值的单个输入标签使用 autocomplete 属性。
- 为了设计该框，我们使用了与第一种方法相同的方法和 CSS 属性。
- 我们已将 **autocomplete** 属性与两个输入标签一起使用，使它们能够根据之前填写的值自动完成输入字段值。
示例 1
这是一个完整的示例代码，实现了上述步骤，演示了如何在 HTML 中使用 **input** 标签的 **autocomplete** 属性。
<!DOCTYPE html>
<html>
<head>
<title> HTML autocomplete attribute</title>
<style>
.container {
border: 1px solid black;
height: 120px;
width: 350px;
padding: 15px;
display: flex;
justify-content: center;
align-items: center;
background-color: antiquewhite;
}
</style>
</head>
<body>
<h3>
Using autocomplete Attribute in HTML
</h3>
<p>
In this example we have used <strong>autocomplete
</strong> attribute with <strong>input</strong> tag.
</p>
<div class="container">
<form action="" method="get">
Student Name: <input type="name" name="sname"
autocomplete="on">
<br><br>
Mail: <input type="email" name="email"
autocomplete="on">
<br><br>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
示例 2
在此示例中，我们已将 **学生姓名** 字段的 autocomplete 属性值设置为“on”，并将 **邮件** 字段的值设置为“off”。只有学生姓名字段将获得自动完成的建议。
<!DOCTYPE html>
<html>
<head>
<title> HTML autocomplete attribute</title>
<style>
.container {
border: 1px solid black;
height: 120px;
width: 350px;
padding: 15px;
display: flex;
justify-content: center;
align-items: center;
background-color: antiquewhite;
}
</style>
</head>
<body>
<h3>
Using autocomplete Attribute in HTML
</h3>
<p>
In this example we have used <strong>autocomplete
</strong> attribute with one <strong>input</strong>
tag and disabled it on another.
</p>
<div class="container">
<form action="" method="get">
Student Name: <input type="name" name="sname"
autocomplete="on">
<br><br>
Mail: <input type="email" name="email"
autocomplete="off">
<br><br>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
结论
在本文中，我们演示了如何在 HTML 中使用 **autocomplete** 属性。我们已将 autocomplete 属性与 **form** 标签和 **input** 标签一起使用。在 input 标签中，我们已将 autocomplete 属性的不同值与不同的输入字段一起使用，显示了启用和禁用 autocomplete 属性时的差异。
410 次查看
