feed twitter facebook LinkedIn facebook

HTML5 » Autocompletar formularios con HTML5

abril 19, 2012 por Víctor Cuervo 5 Comentarios Imprimir Imprimir

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.

Visualizar el Codigo
Visualiza el artículo
Descargar el Codigo
Descargar el código
Error en el Codigo
Error en el código
Foro sobre HTML5
Foro sobre HTML5
tags:

Artículos relacionados:

5 comentarios »

RSS feed para los comentarios de esta entrada. TrackBack URI

  1. Jhonatan
    mayo 24, 2012 #

    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

  2. Víctor Cuervo
    mayo 25, 2012 #

    @Jhonatan,

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

  3. Jesús Márquez
    julio 3, 2012 #

    Magnifico aporte y tb el de Jhonatan.

    saludos.

Deja un comentario

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*