Autocompletar formularios con HTML5

19/abr/2012 HTML5 5 Comentarios
Logo HTML5

Seguro que cuando estás rellenando un formulario muchas de las veces te empieza a ofrecer opciones de autocompletado de los datos. Empiezas a escribir tu nombre y ya te ofrece varias opciones. E incluso, introduciendo un solo campo te rellena varios del formulario.

No en vano el autocompletar de los formularios es una de las cosas que más está potenciando los navegadores.

Ahora con HTML5 vamos a poder controlar el aspecto de autocompletar los formularios. Así mediante código podremos decir si queremos que el formulario sea autocompletable o no.

Para controlar el autocompletar de los formularios con HTML5 tenemos el atributo autocomplete. Atributo al cual deberemos de pasar un valor booleano.

Así podemos tener un formulario con el autocompletar del formulario activado. Es decir con el atributo autocomplete a "on":

  1. <h2>Formulario con Autocompletar Activado</h2>
  2. Al insertar datos en los campos es muy probable que se muestren opciones de autocompletado.
  3. <form action="enviar.php" autocomplete="on">
  4. <label for="nombre">Nombre: </label><input type="text" id="nombre"/><br/>
  5. <label for="city">Ciudad: </label><input type="text" id="city"/><br/>
  6. </form>
  7.  

O un formulario con el autocompletar del formulario desactivado. Es decir, con el atributo autocomplete a "off":

  1. <h2>Formulario con Autocompletar Desactivado</h2>
  2. Al insertar datos en los campos no se te mostraran opciones de autocompletado.
  3. <form action="enviar.php" autocomplete="off">
  4. <label for="nombre2">Nombre: </label><input type="text" id="nombre2"/><br/>
  5. <label for="city2">Ciudad: </label><input type="text" id="city2"/><br/>
  6. </form>

Un simple atributo en HTML5 con mucha capacidad de control.

Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

5 comentarios en “Autocompletar formularios con HTML5”

Víctor Cuervo

Jesús Márquez

Magnifico aporte y tb el de Jhonatan.

saludos.

Víctor Cuervo

Víctor Cuervo

@Jhonatan,

Envíanos por la página de contacto el código y lo pegamos. 😀
http://lineadecodigo.com/acerca-de/#contacto

Víctor Cuervo

Jhonatan

Hola Victor, excelente aporte, es que HTML5 nos trae unos atributos adicionales excelentes, como por ejemplo el placeholder, el required para validar un formulario. Aquí dejo un ejemplo.

placeholder=”Escribe tu nombre completo” colocará un texto como ejemplo dentro del campo, el cual desaparecerá al momento de dar clic sobre él. El atributo “required” agrega la propiedad de obligatorio a un campo. Un Saludo

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*


*