Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Autocomplete text input for HTML5?
Use the autocomplete attribute for autocomplete text input. The autocomplete attribute is used with form elements to set the autocomplete feature on or off. If the autocomplete feature is on, the browser will automatically show values based on what users entered before in the field.
If the autocomplete feature is off, the browser won't automatically show values based on what users entered before in the field.
Attribute Values
The following are the attribute values:
| S. No | Attribute Value | Description |
|---|---|---|
| 1 | on | This is the default value. The browser automatically complete values based on what users entered before. |
| 2 | off | The browser won't complete values based on what users entered before. Users have to type the value. |
Example: Autocomplete Enabled
You can try the following code to learn how to use the autocomplete attribute in HTML. To test this, enter some values in the input fields and click Submit. After that, fill the field again to see autocomplete suggestions appear.
<!DOCTYPE html>
<html>
<head>
<title>HTML autocomplete attribute</title>
</head>
<body>
<form action="" method="get" autocomplete="on">
Details:<br><br>
Student Name<br><input type="text" name="sname"><br><br>
Email<br><input type="email" name="email"><br><br>
Training week<br><input type="week" name="week"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Example: Autocomplete Disabled
For autocomplete off value, the web browser will not complete values based on what users entered before:
<!DOCTYPE html>
<html>
<head>
<title>HTML autocomplete disabled</title>
</head>
<body>
<form action="" method="get" autocomplete="off">
Secure Details:<br><br>
Username<br><input type="text" name="username"><br><br>
Password<br><input type="password" name="password"><br><br>
<input type="submit" value="Login">
</form>
</body>
</html>
Individual Field Control
You can also control autocomplete for individual fields within a form:
<form autocomplete="on"> Name: <input type="text" name="name" autocomplete="on"><br> Credit Card: <input type="text" name="cc" autocomplete="off"><br> <input type="submit" value="Submit"> </form>
Key Points
- The
autocompleteattribute can be applied to the entire form or individual input fields - Individual field settings override form-level settings
- Use
autocomplete="off"for sensitive data like passwords and credit cards - Modern browsers support various autocomplete values like "name", "email", "current-password"
Conclusion
The HTML5 autocomplete attribute provides control over browser autofill behavior. Use "on" for convenience and "off" for security-sensitive fields to enhance user experience while maintaining data protection.
503 Views
