Autocompletar formularios con HTML5

19/Abr/2012 HTML5 5 Comentarios

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.

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

Responder a Jesús Márquez Cancelar respuesta

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

*

*