資料結構
網路
關係資料庫管理系統 (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 次瀏覽
