Hoy veremos como podemos indicar al navegador como sugerir opciones automáticas con los valores insertados anteriormente por los usuarios en un campo formulario.
Para hacer esto, basta con agregar el atributo autocomplete dentro del campo de formulario correspondiente.
Si el valor de este atributo es igual a “on”, el navegador mostrará al usuario sugerencias para completar el rellenado del campo de formulario automáticamente, basado en los valores que se han introducido previamente en el mismo.
Cuando el valor del atributo autocomplete es igual a “off”, el navegador no completará automáticamente el valor introducido. Esto es especialmente útil cuando no deseamos que la información que será introducida en el campo de formulario se almacene en la caché del navegador, debido a que se trata de información sensible.
Este atributo se puede utilizar con el elemento <form> y con el elemento <input> type con los valores: text, search, url, tel, email, password, datepickers, range y color.
Vamos a ver un ejemplo sencillo, y consiste en crear un formulario de inicio de sesión, en el cual ingresaremos un email y una contraseña. Al campo para introducir el email le agregaremos el atributo autocmplete con el valor “on”.
<form action="/datos.php" method="POST">
<label for="usuario">Correo electrónico:</label><br>
<input type="email" name="femail" id="usuario" autocomplete="on"><br>
<label for="contrasena">Contraseña:</label><br>
<input type="password" name="fpassword" ><br>
<input type="submit">
</form>
Ahora, rellenemos los campos y enviemos el formulario. Si refrescamos la página y volvemos a introducir un email en el campo correspondiente, podemos ver como el navegador muestra una sugerencia con la dirección de correo electrónico que acabamos de introducir. Si luego cambiamos el valor de autocomplete y lo fijamos como off podremos ver como el navegador desactiva el completado automático.
Si queremos que el autocompletado se aplique a todos los campos del formulario, entonces debemos agregar el atributo autocomplete dentro del elemento form. Por ejemplo:
<form action="datos.php" method="POST" autocomplete="on">
<label for="nombre">Nombre:</label>
<input type="text" name="fname" id="nombre"><br>
<label for="apellido">Apellido:</label>
<input type="text" name="lname" id="apellido"><br>
<label for="email">Email:</label>
<input type="email" name="email"><br>
<input type="submit">
</form>
Supongamos que en el código anterior queremos desactivar el autocompletado en el campo email. Para esto, tan sólo debemos agregarle el atributo autocomplete=”off” y el navegador desactivará el rellenado automático.
El atributo autocomplete admite otros valores. Para ver el listado completo ingresa al sitio WHATWG.
Inicialmente me formé como Técnico en Anális y Diseño de sistemas. Luego ingresé a la escuela de negocios, hice una licenciatura en Administración y obtuve una especialización (Post-grado) en Alta Dirección Empresarial. Desde el año 2007 me dedico a la creación de sitios web, lo cual combino con la consultoría y la capacitación de tecnologías de Internet.
- TypeScript vs. JavaScript: ¿Cuál es mejor para tus proyectos? - octubre 31, 2024
- Optimización de imágenes: clave para un diseño web eficiente - septiembre 28, 2024
- Objetos en JavaScript - septiembre 21, 2024
