HTML5 Elementos de formulario

Nuevos elementos de formulario HTML5

HTML5 tiene los siguientes nuevos elementos de formulario:

  • <datalist>
  • <keygen>
  • <output>

Nota:No todos los navegadores admiten los nuevos elementos de formulario de HTML5, pero puedes usarlos; incluso si el navegador no admite los atributos de formulario, aún pueden mostrarse como elementos de formulario normales.

Elemento HTML5 <datalist>

El elemento <datalist> especifica una lista de opciones para el campo de entrada.

El atributo <datalist> especifica que el campo form o input debe tener una función de autocompletado. Cuando el usuario comienza a escribir en el campo de autocompletado, el navegador debe mostrar en ese campo las opciones para completar:

Use el atributo list del elemento <input> vinculado al elemento <datalist>.

OperaSafariChromeFirefoxInternet Explorer

Ejemplo

El elemento <input> usa valores predefinidos de <datalist>:

<input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist>

Pruébalo »

Elemento HTML5 <keygen>

La función del elemento <keygen> es proporcionar un método confiable para verificar al usuario.

La etiqueta <keygen> especifica un campo generador de pares de claves para el formulario.

Al enviar el formulario, se generan dos claves: una privada y una pública.

La clave privada se almacena en el cliente, mientras que la clave pública se envía al servidor. La clave pública puede usarse posteriormente para verificar el certificado de cliente del usuario.

Este elemento ha quedado obsoleto y ya no se recomienda su uso. Las alternativas incluyen:

  1. Usar la API Web Cryptography para generar claves en JavaScript

  2. Usar bibliotecas criptográficas especializadas

OperaSafariChromeFirefoxInternet Explorer

Ejemplo

Formulario con campo keygen:

<form action="demo_keygen.asp" method="get">Nombre de usuario:<input type="text" name="usr_name">Cifrado:<keygen name="security"> <input type="submit"> </form>

Pruébalo »

Elemento HTML5 <output>

El elemento <output> se usa para diferentes tipos de salida, como cálculos o salida de scripts:

OperaSafariChromeFirefoxInternet Explorer

Ejemplo

Muestra el resultado del cálculo en el elemento <output>:

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 <input type="range" id="a" value="50">100 + <input type="number" id="b" value="50">= <output name="x" for="a b"></output> </form>

Pruébalo »

Nuevos elementos de formulario HTML5

Etiqueta Descripción
<datalist> La etiqueta <input> define la lista de opciones. Úsela junto con el elemento input para definir los posibles valores de input.
<keygen> La etiqueta <keygen> especifica un campo generador de pares de claves para el formulario.
<output> La etiqueta <output> define diferentes tipos de salida, como la salida de scripts.
Otras extensiones