Programación y ejemplos de PHP, jQuery, HTML5, WordPress, MySQL, AMP y htaccess


Autocomplete HTML5: Atributo para autocompletar datos en formularios

Hoy toca analizar un nuevo atributo autocomplete HTML5 para los formularios web, este nuevo elemento nos va ayudar a recordar, autocompletar y/o sugerir los valores insertados anteriormente en el mismo formulario.

Este atributo se puede aplicar a los input del formulario, o a todo el formulario cuando queremos que todos los elementos compatibles con este elemento tengan autocomplete.

Sintaxis del atributo autocomplete HTML5

Os pongo la sintaxis de este atributos tal y como viene en la web oficial:

Tal y como veis en la imagen superior el atributo está puesto en los input y en el form, sus valores son 2:

  • on: Para activar autocomplete
  • off: Para desactivarlo.

Si el atributo se aplica a nivel de formulario, todos los campos que acepten el atributo autocompletarán con contenidos anteriormente enviados. Posteriormente a nivel de input es posible deshabilitar ese atributo.

Lo mismo sucede en el caso opuesto, si ponemos al formulario autocomplete=off, posteriormente podemos activar inputs individualmente.

Inputs compatibles con el atributo autocomplete HTML5

Este atributo se puede usar el los siguientes inputs:

Ejemplo del atributo autcomplete HTML5

Os he realizado este ejemplo del atributo autocomplete de HTML5 para que probéis el envío del formulario varias veces, así conseguiremos que los inputs se autocompleten con información previamente enviada.

En el ejemplo vemos como los input de tipo text tienen el atributo autocomplete activado, ahora solo nos queda probarlo varias veces y ver que funciona…

Listado de los nuevos atributos HTML5

En esta otra url tenéis todos los nuevos atributos HTML5 para inputs y formularios.

Listado de los nuevos input HTML5

En esta url tenéis el listado completo de los nuevos input de HTML5.

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies