Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Use Autocomplete Attribute in HTML
HTML autocomplete attribute is used with form element to set the autocomplete attribute on or off. If the autocomplete attribute value is set to on, browser will automatically recommend values based on what users entered earlier in the field. If the value is set to off, browser will not recommend earlier filled values in that field.
In this article, we are having two input fields, our task is to demonstrate how to use autocomplete attribute in HTML.
Different Ways to Use autocomplete Attribute
Here is a list of different ways in which we can use autocomplete attribute in our HTML document.
Using autocomplete Attribute With form Tag
In this approach, we have used autocomplete attribute with form element. This will give suggestion for all the form elements inside the form tag for autocompleting the input field based on previously entered value.
- To design the box we have used container class where we have added background-color and border, set the padding and dimension of container using CSS height and width property.
- We have made container into a flexbox using display property and then used justify-content and align-items property to center the form elements.
- We have used autocomplete="on" attribute in form tag which enables the autocomplete attribute automatically filling the input field based on the previously entered value in the input field.
Example
Here is a complete example code implementing above mentioned steps demonstrating how to use autocomplete attribute in HTML with form tag.
<!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>
Using autocomplete Attribute With input Tag
In this approach, we have used autocomplete attribute with input tag. We will be using autocomplete attribute on individual input tag with different attribute values.
- To design the box we have used the same approach and css properties as approach first.
- We have used autocomplete attribute with both the input tags making them autocomplete the input field values based on the previous filled values.
Example 1
Here is a complete example code implementing above mentioned steps demonstrating how to use autocomplete attribute in HTML with input tag.
<!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>
Example 2
In this example, we have set the value of autocomplete attribute to 'on' in student name field and set the value to 'off' in mail field. Only student name field will get the suggestion for 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 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>
Conclusion
In this article, we have demonstrated how to use autocomplete attribute in HTML. We have used autocomplete attribute with form tag and input tag. In input tag we have used different value of autocomplete attribute with different input field showing the difference when autocomplete attribute is enabled and when disabled.
490 Views
