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.
Os pongo la sintaxis de este atributos tal y como viene en la web oficial:
<form action="#" autocomplete="on">
Nombre: <input type="text" name="nombre" autocomplete="on"/>
Apellidos: <input type="text" name="apellidos" autocomplete="off" />
</form> Tal y como veis en la imagen superior el atributo está puesto en los input y en el form, sus valores son 2:
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.
Este atributo se puede usar el los siguientes inputs:
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.
<form action="015-autocomplete-html5.php" name="formulario" method="POST"> Introduzca su nombre: <input type="text" name="nombre" autocomplete="on" /> Introduzca su edad: <input type="text" name="edad" autocomplete="on" /> <input type="submit" value="Enviar"/> </form>
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…
En esta otra url tenéis todos los nuevos atributos HTML5 para inputs y formularios.
En esta url tenéis el listado completo de los nuevos input de HTML5.