El autocompletado de texto de entrada es la función predeterminada de cualquier navegador. Mientras trabaja con el formulario o los campos de entrada en la página web HTML, la función de autocompletar de los navegadores aparece en la imagen. De forma predeterminada, la función de autocompletar está habilitada en los navegadores, por lo que al enviar el formulario recuerda la información. Entonces, cuando vuelva a abrir el mismo formulario o complete los mismos campos de entrada, muestra las sugerencias que el usuario llenó anteriormente.
El atributo de autocompletar se usa para habilitar y deshabilitar el autocompletado de texto. Este atributo contiene dos valores:
- en
- apagado
Para deshabilitar la función de autocompletar en el formulario o campo de entrada, el atributo de autocompletar está desactivado.
Sintaxis:
autocomplete: on/off
Ejemplo: este ejemplo no utiliza el atributo de autocompletar, por lo que, de forma predeterminada, el atributo de autocompletar está habilitado.
<!DOCTYPE html>
<html>
<head>
<title>
HTML autocomplete attribute
</title>
<style>
form {
margin: 10%;
}
.form-control {
margin-top: 10px;
}
</style>
<link href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
rel="stylesheet" >
</head>
<body>
<div class="container col-lg-12 form">
<form action="/submit"
method="post"
enctype="multipart/form-data">
<div class="form-group">
<input type="text"
class="form-control form-control-sm"
id="name" name="username"
placeholder="Enter Name">
<input type="text"
class="form-control form-control-sm"
id="email" name="email"
placeholder="Enter Email">
<input type="text"
class="form-control form-control-sm"
id="city" name="city"
placeholder="Enter City">
<br>
<button type="submit"
class="btn btn-primary">
Submit
</button>
</div>
</form>
</div>
</body>
</html>
Producción:
Nota: Las sugerencias de autocompletar se mostrarán siempre según la información previamente completada en el formulario.
Ejemplo 2: este ejemplo establece el atributo de autocompletar en desactivado.
<!DOCTYPE html>
<html>
<head>
<title>
HTML autocomplete attribute
</title>
<style>
form {
margin: 10%;
}
.form-control {
margin-top: 10px;
}
</style>
<link href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
rel="stylesheet" >
</head>
<body>
<div class="container col-lg-12 form">
<form action="/submit"
autocomplete="off"
method="post"
enctype="multipart/form-data">
<div class="form-group">
<input type="text"
class="form-control form-control-sm"
id="name" name="username"
placeholder="Enter Name">
<input type="text"
class="form-control form-control-sm"
id="email" name="email"
placeholder="Enter Email">
<input type="text"
class="form-control form-control-sm"
id="city" name="city"
placeholder="Enter City">
<br>
<button type="submit" class="btn btn-primary">
Submit
</button>
</div>
</form>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por AshishkrGoyal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA