Images Input

Datalist:

Vamos a repasar esta etiqueta datalist de HTML5, es uno de las nuevos input, etiquetas  y atributos del form en HTML5 para formularios. Ver también atributo list HTML5.

Este nuevo elemento agrupa varios valores predefinidos que facilitan el autocompletado de un campo tipo input. De manera que el usuario según vaya escribiendo el navegador abre una lista desplegable con las diferentes opciones a seleccionar.

Lo que anteriormente veníamos haciendo con plugins en jQuery ahora lo podemos hacer fácilmente con esta nueva etiqueta de los formularios en HTML5.

En ningún momento se fuerza al usuario a elegir el valor del datalist, simplemente le sugiere ciertos valores.

Sintaxis de datalist HTML5

Voy a poneros la sintaxis de datalist extraída de su web oficial para que veáis de un vistazo su nomenclatura:

XHTML

1 2 3 4 5 6 7 8 9

<input list="listacolores">   <datalist id="listacolores">   <option value="Azul">   <option value="Rojo">   <option value="Amarillo">   <option value="Negro">   <option value="Blanco"> </datalist>

En el ejemplo de sintaxis vemos como primero declaramos un input con el nombre de la lista en el atributo ‘list’. Después ponemos la nueva etiqueta datalist con los diferentes valores de la lista y la relacionamos con el input mediante id ‘listacolores’.

Es decir, el atributo ‘list‘ del input y el ‘id’ del datalist tienen que coincidir, de lo contrario no se relacionarían y no saldría la lista de valores sugeridos.

Keygen:

Esta etiqueta sirve para enviar claves en el autentificado web. Al enviarse el formulario se crean 2 claves, una pública que se envía al servidor y que posteriormente se usará para seguir auntentificándonos en el sistema, y otra privada que se almacena localmente en el navegador.

Sintaxis de HTML5 keygen

Su sintaxis es muy sencilla, aquí os pongo su código:

XHTML

1	<keygen name="clave">

Como podéis ver, es una etiqueta a la que se le asigna un nombre.

Ejemplo de keygen HTML5

XHTML

1 2 3 4 5 6

<form action="formu.php" method="post">     User: <input type="text" name="usuario">     <!-- añadimos el campo de typo keygen -->     Pass: <keygen name="clave">     <input type="submit" value="Enviar"> </form>

En el siguiente ejemplo de keygen HTML5 veremos el valor de la clave pública enviada. Y dependiendo del navegador el tipo de cifrado que se puede elegir. Una vez pulsado el botón de envío, veréis como sale un recuadro calculando la clave.

Os pongo el código PHP para obtener la clave pública enviada por POST.

PHP

1 2 3 4

<?php if ($_POST['clave']) echo "clave pública enviada: " .$_POST['clave']; ?>

Atributos importantes de Keygen

1. keytype: Tipo de clave enviada, por defecto es RSA. Otros tipos de clave son: EC y DSA.
2. challenge: Especifica si la clave cambia tras el envío del form.
3. form: Id del form al que pertenece la clave.