The autocomplete attribute in HTML is used to specify whether the browser should automatically fill in input fields with previously entered values, like names, addresses, or emails. This attribute helps to improve user experience by reducing the amount of typing required for forms.
Following are the possible values for autocomplete attribute.
1. on: The browser will suggest previously entered values for the field (default).
2. off: The browser will not suggest values.
3. specific values: You can specify predefined values such as name, email, username, password, street-address, etc.
autocomplete.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Autocomplete Example</title> </head> <body> <form action="https://httpbin.org/post" method="post"> <label for="name">Name:</label><br> <input type="text" id="name" name="name" autocomplete="name"> <br><br> <label for="email">Email:</label><br> <input type="email" id="email" name="email" autocomplete="email"> <br><br> <label for="street">Street Address:</label><br> <input type="text" id="street" name="street" autocomplete="street-address"> <br><br> <label for="password">Password:</label><br> <input type="password" id="password" name="password" autocomplete="new-password"> <br><br> <input type="submit" value="Submit"> </form> </body> </html>
Start typing the values to input fields, you can see the previously entered values as suggestions.
Explanation
1. autocomplete="name": The browser will auto-suggest previously entered names.
2. autocomplete="email": The browser will suggest stored email addresses.
3. autocomplete="street-address": The browser will suggest stored street addresses.
4. autocomplete="new-password": This prevents browsers from suggesting previously used passwords, encouraging users to enter a new one.
Previous Next Home
No comments:
Post a Comment