Nuevos elementos de formulario HMTL5

En este apartado del tutorial veremos tres nuevos elementos que añade HTML5 para interactuar con los formularios, cada uno de los tres elementos pueden ser de gran utilidad para algunas funcionalidades que pueden presentarse a la hora de manejar información.

El primero de ellos es datalist, este elemento se presenta para facilitar la búsqueda de palabras a partir de unos patrones predefinidos.

El elemento datalist interactúa con los datos introducidos en un input que contiene un atributo llamado list y que tiene el valor del id del datalist que se quiere utilizar.

Introduce un nombre ...

<input list="nombres">
<datalist id="nombres">
<option value="Raul">
<option value="Diego">
<option value="Alberto">
<option value="Jesús">
<option value="Alfredo">
<option value="Manuel">
<option value="Miguel">
<option value="Pedro">
</datalist>

El propósito del elemento keygen es proporcionar una forma segura para autenticar usuarios. La etiqueta keygen especifica un campo generador de un par de claves en un formulario. Cuando se envía el formulario, dos claves se generan, una pública y otro privada. La clave privada se almacena localmente, y la clave pública se envía al servidor. La clave pública se podría utilizar para generar un certificado de cliente para autenticar al usuario en el futuro.

Nombre: Encryption:

<form action="" name="formulario" method="get">
Nombre: <input type="text" name="usr_name">
Encryption: <keygen name="security">
<input type="submit" value="Generar claves">
</form>

El elemento output representa el resultado de un cálculo (como uno realizado por un script), en el siguiente ejemplo se pueden sumar números decimales a través de los valores de los campos a y b.

+ =

<form oninput="x.value=parseFloat(a.value)+parseFloat(b.value)">
<input type="number" id="a">+
<input type="number" id="b"> =
<output name="x" for="a b"></output>
</form>