The HTML autocomplete attribute controls whether to provide automatic assistance in filling out any form or input field.
Definition and Usage
➔ This allows browsers to automatically fill in form fields based on previously entered data, saving users time and effort.
➔ The autocomplete attribute works with input types such as text, search, URL, telephone, email, password, datepicker, range, and color.
➔ To enable or disable autocomplete for the entire form, use autocomplete="on" or autocomplete="off" in the <form> tag.
Example
<form autocomplete="off">
<!-- Form fields goes here-->
</form>
➔ To use autocomplete for a specific input field, use the autocomplete attribute on the individual input element. Input level autocomplete overrides the form-level setting.
Example
<form>
<input type="text" name="name" autocomplete="name" />
<input type="email" name="email" autocomplete="email" />
<input type="password" name="password" autocomplete="password" />
</form>
Applies to
This attribute can be used on the following element.
| Attribute | Element |
|---|---|
| autocomplete | <form>, <input> |
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML autocomplete Attribute Example</title>
<meta charset="utf-8" />
<style>
input[type='text'] {
border: 1px solid rgb(19, 18, 18);
border-radius: 5px;
background-color: #d1e0ff;
padding: 5px;
margin-top: 10px;
width: 200px;
height: 23px;
}
input[type='password'] {
border: 1px solid rgb(19, 18, 18);
border-radius: 5px;
background-color: #d1e0ff;
padding: 5px;
margin-top: 10px;
width: 200px;
height: 23px;
}
input[type='submit'] {
border: 1px solid rgb(19, 18, 18);
border-radius: 5px;
background-color: #d1e0ff;
padding: 5px;
margin-top: 10px;
width: 120px;
height: 42px;
}
input[type='submit']:hover,input[type='text']:hover,input[type='password']:hover {
background-color: #c1d0ff;
}
</style>
</head>
<body>
<h2>HTML autocomplete Attribute Example</h2>
<p>This is for example purposes only, it will not submit files to the server.</p>
<form action="#" method="post">
<table>
<tr>
<td>Name:</td>
<td><input type="text" name="name" autocomplete="name" /></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="text" name="email" autocomplete="email" /></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="password" autocomplete="password" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Submit"/></td>
</tr>
</table>
</form>
</body>
</html>
Click on the "Try it Now" button to see how it works.