数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
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属性将容器制作成flexbox，然后使用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属性
在这种方法中，我们使用了带有input标签的**autocomplete**属性。我们将对单个input标签使用具有不同属性值的autocomplete属性。
- 为了设计这个框，我们使用了与第一种方法相同的方法和CSS属性。
- 我们对两个input标签都使用了**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**属性。我们使用了带有**form**标签和**input**标签的autocomplete属性。在input标签中，我们对不同的输入字段使用了autocomplete属性的不同值，展示了启用和禁用autocomplete属性时的区别。
410 次浏览
