資料結構
網路
關係型資料庫管理系統
作業系統
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 次檢視
